Тэги HTML 5


Дорогие друзья, поговорим сегодня немного о новых элементах языка HTML5. Как Вы знаете, HTML5 и CSS3 теперь могут быть использованы в большинстве современных браузеров последних версий, но к сожалению не во всех. Здесь Вы можете подумать, почему я должен использовать эти новые технологии, которые не имеют полной кросc-браузерной совместимости? Ответ на этот вопрос прост.

Каждая новая работа, требующая от Вас использования технических знаний в Вашей области всегда помогает Вам стать более всесторонне развитым человеком. Конечно, HTML5 значительно меняется и не так широко поддерживается, но время, потраченное на его изучение, не будет потрачено зря. Вы начнёте сразу его использовать, когда технологи будут полностью отлажены, и это будет Вашим преимуществом.

Итак, посмотрим на новые тэги языка HTML5.

Новые тэги HTML5

  • DOCTYPE
  • Charset
  • Header
  • Nav
  • Aside
  • Article
  • Figure
  • Hgroup
  • Section
  • Address
  • Footer

DOCTYPE

Красиво и просто выглядит теперь DOCTYPE. Он занимает одну строку кода и 15 символов, по сравнению с длинным DOCTYPE, который очень сложно запомнить.

<!DOCTYPE html>

CHARSET

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

<meta charset="utf-8">

HEADER

Чтобы включить вводную информацию о Вашем сайте, был создан новый элемент заголовка.

Элемент HEADER может  содержать заголовки раздела (h1–h6или hgroup элементы),  если это необходимо. Элемент HEADER также может быть использован для того, чтобы располагать таблицу содержания, форму или любые соответствующие логотипы.

Элемент HEADER, как правило, содержат основную навигацию Вашего сайта. Вот пример семантической части заголовка.

<header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О сайте</a></li>
</ul>
</nav>
</header>

NAV

Обычно при вёрстке сайта в XHTML, для создания навигационного меню используют либо тег <Div> с классом (class="nav") либо тэг <UL> с ID навигации. Новый элемент NAV позволяет выделить Вашу навигацию.

Элемент NAV представляет собой - часть страницы; ссылки на другие страницы или на части этой страницы: раздел навигационных ссылок.

Вы вероятно уже заметили в приведенном выше примере, что элемент NAV используется в разделе HEADER, который не обязателен, но имеет семантическое значение.

<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О сайте</a></li>
</ul>
</nav>

ASIDE

Новый элемент ASIDE немного запутан. Он подходит для размещения родственного основному контенту содержимого, и должен использоваться только когда содержимое связано с контентом, но считается отличным от него. Официальное определение от W3C звучит так:

Элемент ASIDE представляет раздел страницы, который состоит из контента, имеющего косвенное отношение к содержанию вокруг элемента ASIDE, и который может быть рассмотрен отдельно от содержания. Такие участки часто представлены на боковой панели.

В приведенном ниже примере я использовал новый элемент для выделенной секции веб-сайта. Эта секция относиться к контенту страницы, но "выделена" и поэтому элемент ASIDE работает.

<aside>
<p>Это часть выделенного контента, который хорошо работает с новым тэгом ASIDE </p>
</aside>

ARTICLE

Элемент ARTICLEиспользуется для содержания, которое предназначено для распространения или повторного использования.

Элемент ARTICLEпредставляет собой компонент страницы, которая состоит из автономных композиций в документе, на странице, в приложении или на сайте, который предназначен для независимого распространения или многократного повторения, например, в синдикатах. Это может быть пост форума, статья журнала или газеты, запись в блоге, пользовательские комментарии, интерактивный виджет или гаджет или любое другое независимое содержание.

Документация описывает когда вложенные элементы ARTICLE используются в HTML.

Когда элемент ARTICLEвложен, внутренние элементы представляют статьи, которые - в принципе имели отношение к содержанию внешней статьи.

Внутри элемента ARTICLE Вы можете использовать элементы HEADER и FOOTER, чтобы разделить содержимое Вашей статьи.

<article>
<header>
<h2>Заголовок статьи</h2>
<p><time pubdate datetime="2010-3-09T14:28-08:00"></time></p>
</header>
<p>Это основное содержание статьи, которые не в заголовке или в футере статьи.</p>
<footer>
<a href="#">Показать комментарии</a>
</footer>
</article>

FIGURE

Тэг FIGURE позволяет выделить в отдельный элемент изображение и опционально заголовок для него.

Элемент FIGURE представляет собой некий поток контента, с заголовком или без, обозначенный как отдельный блок и выделенный из основного потока документа.

<figure>
<img src="figure.jpg" alt="figure image" />
<figcaption>Это элемент figure</figcaption>
</figure>

HGROUP

Элемент HGROUP позволяет группировать теги заголовка вместе, в сущности просто добавляя больший вес разделу.

Элемент Hgroup представляет собой заголовок раздела. Элемент используется для группировки набора элементов H1-H6когда раздел имеет несколько уровней, таких как подзаголовки, альтернативные названия или лозунги.

<hgroup>
<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
</hgroup>

SECTION

Элемент SECTION позволяет разделить контент, вложенный внутри контента. Сложность в том, что Вы должны чётко знать когда использовать элемент ARTICLE или обычный тег DIV.

Элемент SECTION представляет собой общий документ или раздел приложения. Раздел, в этом контексте, это тематическая группировка контента, как правило, с заголовком. Примером раздела могут служить главы, различные страницы с вкладками в диалоговом окне с вкладками, или нумерованные тезисные разделы. Главная страница веб сайта может быть разбита на такие разделы как введение, новостные статьи, контактная информация.

<article>
<hgroup>
<h1>Название</h1>
<h2>Подзаголовок</h2>
<hgroup>
<p>Это описание данного раздела</p>
<section>
<h1>Категория 1</h1>
<p>Описание категории 1</p>
</section>
<section>
<h1>Категория 2</h1>
<p>Описание категории 2</p>
</section>
</article>

ADDRESS

Элемент ADDRESS используется специально для контактной информации. Не только контактная информация актуальная для всего сайта, но также и небольшая локальная информация актуальная для одной страницы. Этот тег предназначен не только для физических адресов, а может содержать и другую информацию.

Элемент ADDRESS представляет собой контактную информацию для статьи или отдельного элемента в теле документа. Если это элемент <body>, то контактная информация относится к этому документу в целом.

<address>
<a href="#">Иван Иванов</a>,
<a href="#">Петр Петров</a>,
<a href="#">Контакт, относящиеся к этой странице</a>
</address>

FOOTER

Элемент FOOTER используется специально для разделения содержания в конце конкретного раздела. Этот тег может быть использован в конце статьи не только в качестве основного футера для сайта.

Элемент FOOTER представляет собой подвал для ближайшего контента. Подвал обычно содержит информацию о разделе, например, кто автор, ссылки на соответствующие документы, правовая информация, и тому подобное.

<article>
<header>
<h1>Заголовок Статьи</h1>,
</header>
<p>Содержимое статьи</p>
<footer>
<p>Комментариев : 8</p>
</footer>
</article>

Включение элементов HTML5

Для того, чтобы использовать эти новые теги, в настоящее время необходимо отобразить их блоками в CSS, потому что браузеры не знают, как с ними справиться.

header, nav, article, section, footer, figure, aside {
display: block;
}

Ну вот и все, пожалуй достаточно. Более подробную информацию о HTML5 Вы можете прочитать здесь

По материалам Шейна Джефферса

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

3 комментария

  1. Олег16/09/2011
  2. KJS25/03/2011
  3. Max18/06/2010

Добавить коментарий

5 × один =