Семантика HTML для веб контента

Представляю вам вольный перевод статьи «Semantic HTML for Web Content», автором которой является Jacob Gube.

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

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

Семантический HTML предназначен только для машин. Они не так умны как вы и я, поэтому мы должны помочь им.

Примером таких машин, которые извлекают пользу из семантического HTML, могут послужить поисковые системы. Когда поисковые системы индексируют наш сайт, они интерпретируют содержание страниц сайта на основе разметки.

Вот что говорит Google об использовании семантического HTML (курсивом выделены мои записи):

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

Социальные веб-сервисы такие как Facebook, Pinterest и Twitter любят семантическую разметку. Особенно тогда, когда их пользователи хотят поделиться контентом на них. Эти веб-сервисы берут части наших статей и отображают их на своей платформе. Если мы будем использовать семантический HTML, то они будут в состоянии сделать эту работу лучше.

Языковые инструменты (переводчики) исследуют нашу разметку для того, чтобы они могли перевести наши статьи на другой язык. Хорошая HTML разметка может привести к более точному переводу. Для примера, существуют различия между американским и британским английским. Люди могут с легкостью понять диалектические и идиоматические различия, но машины этого не могут.

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

Это только верхушка айсберга. Есть неисчислимое количество других машин, которые смотрят на наш HTML и пытаются его понять. Черт возьми, да интернет состоит из кучи машин. Они составляют большую часть веба. Мы должны приложить все возможности, чтобы кормить их более значимыми данными.

Окей, теперь, я надеюсь, вы на борту и хотите использовать семантический HTML. Может быть на своём блоге или при разработке CMS.

Посмотрите на шаблон ниже.

HTML шаблон

Вот семантический HTML шаблон для веб-контента. Это хорошая отправная точка/шаблон. Просто заполните пробелы. Это общий шаблон, который может работать со многими типами текстового содержимого: записи в блоге, новостные статьи, очерки и так далее.

Обновление: 8 апреля 2015 Этот шаблон был изменен из-за неправильного использования HTML элементов main и summary. Смотрите ниже этот комментарий.

<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article" lang="" dir="">
  <head>
    <title itemprop="name"></title>
    <meta itemprop="description" name="description" content="">
    <meta itemprop="author" name="author" content="">
  </head>
  <body>
    <article>
      <header>
        <h1 itemprop="headline"></h1>
        <time itemprop="datePublished" datetime=""></time>
        <p><a itemprop="author" href=""></a></p>
      </header>
      <div itemprop="about"></div>
      <div itemprop="articleBody">
        <!-- Основной текст статьи должен быть здесь -->
      </div>
      <footer>
        <time itemprop="dateModified" datetime=""></time>
        <section itemscope itemtype="http://schema.org/WebPage">
          <!-- Секция заголовка-->
          <h2></h2>
          <p><a itemprop="relatedLink" href=""></a></p>
        </section>
      </footer>
    </article>
  </body>
</html>

HTML-разметка шаблона использует семантические элементы (т.е. article, header и footer).

Также здесь используется структурированная разметка данных Schema.org. В частности, схемы Статья и Веб-страница. Schema.org — это совместный проект компаний Google, Bing и Yahoo!. Целью проекта является предоставление способа для поисковых систем, лучше понимать содержимое страниц.

Пример

Вот заполненный пример:

<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article" lang="ru" dir="ltr">
  <head>
    <title itemprop="name">Название страницы статьи</title>
    <meta itemprop="description" name="description" content="Краткое описание статьи.">
    <meta itemprop="author" name="author" content="Имя автора">
  </head>
  <body>
    <article>
      <header>
        <h1 itemprop="headline">Заголовок статьи</h1>
        <time itemprop="datePublished" datetime="1990-11-12">12 ноября 1990 года</time>
        <p>Написано <a itemprop="author" href="#author-profile.html">Имя автора</a></p>
      </header>
      <div itemprop="about">Резюме статьи. Это может быть руководство, выдержка, абстрактный или вводный абзац.</div>
      <div itemprop="articleBody">
        <p>Основная часть статьи идет здесь.</p>
      </div>
      <footer>
        <p>Эта статья была обновлена
          <time itemprop="dateModified" datetime="2015-03-01">30 марта 2015</time></p>
        <section itemscope itemtype="http://schema.org/WebPage">
          <h2>Похожие статьи</h2>
          <p><a itemprop="relatedLink" href="#related-article.html">Связанные статьи</a></p>
          <p><a itemprop="relatedLink" href="#related-article-02.html">Другие статьи по теме</a></p>
        </section>
      </footer>
    </article>
  </body>
