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

1.HTML5

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

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

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

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

Что нового?

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 можно изменить внешний вид плеера.

Важно!

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

MP3
AAC
Ogg Vorbis

Видео

<video> - используется для подключения видео роликов на веб-страницу.

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

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

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

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

Важно!

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

H.264
Ogg Theora
VP8

PreviousОсновы HTML NextТег form

Last updated 5 months ago