Стоит ли использовать новые семантические теги html5

Кто только открывает для себя волшебный мир верстки и веб-дизайна, обязательно натыкается на кучу споров в интернете, какой стандарт использовать: html 4.01, xhtml или html5. Если войны по первым двум идут уже несколько лет, так что тут еще как-то понятно. А вот с новичком  html5 (хотя «новичком» его можно назвать номинально, поскольку разработка его идет уже несколько лет) есть куча вопросов.

Поддержка большинства стандартов html5 уже реализована во всех новых браузерах, а для старых браузеров есть решения на javascript типа html5shiv.js или modernizer.js.

Основное преимущество html5 преподносится в том, что верстка становится семантической.

Семантическая верстка: что за зверь?

Теоретически, интернет смотрят не только нормальные люди с нормальными руками, нормальными глазами и на нормальных компьютерах/ноутбуках.  Но есть еще люди с физическими недостатками типа слепоты или низкого зрения, которые смотря через специальные браузеры, которые читают вслух страницы. А есть еще и компьютерные боты, которые качают страницы, анализируют и обрабатывают их для своих целей – поисковые роботы.

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

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

Семантика в старых версиях html4 и xhtml

В старых стандартах выразить структуру документа можно только иерархией заголовков h1-h6. Все.

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

Для преодоления этого и были придуманы новые блочные элемент, которыми планировалось заменить теги div, которые всегда интерпретировались как слои и отвечали за оформление страниц. Ну а программы анализа страниц просто их отбрасывали.

Новые семантические теги в html5

Основные нововведения таких блочных тегов: header, nav,  main, article, section, aside и footer.

Классная идея! Вместо тега <div id=”header”> писать просто <header>. С одной стороны вроде и код меньше, с другой стороны вроде и понятнее верстка получается. Как бы для этого и разрабатывались новые теги на основании анализа верстки множества страниц.

А самый смак в том, что поисковые роботы будут понимать уже семантический строй страницы и отделать важные части (саму статью) от не важных (подвал, боковой столбец). За счет такой минимальной манипуляции можно добиться лучшего ранжирования своих целевых страниц.

Увы, если посмотреть рунет, то можно увидеть просто кучу «веб-мастеров» с юкоза (увы, и не только там), которые приводят такую схему  верстки страницы:

Типа замените свои дивы и будет вам щастье!

Семантика на моих проектах

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

И стал ждать манны небесной от поисковых систем. Один апдейт, второй,  третий. А страницы не выходят в топ. Плохо, но может контент не тот. Может сезонный спад.

Так прошел год. Я уже и забыл о своем эксперименте. Пока не попал под фильтр АГС от Яндекса и не стал копать.

На уважаемом сайте htmlbook.ru, читая еще одну статья про семантическую верстку на html5, нашел интересный сайт-сервис, по семантическому анализу страницы  HTML5 Outliner. Причем можно внести как адрес, так и кусок кода.

После просмотра своих страниц я очень расстроился! Оказалось, что куча непонятных секций, а сам контент имеет 2-3 уровень! Да еще и после «неизвестных секций». А вот у seo-гуру почему-то все красиво укладывается в структуру и часто без всяких нововведений. Обидно, блин!

Семантические теги на самом деле

Вот только если открыть спецификацию html5 на официальном сайте w3c и прочитать её даже с переводчиком, оказывается, что не все так просто.

Тупая подстановка вместо div — header  и так далее совершенно не срабатывает и срабатывать не будет.

Из-за чего такой сыр-бор с семантикой?

По моему скромному мнению, такое разночтение состоит из 2 основных причин:

1. Примеры и переводы из-за бугра идут на простейших страницах без деталей и привязки к реальным страницам со сложной структурой реальных проектов;
2. Синдром «троечника» — попыткой объяснить сложные вещи простыми выводами (тут вспоминаем анекдот про Волка,  Зайца и науку логику).

Большая часть «гуру» не разобралась как действует на самом деле алгоритм и тупа стала писать статьи. А еще большая часть «мини-гуру» просто копировать статьи и передирать их у себя на сайте.

Увы, в эту ловушку попал и я.

А вот серьезные люди уже 3 года назад обсуждали эту проблему!  Увы, тогда я как-то пропустил их статьи.

Пример косяков с семантикой новых тегов html5

То есть возьмем header. Обычно в нем баннер был со ссылкой, может быть вспомогательное меню (главная, обратная связь, карта сайта), кнопки социальных сетей. Ну, и, возможно, главная навигация по сайту.