</html>

Смотреть пример

Детали

Давайте поговорим о различных частях HTML-шаблона.

Уточнение типа контента, языка и направления текста

HTML элемент имеет четыре атрибута:

itemscope указывает, что схема Статья используется на протяжении всего документа.
itemtype содержит адрес используемой схемы.
lang даёт информацию о том, на каком языке написано содержимое страницы. W3C говорит, что мы должны пользоваться языковыми тегами, перечисленными в IANA Language Subtag Registry. Например, если страница написана на немецком языке, мы должны присвоить атрибуту land значение de.
dir содержит информацию о направлении текста статьи. У вас есть два варианта. Либо «слева направо» (ltr), либо «справа налево» (rtl). Если вы хотите, чтобы браузер решил это за вас, то не используйте его.

Семантическая HTML структура

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

Элемент	Описание
article	Элемент `article` представляет собой обособленный фрагмент контента, который может существовать сам по себе.
header	Вводный контент лучше структурировать как дочерний элемент элемента `header`. В рамках статьи, вводный контент может быть заголовком, датой публикации и именем автора.
footer	«Подвал, обычно содержит сведения о разделе, ссылки на различные документы, авторские данные и прочее.» — 4.3.8 The footer element

BBC использует сопровождающее предложение ко всем своим статьям.

Структурированные данные

Шаблон использует микроданные, чтобы усилить семантическую HTML структуру.

Если вы обеспокоены использованием новых HTML5 элементов, то вы можете заменить их полностью поддерживаемыми элементами, такими как div или span. при этом вы можете обеспечить их семантическую значимость с помощью микроданных.

Ниже приводится краткое описание микроданных, используемых в HTML-шаблоне.

Микроданные	Описание
name	Это свойство указывает на имя пункта. В нашем случае, пункт — это статья. Свойство `name` нашей статьи — это заголовок веб-страницы, который представлен в элементе `title`. Обычно, названия веб-страниц уникальны (из-за SEO), поэтому такое название хорошо подходит, в большинстве случаев, и для статей.
headline	Человекочитаемое название статьи. Некоторые сайты используют короткие, богатые на ключевые слова значения для `title` из-за SEO, а затем идёт полный заголовок, описывающий тему статьи.
description	Краткое объяснение содержания статьи. В большинстве случаев, присвоенное значение мета-тегу `description` хорошо работает.
author	Имя создателя контента. В HTML-шаблоне за это отвечает мета-тег `author` и видимая часть статьи.
datePublished	Это свойство позволяет нам четко указать дату размещения статьи в элементе `time`.
about	Это свойство применимо к тексту, описывающему тему статьи. Хорошо подходит для сопровождающего предложения или параграфа.
articleBody	Это свойство представляет собой основную часть статьи.
dateModified	Возможно, вы хотите дать людям знать, когда статья была последний раз пересмотрена и обновлена. Если вы хотите дать эту информацию и машинам, то следует использовать свойство dateModified. Это также даёт веб-сервисам намек на то, что они должны обновить свой индекс, потому что содержимое изменилось.
relatedLink	Это свойство используется для ссылок, имеющих отношение к статье. Свойство relatedLink является частью веб-страницы, поэтому мы вынуждены указать тип пункта в родительском элементе.

Использование более значимой разметки

Как я сказал ранее, HTML-шаблон — это всего лишь отправная точка. Рассмотрите возможность использования дополнительных микроданных (и других семантических HTML элементов), которые могут сделать ваш контент более значимым.

Schema.org имеет массу схем для различного типа контента. Вот некоторые примеры:

Пост блога: схема BlogPosting
Секция комментариев: схема UserComments
Новости: схема NewsArticle
Для сайтов, которые размещают много примеров кода: схема Code

Полный лист доступных схем находится здесь.

Подсказки

После того, как вы осчастливите вашу семантическую HTML структуру, испытайте и проверьте её с помощью Google’s Stuctured Data Testing Tool.

Также, HTML-шаблон использует HTML5-элементы. Если вы поддерживаете устаревшие браузеры, то вам необходимо использовать шимы, такие как Modernizr или HTML5 Shiv. Или, вы можете заменить HTML5-элементы в шаблоне на общие элементы, такие как элемент div, сохраняя микроданные.