Закрыть

Вход

Вход на сайт

Карта сайта



Создание сайта на основе HTML5



Итак, код простого HTML5 документа выглядит следующим образом:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style type="text/css">
header, aside, nav, section, article, figure, footer
{
	display: block;
}
</style>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
 
    <header>
        Задает «шапку» сайта или раздела, в которой обычно располагается заголовок.
    </header>
 
    <nav> 
        <ul>
            <li><a href="#">Пункт меню 1</a></li>
            <li><a href="#">Пункт меню 2</a></li>
            <li><a href="#">Пункт меню 2</a></li>
            <li><a href="#">Пункт меню 3</a></li>
        </ul>
    </nav>
 
    <aside>
        <ul>
            <li><a href="#">Раздел сайта 1</a></li>
            <li><a href="#">Раздел сайта 2</a></li>
            <li><a href="#">Раздел сайта 3</a></li>
        </ul>
    </aside>
 
    <article>
		<time>2011-21-10</time>
        <hgroup>
            <h1>Заголовок документа</h1>
            <h2>Подзаголовок</h2>
        </hgroup>
<p>Рыба в веб-дизайне HTML5 — временное наполнение макета страницы для имитации её законченного вида. У дизайнера не всегда есть под рукой материалы, которые планируется публиковать на HTML5 веб-сайте и поэтому нужно использовать что-то иное чтобы показать как дизайн будет работать в естественных условиях. При этом рыбное содержимое не обязано обладать смыслом — здесь важно визуальное восприятие. Рыбным содержимым может быть не только текст HTML5, но и изображения (например, иллюстрации к статье, аватары пользователей, кадры из видео для видеоплеера, баннеры и т. д.). Дизайнер рыбу может придумать самостоятельно, а может скопировать с другого аналогичного HTML5 сайта. В случае с текстом можно воспользоваться программой-бредогенератором или же вставить классический рыбный текст «Lorem ipsum».</p>
        <h3>Изображения</h3>
        <figure>
            <p><img src="images/pic1.jpg" alt=""></p>
            <figcaption>Подпись под картинкой</figcaption>
        </figure>
         <figure>
            <p><img src="images/pic2.jpg" alt=""></p>
            <figcaption>Подпись под картинкой</figcaption>
        </figure>
         <figure>
            <p><img src="images/pic3.jpg" alt=""></p>
            <figcaption>Подпись под картинкой</figcaption>
        </figure>
 
        <section>
            <h2>Заголовок секции документа</h2>
            <p>Служит для определения разделов документа. Например может определять главы, заголовки, колонтитулы, а так же любые другие разделы в документе.</p>
        </section>
        <section>
            <h2>Заголовок секции документа</h2>
            <p>Служит для определения разделов документа. Например может определять главы, заголовки, колонтитулы, а так же любые другие разделы в документе.</p>
        </section>
    </article>
 
    <footer>
        Подвал сайта 
    </footer>
 
</body>
</htm>

http://html5shiv.googlecode.com/svn/trunk/html5.js — определяет html5 теги для старых браузеров(Internet Explorer 8 и ниже).

<header>

Определяет заголовок документа(сайта) или раздела.

<nav>

Определяет раздел навигационных ссылок на сайте.

<aside>

Определяет некий контент, который не относится к контенту блока в котором располагается сам тег.

<article>

Тег определяет основное содержание документа, например сообщение блога, текст новости или статьи.

<time>

Определяет либо время (в 24-часовом формате), либо дату по Григорианскому календарю.

<hgroup>

Тег используется для группировки заголовков.

<figure>

Определяет группу любых элементов, например иллюстрации, диаграммы, фотографии с заголовками и подписями к ним.

<figcaption>

Определяет заголовок для элемента <figure>, должен располагаться первым или последним элементом внутри группы.

<section>

Служит для определения разделов документа. Например может определять главы, заголовки, колонтитулы, а так же любые другие разделы в документе.

<footer>

Тег определяет нижние колонтитул для документа(сайта) т.е. «футер», так же может задавать нижний колонтитул для раздела(<section>) на сайте.



Все статьи раздела

Комментарии(1)

  1. Создание сайтов и интернет магазинов


    Иван Зыков:
    11-09-2014 10:55

    Тэг hgroup удалён из спецификации W3C. Его лучше не использовать. Поисковики не будут его учитывать.

Комментировать

* Поля обязательны для заполнения

Популярные статьи

Пакеты услуг

Сайт под ключ "Базовый"
Создание сайта под ключПрофессиональный сайт под ключ на популярных системах управления - Modx или Joomla >>>
Корпоративный сайт
Корпоративный сайтCтруктурированный ресурс компании, включающий каталог для развития Вашего бизнеса >>>
Интернет-магазин
Интернет-магазинЛучшее решение на сегодняшний день для продажи любых товаров >>>