Такую структуру можно представить так:

А вот если тупо заменить на header и на nav получается

Я даже не поленился и нашел картинки под это дело.
<header>
<h1>Название сайта</h1>
<nav>
<ul>
<li><a href="page1.html">Страница 1</a></li>
<li><a href="page2.html">Страница 2</a></li>
<li><a href="page3.html">Страница 3</a></li>
</ul>
</nav>
</header>
<section>
<h2>Свежие статьи</h2>
<article>
<h2>Заголовок статьи 1</h2>
<p>Текст статьи</p>
</article>
<article>
<h2>Заголовок статьи 2</h2>
<p>Текст статьи</p>
<aside>Дополнительная информация, относящаяся к статье 2</aside>
</article>
</section>
<aside>
<section>
<h3>Blogroll</h3>
</section>
<section>
<h3>Реклама</h3>
</section>
</aside>
<footer>
<p>Копирайты</p>
</footer>

И тогда получается структура вот такая.

1. Название сайта
   1. Untitled Section
   2. Свежие статьи
      1. Заголовок статьи 1
      2. Заголовок статьи 2
         1. Untitled Section
   3. Untitled Section
      1. Blogroll
      2. Реклама

То есть получилась «неизвестная секция» у которой еще одна «неизвестная секция». А контент уже будет от этой секции присоединяться ВТОРЫМ уровнем.

А основную секцию еще кидаем в article + aside. Ой! Еще одна неизвестная секция, да еще и на одном уровне появляется.

Получается, что «хотели как лучше, а получилось как всегда» (с) Черномырдин.

Семантика новых тегов в html5: просто и ясно!

Если сформулировать в двух словах, то

Новые теги — это РАЗДЕЛ!

Все. Точка. Разделы могут быть вложены друг в друга. Но это РАЗДЕЛЫ! С заголовком и другими частями.

Если у такого РАЗДЕЛА нет заголовка, то новыми тегами пользоваться нельзя! Категорически!

И смотреть нужно на эти теги нужно только в виде статьи, а не части страницы!

Header и footer – это части раздела. У них тоже должны быть свои секции, заголовки, текст. Подвал страницы — это не footer! Если у вас в подвале галерея, текст, копирайты  и так далее и все это добро в секциях и с заголовками, то тогда можно использовать. А если это просто полоса со ссылкой и footer нужен лишь для выделения цветом, то используйте простой div.

C header то же самое: если один заголовок, то тег не нужно использовать от слова «совсем».

Article – это статья. Если нельзя все скопировать между этими тегами и перенести на другой сайт, то этим тегом пользоваться нельзя! Если статья одна на страницу – тоже нельзя. У статьи должна быть структура: заголовки – текст – секции — врезка. И только так.

Aside – это врезка в СТАТЬЮ. Не «сайдбар», а именно врезка как в книге с формулами для пояснения основного текста. Во врезке может быть меню навигации по статье, реклама, цитата, картинка, факт и так далее.

Nav — это не любое меню со ссылками на сайте. А лишь главное меню раздела. И не стоит пересыпать этим тэгом сайт. Кстати, и ul-li тоже не очень подходит для меню.

Section — вот самый простой и сложный одновременно тег! Он указывает на раздел, может быть вложенным в другие разделы. Но в нем так же должно быть обязательно заголовок! Поэтому делать в версте сайдбар лучше именно div, а вот виджет уже оформлять с заголовком именно section.

Пример использования новых тегов html5 на странице

Не многие люди хотят думать, всем «разжуй и в рот положи». Сам такой. Гляди схему с этой страницы сайта, где я добился чтобы получалась более-менее правильная семантика.

Предвосхищаю вопрос по H1-h6: в теории в каждой секции теперь можно использовать h1. В теории. Еще раз подчеркиваю! На практике h1 – это заголовок главной статьи. Без ссылки.  Все.

H1 – заголовок статьи. Не сайта.

А после этой схемы смотрите, делайте и переделывайте под себя. Но обязательно проверяйте и тестируйте свою разметку, чтобы добиться желаемого результата. Только опыт и практика поможет вам научиться верстать!

Заключение

Думайте, читайте первоисточники. Не верьте всяким «гуру». В интернете много обмана, вранья. Очень легко попасть на всякий информационный мусор.

Поэтому только ваш здоровый скепсис и личный опыт уберегут от ошибок.

А лично я после таких приколов теперь буду больше читать первоисточники и обязательно тестировать свою верстку не только в валидаторе, но и в семантическом анализаторе.