15 ноября 2009 :О семантике элементов HTML5

Ну, сейчас о семантике элементов html5 не сказал только ленивый. Вот и я хотела бы высказать своё веское мнение на этот счёт, особенно если учесть что месяц назад описание многих элементов было изменено.

Собственно что такое семантика? Это в переводе означает смысл. И теги хочется употреблять со смыслом, а не как попало. Например я помню много лет назад когда я только училась верстать, использовала таблицы и не использовала css - вёрстка одного макета (без контента) могла занимать от десяти килобайт. Сейчас вёрстка занимает один-два и количество элементов сводится к минимуму.

Итак, прежде всего хочу заметить, что многие нововведённые элементы html5 не поддерживаются одним из популярнейших браузеров (да-да IE8, я говорю о тебе). Приведу пример:

nav {display:block;color:red;background:blue;width:100px;}

<nav>
some links
</nav>

Во всех браузерах кроме IE элемент nav будет выделен синим, а текст красным. В IE (43% всех браузеров) мы увидим просто чёрный текст. Что мне уже говорит о несостоятельности этого элемента в практическом применении.

Прежде чем меня закидают тапками знатоки настоящей семантики я расскажу о смысле некоторых тегов и когда их нужно применять:

• menu
• nav
• footer & header
• address

<MENU>

применение:

Как вы можете узнать из моей предыдущей заметки «Используйте тег menu для меню», я перешла на использование этого тега во всех проектах фирмы. Он поддерживается во всех браузерах, и на текущий момент представляет собой то же, что и обычный несортированный список (<ul>), как в спецификации HTML 4.01, так и в html5. Таким образом имеет смысл заменить на него обычные списки <ul id="menu"> используемые для разметки навигационного(!) меню. По крайней мере до появления поддержки html5-тегов в очередном IE.

пример:

<menu>
         <li></li>
         <li class="active"><b>Свежие</b></li>
         <li><a href="/news/">Все записи</a></li>
         <li><a href="/feedback/">Книга отзывов</a></li>
         <li><a href="http://usabili.ru/news/rss/" rel="alternate">RSS</a></li>
         <li><a href="mailto:askme@usabili.ru">askme@usabili.ru</a></li>
</menu>

назначение в html5:

"Menu of commands" - Т.е. для использования в НЕ навигационных меню. Например кнопки каких-либо интерфейсов, например виз-редактора или галерей.

<NAV>

применение:

В текущий момент, вы можете использовать этот элемент для семантической аннотации навигационных ссылок (т.е. не для практического использования). 

Для использования основного списка ссылок типа "Главная / Новости / Каталог / О компании", я советую использовать menu.

пример:

<nav>
<div class="breadcrumbs">
         <a href="/news">Новости</a> »
         <a href="/news/2009/">2009</a> »
         <a href="/news/2009/11/">ноябрь</a> »
         <a href="/news/2009/11/19/" class="cat">19</a>
         <a href="/news/2009/11/19/html5-semantics.html" class="subcat">О семантике элементов HTML5</a>
</div>
</nav>

назначение в html 5:

"Section with navigational links" - секция с навигационными ссылками, конкретнее в спецификации указывается что этот тег нужно использовать для выделения особо важной (major) навигации, хотя непонятно какая навигация важнее. Т.е. примерно то что многие ожидали от тега <menu>. На мой взгляд понять, когда использовать в будущем menu, а когда nav, просто - достаточно решить для себя что считать меню, а что навигацией, т.е разбить словосочетание навигационное меню на две составляющих, это всё разрешит.
Например на сайте Html5Doctor в соответствующей статье даются хорошие примеры использования тега nav, которые показывают отличие этого тега от menu:

• Оглавление (Table of Contents)
  Это важная навигация для отдельно взятого контента
• Кнопки назад/вперёд или номерация страниц
  Это навигационные ссылки всего сайта/блога, которая показывают структуру и иерархию.
  
• Форма поиска
  Хоть это не упомянуто в спецификации, но форма поиска очень важна в навигации по сайту, особенно в больших сайтах которые полагаются в основном на свой поисковый движок.
  
• Хлебные крошки
  Хотя хлебные крошки вовсе не обязательны, и (как со мной согласен html5-доктор,) часто могут применяться когда не нужно, они играют важную роль для вспомогательной навигации на крупных сайтах.

<FOOTER> и <HEADER>

применение:

До появления их поддержки в IE эти теги целесообразно применять только для семантической аннотации разметки.

пример:

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
</header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

 <footer>
  <p>Copyright © 2006 The Example Company</p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>

назначение в html5:

Элемент header (Introductory or navigational aids for a page or section) - представляет собой вступительную или навигационную часть документа или его секции, а footer соответственно заключительную и/или навигационную (т.е. он может стоять в начале) часть страницы или секции.

На ранней стадии документации предназначения элементов сильно разнились. В частности элемент footer запрещалось использовать как конец страницы, а только для секций. Однако многим вебмастерам это посчиталось неправильным и Hixie (Ян Хиксон) внял критике с их стороны.

В футере часто повторяют ссылки из меню страницы, (пример сайта). Как говорит документация, в данном случае не обязательно семантическое выделение этих ссылок в <nav>, самого тега <footer> вполне достаточно.

<ADDRESS>

применение:

Смысл этого тега неочевиден. Вебмастера часто применяют для обозначения физического адреса в тексте, и это вполне логично. По крайней мере спецификация html 4.01 не запрещает этого, да и вообще разрешает пихать туда что угодно, например дату изменения страницы. Но на самом деле тег является обозначением просто контактной информации для текущего контента. На мой взгляд значение ближе к глаголу адресовать (to address) чем к физическому адресу. В ранних черновиках html5 использовать тег для обозначения физического адреса категорически запрещалось, однако сейчас разрешается выделять им контактную информацию.

пример:

<footer>
<ADDRESS>
 <A href="http://www.w3.org/People/Raggett/">Dave Raggett</A>,
 <A href="http://www.w3.org/People/Arnaud/">Arnaud Le Hors</A>,
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>
</footer>

назначение в html5:

Контактная информация для страницы или её секции.

The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)

Элемент не должен быть использован для представления какого-попало адреса (почтового например), только если этот адрес действильно не является контактной информацией. (Вообще для разметки почтовых адресов подходит и элемент p).

<ARTICLE> и <SECTION>

применение:

Не поддерживается IE.

пример:

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

назначение в html5:

Article используется для самодостаточной части документа, например статей блога. А section для части article.

Элементы Article - вложенные, при условии что содержание внутренних как-то относится к  внешнему. Это значит что можно например использовать элемент для разметки комментариев к статье.