Семантика html5

<article>   <h1>Основной заголовок страницы</h1>   <h2>Подзаголовок</h2>   <p>   Какие-то всякие разные штуки и некоторые <em>выделенные</em> и    даже <strong>важные</strong> слова.   </p>   <p>   Другой абзац.   </p>   <ul>   <li>Один</li>   <li>Два</li>   <li>Три</li>   </ul>   <blockquote>   Однажды сказано   </blockquote>  </article>  <aside>   <h3>Мои последние сообщения</h3>   <ul>   <li><a href="#">Один</a></li>   <li><a href="#">Два</a></li>   <li><a href="#">Три</a></li>   </ul>  </aside>

webref.ru

Расширяемая семантика

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

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

Решение также должно быть совместимо и с будущими версиями. Не в том смысле, что оно должно работать в будущих браузерах — это ответственность разработчиков браузеров, но оно должно быть расширяемым. Мы не можем ожидать какого-либо единого решения, которое разрабатывается прямо сейчас, чтобы решить все мыслимые и немыслимые будущие семантические потребности. Мы можем разработать решение, которое удовлетворит расширяющиеся потребности по мере их возникновения.

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

Итак, как HTML5 решет этот вопрос? HTML5 вводит ряд новых элементов, некоторые из них я назвал «структурными» — <section>, <nav>, <aside>, <header> и <footer>. Элемент <dialog> по типу содержимого похож на <blockquote>. Есть также ряд элементов данных, таких как <meter>, который «представляет скалярное измерение в известном диапазоне или дробное значение, например, используемый объем диска» и элемент <time>, который указывает дату и/или время.

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

Давайте рассмотрим каждое ограничение.

Обратная совместимость

Как современные браузеры обрабатывают новые элементы вроде <section>? Ну, самые последние версии Safari, Opera, Mozilla и даже IE7 будут отображать все страницы так.

<h1>Заголовок верхнего уровня</h1> <section>  <h1>Заголовок второго уровня</h1>  <p>это текст внутри section</p>  <section>  <h1>Заголовок третьего уровня</h1>  </section> </section>

Похоже, отличное начало. Но когда мы пытаемся установить, к примеру, такой стиль для элемента <section>:

section {color: red}

…большинство упомянутых браузеров изменило стиль элемента, но IE8 (а также IE6–7) нет.

Итак, мы имеем серьёзную проблему обратной совместимости с 75% используемых в настоящее время браузеров. Учитывая период полураспада Internet Explorer, мы можем предсказать, что большинство пользователей будут использовать IE6 и IE7 даже спустя несколько лет.

Если HTML5 вводит новые элементы, какова вероятность того, что они будут применяться большинством разработчиков с учетом того, что они по существу несовместимы с большинством браузеров? К сожалению, если вы увидите альтернативное решение проблемы CSS в том, чтобы включить атрибут class в элемент <section>, а затем попробовать изменить стиль с помощью класса, то это не будет работать в IE. Возможно, есть обходной путь, но если нет, на этом все дела заканчиваются.

Давайте обратимся ко второму ограничению — совместимость с будущими версиями.

Совместимость с будущими версиями

Начнём с постановки вопроса: «Зачем изобретать новые элементы?». Разумным ответ на него будет: «Потому что в HTML не хватает семантического богатства, а добавив эти элементы, мы увеличиваем семантическое богатство HTML — что не плохо, не так ли?».

При добавлении этих элементов мы стремимся, чтобы в HTML было больше семантических возможностей, но только в узкой области. Независимо от того, сколько элементов введено, мы всегда будем думать о добавлении в HTML больше семантики. Добавив столько новых элементов, сколько нам хочется, мы по-прежнему не решим проблему. Нам не нужно добавлять определенные термины в словарь HTML, нам необходимо добавить механизм, который позволит обогащать документ семантикой по мере необходимости. С технической точки зрения мы должны сделать HTML расширяемым. В HTML5 никакого механизма для расширения нет. Именно поэтому HTML5 угробит значительный процент современных браузеров и в реальности не добавляет семантику вообще.

