Семмантика в HTML5

1.HTML5

Что это такое?

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

Ниже приведен рисунок этапов развития языка HTML, который наглядно демонстрирует, почему версия 2014 года считается относительно новой:

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

Что нового?

Семантика

Семантические теги HTML5 позволяют более доступно описать свой смысл и назначение для браузеров и разработчиков. Ранее разметка страниц строилась на блоках <div>, которые имели class или id.

Например: <div class="main">.

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

В HTML5 был добавлен ряд новых семантических тегов, которые по сути являются обычными пустыми блоками и визуально не будут отличаться от тега <div>, но при этом смогут сделать код гораздо более читаемым.

Давайте рассмотрим основные из таких тегов:

<header> - может содержать вводные (логотип, контакты, заголовки и пр.) и навигационные (поиск, содержание, навигацию) элементы. Одна HTML-страница может содержать несколько элементов header. Они могут располагаться в любой части страницы. То есть это не обязательно должен быть заголовок всей страницы. Это может быть заголовок какой-то секции.
<nav> - блок навигации. Страница может содержать несколько таких тегов, которые не заменяют собой <ul> или <ol>, а оборачивают их.

Примечание
Для панели навигации можно использовать не только списки

Пример: header>h1+nav>ul>li>a

<header>
  <h1>Restaurant</h1>
  <nav>
    <ul>
      <li><a href="">menu</a>
      <li><a href="">kitchen</a>
      <li><a href="">contacts</a>
    </ul>
  </nav>
</header>

<section> - универсальный раздел страницы. Служит для группировки тематического содержимого, может содержать заголовок. Его содержимым может быть программа мероприятия, оглавление страницы и т.п.
<article> - обособленный независимый блок, начинающийся с заголовка. Служит для группировки публикаций, комментариев, статей. Может быть многократно использован и дублироваться на других страницах сайта. Допускается наличие внутри других элементов <article>, имеющих прямое отношение в "родительскому" контенту.

Примечание
Есть различные способы взаимодействия тегов section и article. Родителем может быть как тот, так и другой тег. Это зависит от контента.

Рассмотрим пример: на странице есть два блока со статьями различной тематики.

<section>
  <h1>Столицы мира</h1>
  <article>
    <h2>Киев</h2>
    <p>...</p>
  </article>
  <article>
    <h2>Париж</h2>
    <p>...</p>
  </article>
</section>
<section>
  <h1>Падение нефтедоллара</h1>
  <article>
    <h2>Все пропало</h2>
    <p>...</p>
  </article>
  <article>
    <h2>Восхождение нефтеюаня</h2>
    <p>...</p>
  </article>
</section>

Обратный пример: страница содержит статью, которая разбита на несколько блоков (вводная информация, текст).

<article>
  <h1>...</h1>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <p>...</p>
</article>

<aside> - чаще всего является боковой колонкой, удаление которой никак не повлияет на общее понимание содержимого страницы (архив, элементы <nav>, реклама, статистика и пр.)
<main> - содержит в себе основное содержимое документа. Его контент не должен повторяться во всех документах сайта (навигация, логотип, поиск, коопирайт и пр.);

Примечание
"main" не должен быть расположен внутри элементов "article", "aside", "footer", "header", "nav".

<footer> - определеяет нижний колонтитул секции или страницы. Может содержать контактную информацию, навигацию, сведениия о коопирайте и пр. Как и в случае с <header>, в одном документе может быть несколько таких элементов.

Пример:

<section>
  <article>
    <header>
      <h2>...</h2>
    </header>
    <p>...</p>
    <footer>
      <a href="">Благодарности</a>
    </footer>
  </article>
  <article>
    <header>
      <h2>...</h2>
    </header>
    <p>...</p>
    <footer>
      <a href="">Благодарности</a>
    </footer>
  </article>
</section>

<address> - определяет контактную информацию владельца документа/статьи. Обычно размещается внутри <article>, отображается курсивом.

Приведем несколько примеров построения страницы с помощью семантических тегов HTML5.

Сравнение структуры документа HTML4 vs HTML5

Вариации разметки страницы в зависимости от контента

Спортивный сайт: название (header); навигация (nav); последние результаты (aside); последние новости (section), контактная информация (footer)

Сайт-визитка: название (header); навигация (nav); section-first: статья о компании, контекстная реклама (aside1), статистические данные (aside2); section-second: побочный контент, рекламная площадь; контактная информация, копирайт (footer).

Домашная страница клиники: название, навигация, история клиники (article), список специалистов (aside), контактная информация.

Аудиофайлы

<audio> - используется для добавления звуковой дорожки на веб-страницу.

Пример подключения:

<audio src="{path}" controls></audio>

В разных браузерах стандартный аудиоплеер выглядит по-разному:

Примечание
С помощью css можно изменить внешний вид плеера.

Важно!

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