Почему бы не принять существующий словарь, тот же Docbook? Его словарь структуры документа гораздо богаче и он разрабатывался рядом экспертов в течение многих лет. Однако это не является аргументом в пользу Docbook, дело в том, что задача обеспечения механизма семантического богатства в HTML идёт своим путём, уделяя мало внимания передовой практике в ​​отношении работ тридцатилетней давности (исходная работа началась в начале 70-х годов).

Некоторые соображения по поводу решения

Критикуя нынешние усилия, есть ли у меня какие-то практические советы о том, как решить эту проблему? Ну, начну с одного.

Если добавление элементов в HTML находится за рамками темы, по крайней мере, в этой дискуссии, атрибуты это другая логическая область HTML, на которой мы сосредоточимся. В конце концов, в течение почти десятилетия мы использовали атрибуты class и id в качестве механизмов расширения семантики HTML. Множество разработчиков знакомы с этим подходом, и он их устраивает. Проект микроформатов показал, что существующих атрибутов HTML недостаточно для  универсального механизма по расширению семантики HTML. Таким образом, если мы хотим использовать атрибуты чтобы помочь решить эту проблему, мы должны включить один или несколько новых атрибутов. Прежде чем перейти к механизму о том, как это работает, проверим это решение на те же требования, что и для новых элементов HTML5. Самое главное, поддерживают ли новые атрибуты HTML обратную совместимость? И если да, обеспечит ли это реальный механизм для семантического расширения HTML?

Давайте внедрим новый атрибут. Я назову его «structure», но конкретное имя не имеет значения. Мы можем использовать его так:

<div structure="header">  

  
 

Посмотрим, как наши браузеры справятся с ним. И конечно все браузеры должны изменить его стиль через CSS.

div {color: red}

Но как это сделать?

div[structure] {font-weight: bold}

В действительности, почти все браузеры, включая IE7, стилизуют <div> с атрибутом structure, даже если такого атрибута не существует! К сожалению, наше счастье на этом заканчивается, т.к. IE6 этого не делает. Но мы можем использовать атрибут в HTML, и все существующие браузеры признают его. Мы даже можем использовать CSS для стилизации нашего HTML с помощью атрибута во всех современных браузерах. И если мы хотим обойти старые браузеры, мы можем добавить к элементу значение класса для управления его стилем. Сравните это с решением в HTML5, который добавляет новые элементы, и которые не могут быть стилизованы в Internet Explorer 6 или 7 и вы увидите, что это решение, определенно, обратно совместимо лучше.

htmlbook.ru

Расширяемая семантика

Существует очень серьезная проблема, которую необходимо решить здесь. Нам нужны механизмы в HTML, которые четко и однозначно позволят разработчикам добавлять более выразительной семантики, а не псевдосемантики в их разметку. Это, пожалуй, является самой насущной задачей для HTML 5 проектов.

Но это не так просто, придумать механизм для создания большей семантики в HTML контенте: Существуют значительные ограничения, на любое решение. Возможно, самое большое из них — обратная совместимость. Решение, не может нарушить сотни миллионов устройств для просмотра использующихся сегодня, которые будут использоваться в ближайшие годы. Любое решение, которое не совместимо, не будет широко принято разработчиками, опасаясь потери читателей. Оно будет быстро засыхать на корню.

Решение должно быть так же вперед-совместимым. Не в том смысле, что оно должно работать в будущих броузерах — это задача разработчиков броузеров, но оно должно быть расширяемым. Мы не можем ожидать какого-либо единого решения, которое мы сейчас разработаем, что бы решить все вообразимые и невообразимые потребности семантики в будущем. Мы можем разработать решения, которые могут быть расширены для удовлетворения будущих потребностей, по мере их возникновения.

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

Итак, как HTML 5 решит этот вопрос? HTML 5 вводит ряд новых элементов. Некоторые я назвал «структурные» — section, nav, aside, header и footer. Элемент dialog который по типу и содержанию схож с blockquote. Есть так же целый ряд элементов данных, как например meter, который представляет собой «скалярное измерение в пределах известного диапазона или дробное значение, например использование диска»; и элемент time{http://www.w3.org/html/wg/html5/#the-time}, который представляет собой дату и/или время.

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

Рассмотрим каждое препятствие

Обратная совместимость

Как современные броузеры обрабатывают эти новые элементы, такие как section? Хорошо, последние версии Safari, Opera, Mozilla и даже IE7 все делают на странице следующим образом.

<h1>Top Level Heading</h1>
<section>
  <h1>Second Level Heading</h1>
  <p>this is text in a section element</p>
  <section>
  <h1>Third Level Heading</h1>
  </section>
</section>

* This source code was highlighted with Source Code Highlighter.

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

section {color: red}

… Большинству из упомянутых броузеров это удается, но IE7 (и тем более 6) нет.

Поэтому у нас есть проблема обратной совместимости с 75% броузеров, использующихся в настоящее время. Учитывая, период полураспад Internet Explorer, мы можем прогнозировать, что большинство пользователей будут использовать IE6 и IE7, даже через несколько лет.

Если HTML 5 вводит новые элементы, какова вероятность, что они будут использоваться подавляющим большинством разработчиков — учитывая то, что они не совместимы с большинством используемых броузеров?

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

Совместимость снизу вверх

Сначала мы поставим вопрос: «Зачем мы изобретать эти новые элементы?». Разумным ответом будет: «Потому что не хватает семантики в HTML, а добавление этих элементов мы увеличим семантику HTML, что не может быть плохим, или может?».

Добавляя эти элементы, мы рассматриваем необходимость повышения потенциала семантики HTML, но только в рамках узкой сферы. Независимо от того сколько элементов введем, мы всегда будем думать о добавлении большей семантике HTML. И добавив столько элементов, сколько нам хочется, мы не решим проблему. Нам не нужно добавлять определенные термины в словарь HTML, мы должны добавить механизм, позволяющий расширять семантику документа по мере необходимости. В технических терминах, мы должны сделать HTML расширяемым. HTML 5 не предлагает механизма расширяемости.

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

Остаюнся несколько вопросов о новых элементах. Откуда взяты названия новых элементов? Как было решено, что элемент навигации нужно называть «nav»? Зачем в навигации применяются термины page-level, site-level и meta-site-level?

Почему бы не принять существующий словарь, такой как DocBook? Его словарь структуры документа более богат, он был разработан путем публикаций экспертов, на протяжении многих лет. Это не является аргументом в пользу DocBook, а дело в том, что чрезвычайно важная задача подготовки механизма обеспечения семантикой HTML проходит путь, уделяя малое внимание практике в работе которая началась более 30 лет назад. (Оригинал работы по GML начался в начале 1970-х годов)

Некоторые идеи решения

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

Если добавление новых элементов не обсуждается, по крайней мере в этой дискуссии, атрибуты — другая логическая область HTML, сконцентрируемся на ней. В конце концов, мы на протяжении, почти, десяти лет использовали атрибуты class и id, как механизмы расширения семантики HTML. Многие разработчики уже знакомы с этим и чувствуют себя комфортно. Проект microformats показал, что существующих атрибутов не достаточно, для использования их как механизм расширения семантики HTML. Так что, если мы хотим использовать атрибуты для решения проблемы, мы должны ввести один или более новых атрибутов. Пред тем, как перейти к механики, того как это может работать, справедливо подвергнуть это предложение тем же требованиям, как и новые элементы в HTML 5. Самое главное во внедрении новых атрибутов — это будет ли обратная совместимость HTML. Если да, то обеспечивает ли это работоспособный механизм расширения семантики в HTML?

Давайте изобретем новый атрибут. Назовем его «structure», но название не важно. Мы можем использовать его так:

<div structure="header">

Давайте посмотрим, как наши броузеры это оценят.

Конечно, все наши броузеры обработают следующий элемент CSS.

div {color: red}

А как насчет этого:

div[structure] {font-weight: bold}

На самом деле, почти все броузеры, включая IE7, обработают стиль div с атрибутом structure, даже если нет такого атрибута. К сожалению, наше счастье изчезает, потому что IE6 нет. Но мы можем использовать этот атрибут в HTML и все существующие броузеры распознают его. Мы даже можем использовать стили CSS для нашего HTML, с использованием атрибута во всех современных броузерах. И если мы хотим обойти старые броузеры, мы можем добавить class, со значением стиля. В сравнении с HTML 5 решением, которое добавляет новые элементы, не работающие в Internet Explorer 6 или 7, мы видим, что это, безусловно, более обратно совместимое решение.

habr.com

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

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

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

Если спецбраузеры для людей с физическими недостатками при всем цинизме можно не принимать в целевую аудиторию, то вот способ понравиться своенравным роботом Яндекса или 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></code>

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

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 – заголовок статьи. Не сайта.

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

Заключение

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

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

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

jean179.ru

HTML5 | Семантическая разметка сайта

Что такое семантика в HTML

Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML – едином для всех веб-разработчиков документе. На данный момент, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи – важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы – тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика – это изучение назначения непонятных слов и понятий, то в HTML наоборот, семантика – это правильное применение и использование уже готовых и объяснённых тегов.

Семантическая вёрстка веб-документа

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

Чем отличается семантическая вёрстка от обычной
Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:
<div class=»header»>Шапка сайта</div>
<div class=»navigasia»>Главное верхнее меню сайта</div>
<div class=»sidebar»>Дополнительное боковое сайта</div>
<div class=»content»>Содержимое веб-страницы</div>
<div class=»footer»>Подвал сайта</div>
Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:
<header>Шапка сайта</header>
<nav> Главное верхнее меню сайта </nav>
<aside>Дополнительное боковое сайта</aside>
<article>Содержимое веб-страницы</article >
<footer>Подвал сайта</footer>
Как видно из примера, для обозначения и задания соответствующих стандартных элементов веб-страницы использованы соответствующие теги. Кроме этого, код гораздо проще. При этом, внешний вид такой страницы для человеческого глаза – останется абсолютно неизменным. Возникает резонный вопрос – а зачем тогда нужна семантическая вёрстка и разметка веб-страницы, если людям она не видна?

Зачем нужна семантическая вёрстка

Семантическая вёрстка и разметка веб-страницы видна браузеру и роботам. Семантическая вёрстка и разметка позволяет более точно определять значимость отдельных элементов веб-страницы и всего текста в целом Поэтому, прежде всего – семантическая вёрстка нужна для улучшения робото-функционала сайта и, как следствие – лучшей его поисковой индексации. А, не об этом-ли, мы все мечтаем?

Семантическая вёрстка в HTML5

Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.

В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов <i> и <b> на <em> и <strong>. HTML5 – не в пример «семантичней» и это видно из приведённого примера.

Новые популярные семантические теги HTML5

Прежде всего, <!DOCTYPE html> – простой и понятный всем доктайп.

Дальше идут теги, определяющие семантическую специализацию блоков:
(семантические теги)

<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer><header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp><rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

Проблемы совместимости HTML5 и XHTML

Принципиально, в совместимости HTML5 и XHTML – проблем нет никаких. Все новые браузеры прекрасно поддерживают теги HTML5 и выполняют их. Единственное огорчение ждёт любителей валидного кода. Потому что, большинство сайтов свёрстано не HTML, а в XHTML. И теперь, получается странная ситуация – доктайп от XHTML, а теги из HTML5. Валидатор «вешается и пишет красным». В настоящий момент, на такую «нестыковку» все закрыли глаза. А что делать? Ведь XHTML всегда был только производным языком от HTML.

Так что основной веб-язык, это всё-таки HTML5. В ближайшее время, проблемы совместимости HTML5 и XHTML, скорей всего будут решаться, либо простым игнорированием вопроса в пользу HTML5, либо простым добавлением тегов HTML5 в спецификацию XHTML. В любом случае, это будет простое решение, без фундаментальной перестройки положения вещей. Уж слишком он выстрадан, этот HTML5, чтобы теперь ещё всерьёз начинать возиться с XHTML5.

Плавный переход шаблона с XHTML на HTML5

Как утверждают специалисты, HTML5 – это не одна большая вещь, это набор разных возможностей. Поэтому, начинать переходить с XHTML на HTML5 можно постепенно, по частям добавляя нужный код в свой шаблон. Валидатор XHTML ругнётся и всё вскорости образуется. Ведь всем остальным – «по барабану», теги HTML5 работают везде и вся. Для начала, можно изменить общую структуру своего шаблона, простой заменой классов CSS на семантические теги из примера «Чем отличается семантическая вёрстка от обычной».

HTML5 | Семантическая разметка сайта

(Главное – начать)
Опять-же таки, как утверждают известные специалисты – «обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> в HTML5 имеет предельно простой вид: <!DOCTYPE html>. После такого «обновления», ровным счётом ничего не произойдёт, потому что все теги, определённые в HTML4, также поддерживаются и в HTML5. Что касаемо перехода с XHTML на HTML5, то тут я не рискнул на своём сайте так резко менять <!DOCTYPE>, решился только на постепенную замену части тегов да изменение структуры страницы.

tehnopost.info

HTML5 и СЕО

Одно из ключевых особенностей HTML5 и на мой взгляд самое важное — это разделение поисковым роботом всех блоков по их значимости, т.е. сегментация веб-страниц. В html4 сделать это  было невозможно, т.к. стандартный тег div не добавляет смысловой значимости элементу, который находится внутри данного тега. С использованием новых элементов header, article, aside, footer все меняется. Т.е. грубо говоря, они «говорят» поисковым роботам каким элементам придавать значение, а какие пропускать. Например, поисковый бот легко поймет, что информация, заключенная между тегами <footer></footer> является копирайтом и подобной информацией для посетителя.

Элементы, влияющие на индексацию в поисковых системах

<article>

Тег article является одним из наиболее важных при сегментации страниц сайта. Данный тег явно указывает поисковым системам, где находится основной контент сайта. А мы все знаем, что контент это прежде всего то, за чем приходят посетители на сайт. Здесь предполагается, что ПС будут максимально уделять внимание контенту, заключенному между тегами <article> </article>, отбросив или отодвинув на второй план остальные элементы.

<section>

Элемент section разбивает всю разметку на различные секции. Что это дает? Поисковые роботы хорошо ориентируются на веб-странице, которая хорошо структурирована. Если правильно использовать тег <section>, то можно с легкостью построить информационную иерархию документа, а это в свою очередь улучшает индексацию сайта в целом.

<header>

C помощью тега header поисковые роботы легко могут найти на сайте логотип, название сайта, слоган, главную навигацию (главное меню).

<nav>

Данный тег определяет навигационную структуру на сайте.

Ссылки

В отличии от HTML4 в HTML5 ссылки имеют больше значимых атрибутов.

Вот основные атрибуты ссылок в HTML5:

alternate — ссылки на альтернативные адреса одной и той же страницы

author — ссылки, имеющие отношение к автору веб-страницы

external — ссылки, указывающие на внешние ресурсы

help — ссылки, ведущие на страницы помощи

next — ссылка ведущая на следующую часть страницы

nofollow — ссылка не подтверждается данным сайтом

prev — ссылка ведущая на предыдущую часть страницы

Остальные атрибуты можете посмотреть здесь.

Вот такой вот небольшой обзор разметки на HTML5. Что касается меня, то я давно перешел на верстку с использованием разметки HTML5 и большинство шаблонов на своих сайтах уже перевел на HTML5, вот только вот до данного блога никак руки не доходят.

На этом все. Всем пока. Увидимся в следующих постах.

А вы уже перешли на HTML5?

zaurmag.ru

What is semantic HTML5?

If you know a little about HTML you will know that HTML tags are (mostly) used to format content — these tags tell the browser how to display the content on the page. They give no indication as to what type of content they contain or what role that content plays in the page.

Semantic HTML5 addresses this shortcoming by defining specific tags to indicate clearly what role is played by the content those tags contain.  That explicit information helps robots/crawlers like Google and Bing to better understand which content is important, which is subsidiary, which is for navigation, and so on. By adding semantic HTML tags to your pages, you provide additional information that helps Google and Bing understand the roles and relative importance of the different parts of your page.

Examples

div and span tags. Non-semantic / generic.

These are examples of non-semantic HTML elements. They serve only as holders to convey to the browser how the content should be displayed. They give no information about the role the content they contain plays on the page.

Examples of semantic tags.

These are semantic elements. They clearly define the role of the content they contain.

Why do I need to use it?

For sighted users, it is usually easy to identify the various parts of a web page at a glance. Headers, menus, and (hopefully) the main content are all immediately, visually apparent. Now imagine you are blind.

Google and Bing’s bots (spiders) are, if not blind, seriously sight impaired. For them, the visual clues are phenomenally difficult to see and understand.

They need your help. If you can successfully communicate to Google and Bing which part of the page is the header, which the footer and which is for navigation they will thank you. Most importantly, by telling them which is the most important content, you give them an explicit instruction to prioritize that content.

Here is our page.

On its own, using semantic HTML5 will not revolutionize your SEO performance (sorry!). As you know, successful SEO is a cumulation of many, many, many small details. This is one of those small details that will improve Google and Bing’s understanding (and confidence in their understanding) of your content, and that will help your SEO efforts.

Looking further forwards, as SEO evolves over the coming years, explicit and coherent communication with these machines will be one of the two cornerstones of your SEO / AEO strategy (see below).

What does it look like?

Examples of semantic HTML tags include <nav>, <footer> and <section>. There are many more semantic HTML5 tags that can be used (for example <blockquote> and <em>), but in this article I am only looking at those semantic HTML tags that you will need to divide the page content into its basic parts.

The following HTML5 tags can be used in the place of <div> tags to break your page content into identified parts each of which fulfills a specific role. As you can imagine, machines like Google and Bing LOVE this.

Semantic HTML5 tags we will be using in this article.

This clear delimitation and explicit attribution of roles to each part of the content makes the page much clearer and easier to index correctly for Google and Bing.

NB Since these tags all behave exactly like <div> tags they can simply replace existing <div>s in the page without affecting the layout. In a lot of cases implementing semantic HTML5 can be as easy as finding the correct pair of <div> and </div> and replacing them.

Examples of Semantic HTML5

Super simple semantic HTML5 Example:

Here we have simply defined what role each part of the page plays. When you start applying HTML5, this is a safe place to start — header, nav, main, footer.

Super simple example with most important elements: header, footer, nav, and main.

It is better to have a super simple implementation that is 100% correct, rather than a complex implementation that is incorrect.

An inaccurate implementation sends conflicting and confusing signals which will make things worse, not better.

A simple and correct implementation is already a big step forward in your communication with Google and Bing. Don’t be overly ambitious; get it wrong, and you could create more problems than you solve!

More Complex Examples

Using sections and articles:

Here we have made a hierarchy within our main content. There is an all-encompassing article that identifies the central content within the main tag. This gives an overview of the topic of that part of the page. Within that article, we have multiple sub-topics that develop the main topic that is identified by the nested sections.

Notice that the design (the orange blocks) are not being used to define the semantic areas of the page.

Notice that the design (the orange blocks) are not being used to define the semantic areas of the page. Looks a little confusing, but shows well that layout HTML and semantic HTML5 have distinct roles.

In the real world, the semantic markup often follows the layout more than this example. General rule: A section forms part of something else. An article is its own thing.

Also note, that here I added a nav section to the footer. Logically, just like the header, the footer contains navigational elements.

Related Aside

Here we have added two pieces of directly related content to the principal article of content. Using asides, we indicate that the related content (aside) is optional. The principal section of content can be shown without the aside(s) and still be understood.

Indirectly Related Aside

Note: an aside does not have to be a sidebar beside the main content. It can also be used for blocks below the main content containing a title, text, and link to another page

Here we have identified some indirectly related content to the page, outside the principal article of content. Here we indicate that the content in the aside is not directly related to the principal article.

That is enough for most needs.

Our final version

This is very good!

Helpful Tips

Section vs. Article

There is much discussion about this. There is no fixed rule about sections and articles, and their implementation is pretty flexible. They are more or less the same and can be used interchangeably most of the time. Just be sure to be logical and consistent.

Personal tip: I have found that nesting sections inside an article of content is both logical for a machine, but also for a human (the HTML code will be easier to read for the developer).

Nesting Elements

Elements can nest other elements. For example, an article can have its own <header>, <footer>, <h1> (as seen above), and even <nav> (anchor links, are a good example). I have not given an illustration of this “super nesting’, and there is a reason for that: This is an SEO blog and, from an SEO standpoint, there is no real benefit from pushing the logic of semantic HTML5 this far.

As mentioned above, for SEO purposes, you should concentrate on providing a solid, simple structure.

What NOT to Do

Just a warning — I have seen many sites using the visual design as a guide for their HTML5 implementation. As seen above, this is not what semantic HTML5 is designed for.

Semantic HTML5 is not for design.

This (surprisingly typical) example simply duplicates the visual layout. Worse than pointless, this indicates that the page contains 4 different topics, rather than one topic and 3 sub-topics. Explicitly providing misleading information to the machines will have a negative impact on its understanding.

Next steps?

More on this Semantic HTML5 for Content Writers – The Essential Guide Post Jason Barnard Epic #SEOisAEO series: Semantic HTML5, IA and Accessibility — so many missed opportunities Webinar recorded on  Oct 02, 2018 On Page SEO checklist: Blogging for People and Search Engines Post Elena Terenteva Implementing semantic HTML5 on your pages will improve your communication with Google and Bing. They both want to understand what your site is about. They both want you to communicate clearly in their language, and they both want you to educate them. Do it.

Communication

Communication with machines (HTML5 has an important role) is one of the two pillars of a long-term SEO strategy that will succeed in a world where we will need to optimise for Answer Engines. There are a great many things that you can do to improve communication. Semantic HTML5 is one. Schema structured markup is another. Here is an article about that. 

Credibility

The second pillar is credibility. There are also a great many things that you can do to improve your credibility. 

Communication + Credibility = winning strategy.

Communication + Credibility

All SEO (and AEO) comes down to communication and credibility. I will continue to write regularly here on SEMrush about techniques for improving your communication and your credibility with Google and Bing (by the way, Bing is about to make a big comeback).

Please do share your thoughts about this article in the comments section below, but also feel free to post your questions about communication and credibility in SEO; your questions will help define the priorities of what I should be writing about.

www.semrush.com

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

Твитнуть

В HTML4 благодаря использованию CSS Вы могли создавать страницы с хорошо понятной для пользователей визуальной структурой, но были ли эти страницы также понятны для поисковых систем или браузеров?

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

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

Так выглядела общая структура документа в HTML4.

Так будет выглядеть общая структура документа в HTML5 с использованием новых тэгов разметки.

С помощью тэга <section> Вы можете группировать логически связанное содержимого в документе.

Если логически связанное содержимое является автономным (может использоваться в других документах независимо от остального содержимого на странице) необходимо использовать вместо <section> тэг <article>.

Обратите внимание: предположим сайт, на котором была опубликована данная статья содержит также несколько других статей. Так как текст этой статьи является автономным т.е. мы можем понять его смысл не читая остальные статьи опубликованные на этом сайте и даже без проблем опубликовать его в любом другом месте, мы выделяем статью о Титанике целиком тэгом <article>. Подразделы данной статьи, однако, не могут является автономными т.к. они логически связанны между собой и в данном случае мы уже должны использовать тэг <section>.

Тэг aside используется для выделения элементов, которые не являются частью содержимого, но косвенно с ним связаны.

Данным тэгом могут выделяться: цитаты, дополнительная информация к статье, словарь с терминами, список ссылок и т.д.

С помощью тэга <mark> Вы можете выделить «важную» часть в тексте.

В журналах и газетах иллюстрации часто сопровождаются подписями. В HTML4 невозможно было создавать подписи не прибегая к использованию CSS.

В HTML5 это проблема решена добавлением новых тэгов: <figure> и <figcaption>.

www.wisdomweb.ru

Лучшие статьи читаем:

Лучший хостинг Какой хостинг выбрать Php unzip Dropbox это