Семантические элементы HTML5

Семантические элементы HTML-страницы и их разновидности

Кроме логической структуры страниц сайта в спецификациях пятой версии HTML присутствует семантическая разметка.

Для начала, нужно пояснить, что такое семантика — это раздел филологии о смысле фраз и отдельных слов. Соответственно, семантические элементы – элементы, имеющие значение.

Семантический элемент жестко обозначает свою функцию браузеру и создателю сайта. К несемантическим элементам можно отнести теги <div> или <span> – из них не ясно, что находится внутри. А вот теги <form> (форма), <article>(статья) или <table> (таблица) уже относятся к семантическим элементам, так как явно дают понять, каким должно быть их содержание. На сегодняшний день все браузеры уже ввели поддержку семантических элементов HTML пятой версии.

Пример: пользователю, просматривающему страницу не видно разницы между тегами <i></i> и <em></em> потому, что в обоих случаях текст будет выделен курсивом, однако разница есть в том, как это видит браузер. В первом случае он просто выделит курсивом отдельный кусочек текста, а во втором – сделает это, так как разработчик считает, что этот участок нужно выделить логически.

Какие в HTML5 появились новые элементы семантической разметки?

Большинство современных сайтов, в том числе тех, которые делаются в онлайн-конструкторах, содержат подобный код: <div id = «nav»>, <div id = «footer»>, <div class = «header»>. Это указание расположения навигации сайта, заголовка («шапки») и нижнего колонтитула («подвала»). Однако теперь у пятой версии HTML есть новая спецификация. Многие разработчики называют подобную разметку «дивным синдромом», так как она содержит просто неприличное количество тегов div, что затрудняет чтение кода. А как известно, чем труднее читать код, тем сложнее его исправить.

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

  • <article> (статья);
  • <aside> (боковая часть);
  • <details> (подробности);
  • <figcaption> (alt картинки);
  • <figure> (картинка);
  • <footer> ( подвал);
  • <header> (шапка);
  • <main> (основная часть страницы);
  • <mark> (отметка);
  • <nav> (панель навигации);
  • <section> (раздел);
  • <summary> (выводы);
  • <time> (время).

До того, как появился стандарт пятой версии HTML, главным инструментом разметки был тег <div>, присваивающий классы и id, чтобы сделать код разметки более простым для прочтения (к примеру , <div id=»footer»>). Таким способом в HTML-странице помечали шапку и подвал (нижний и верхний колонтитул), панели, находящиеся сбоку, панель навигации и все остальные части документа.

Сейчас же в HTML присутствуют новые элементы для семантической разметки, позволяющие структурировать, группировать содержимое, и размечать текст статей. Теги, приведенные выше, дали возможность сделать структуру документа более понятной, избавив от необходимости постоянно вставлять тег div (div id=» article «> превратилось просто в < article >), логически разделяя содержание HTML-страницы. Как эти элементы будут выглядеть внешне – дело разработчиков и дизайнеров. Правил тут нет никаких. Есть только глобальные переменные:

  • мета-контент;
  • потоковый контент;
  • секционный контент;
  • заголовочный контент;
  • контент в виде текста;
  • встроенный контент;
  • интерактивный контент.

Глобальные переменные – атрибуты, которые доступны всем элементам кода. Использовать их могут все элементы, но не все на них влияют.

Элементы семантической размети на основе спецификации HTML5

Тег <hader>

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

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

<head>
  <meta charset="utf-8">
  <title>Семантические элементы html</title>
</head>
<body>
  <header>Верхний колонтитул и логотип</header>
  <main>Контент</main>
  <footer>Нижний колонтитул</footer>
</body>
Применение тега heater в верхнем колонтитуле

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

<head>
  <meta charset="utf-8">
  <title>Семантические элементы html</title>
</head>
<body>
  <article>
    <header>
      <h1>Семантические элементы HTML5</h1>
      <p>Семантическая разметка страниц сайта</p>
    </header>
    <p>Кроме логической структуры страниц сайта в спецификациях пятой версии HTML присутствует семантическая разметка.
    </p>
  </article>
</body>
Логическое выделение заголовка с помощью header

Однако существуют элементы, внутри которых данный тег располагаться не может: <adress>, другой тег <header> и <footer>.

Тег <section>

Этот элемент позволяет обозначить раздел в веб-странице. Как указано в справочнике W3C по пятой версии HTML: «Раздел – это содержимое, сгруппированное по определенному признаку, и в большинстве случаев помечается заголовком». Относится к категориям потокового и секционного контента.

Данный тег является универсальной частью HTML-страницы. Он собирает контент в группы, и часто в нем находится тег header. При этом section не оборачивает данные – для этого более подходит уже упомянутый div. Что может быть его содержимым? Оглавление, разделы статей, или список каких-то событий. Главная страница веб-сайта тоже может делиться на секции – вводная информация, которую новый посетитель должен обязательно прочесть, новости и контактная информация. Тег <section> специалисты советуют использовать только тогда, когда контент, находящийся в нем явно прописан в схеме страницы.

Пример: Ниже приведены две секции, содержащие header. В каждой из них – какое-то высказывание.

<body>
  <section>
    <h1>Семантические элементы HTML-страницы и их разновидности</h1>
    <p>Кроме логической структуры в спецификациях HTML5 присутствует семантическая разметка.</p>
    <p>Семантический элемент жестко обозначает свою функцию браузеру и создателю сайта.</p>
  </section>
  <section>
    <h1>Какие в HTML5 появились новые элементы семантической разметки?</h1>
    <p>Большинство современных сайтов содержат подобный код.</p>
    <p>Однако теперь у пятой версии HTML есть новая спецификация.</p>
  </section>
</body>
Разделение контента тегом section на две секции

Пример: у статьи (тег article) есть header. Также она разделена на две секции. У обоих тоже имеется подзаголовки и текст.

<body>
  <article>
    <h1>Стихотворения</h1>
    <section>
      <h2>Стих 1</h2>
      <p>Первая строка<br>
        Вторая строка<br>
        Третья строка<br>
        Четвертая строка</p>
    </section>
    <section>
      <h2>Стих 2</h2>
      <p>1-я строчка<br>
        2-я строчка<br>
        3-я строчка<br>
        4-я строчка</p>
    </section>
  </article>
</body>
Разделение на секции с помощью тега section

Как наверняка догадался наблюдательный читатель, при создании данной страницы не использовался заглавный тег head. Это потому, что в спецификациях пятой версии HTML они не обязательны. Однако тег title прописывать нужно всегда – это название документа, которое пользователь увидит на вкладке. Кстати, чтобы текст отображался правильно, желательно указывать его язык и кодировку utf-8.

Тег <article>

Этот элемент имеет автономное содержимое. Статья (англ. article) будет осмысленна, даже если ее перенести на другой сайт, поэтому она не зависит от других элементов веб-страницы. Относится к категориям: потоковый контент, секционный контент.

Этот тег используют для того, чтобы группировать основные записи: публикации блога, комментарии и статьи. <article> – независимый блок, который можно использовать много раз. Он может быть перенесен на другой сайт и вмещать в себя другие такие же теги, схожие по содержанию с основной статьей. В том случае, когда в документе имеется всего одна статья с заглавием и каким-то текстом, ее можно не оборачивать в тег <article>. Его лучше использовать лишь тогда, когда его контент указан в схеме веб-страницы:

  • пост на форуме;
  • публикация в блоге;
  • статья в журнале.

Пример: контент в теге <article> представлен заголовком и двумя параграфами.

<title>Семантические элементы html</title>
<body>
  <article>
    <h1>Семантические элементы HTML5</h1>
    <p>Семантический элемент жестко обозначает свою функцию браузеру и создателю сайта. К несемантическим элементам можно отнести теги div или span – из них не ясно, что находится внутри. А вот теги form (форма), article(статья) или table (таблица) уже относятся к семантическим элементам, так как явно дают понять, каким должно быть их содержание.       
    </p>
    <p> До того, как появился стандарт пятой версии HTML, главным инструментом разметки был тег div, присваивающий классы и id, чтобы сделать код разметки более простым для прочтения (к примеру , div id="footer"). Таким способом в HTML-странице помечали шапку и подвал (нижний и верхний колонтитул), панели, находящиеся сбоку, панель навигации и все остальные части документа.
    </p>
  </article>
</body>
Контент в article: заголовок с двумя параграфами

Пример: у статьи может быть свои header и footer. Заголовок часто обернут тегом шрифта (h2), а подвал содердит комментарии или дополнительные ссылки.

<title>Семантические элементы html</title>
<body>
  <article>
    <header>
      <h2>Семантические элементы HTML-страницы и их разновидности</h2>
    </header>
    <p>Семантический элемент жестко обозначает свою функцию браузеру и создателю сайта. К несемантическим элементам можно отнести теги div или span. А вот теги form, article или table уже относятся к семантическим элементам.
    </p>
    <footer>
      Опубликовано в разделе <a href="#">HTML</a><br>
      <a href="#">9 комментариев</a>
    </footer>
  </article>
</body>
Вложение тега heater в теге article

Теги <article> и <section> вложенные друг в друга

В article помещают автономное содержимое, а section разделяет веб-страницу на смысловые участки. Также они могут быть вложены один в другой. В сети можно найти много HTML-документов с примерами подобных вложений: спортивная газета может в каждой статье делать раздел с технической информацией. Есть примеры использования section, в которых вложены статьи, в которых вложены еще одни элементы article. Разработчик не обязан размечать документ именно так, но у него есть возможность это сделать. Например, основное содержимое страницы – статьи, распределенные по разным рубрикам, согласно их теме. Чтобы это подчеркнуть, каждая статья в рубрике оборачивается в отдельный section:

<title>Заголовок документа</title>
<body>
  <section>
    <h2>Первый раздел</h2>
    <article>
      <h3>Первая статья</h3>
      <p>Текст первой статьи.</p>
    </article>
    <article>
      <h3>Вторая статья</h3>
      <p>Текст второй статьи</p>
    </article>
  </section>
  <section>
    <h2>Второй раздел</h2>
    <article>
      <h3>Третья статья</h3>
      <p>Текст третьей статьи</p>
    </article>
    <article>
      <h3>Четвертая статья</h3>
      <p>текст четвертой статьи</p>
    </article>
  </section>
</body>
Расположение контента с помощью тега article с вложением в  тег section

Тег <nav>

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

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

Пример: поисковая навигация.

<h3>Меню</h3>
<nav>
  <ul>
    <li><a href="#">Первая страница</a></li>
    <li><a href="#"> Вторая страница </a></li>
    <li><a href="#">Третья страница</a></li>
  </ul>
</nav>
Навгация по заданным разделам

Пример: навигационный блок, представленный простыми ссылками, а не списком. Если нужно, заголовок может находиться внутри nav.

<nav>
  <h3>Навигация</h3>
  <a href="/html/">Первый</a> |
  <a href="/css/">Второй</a> |
  <a href="/js/">Третий</a> |
  <a href="/jquery/">Четвертый</a>
</nav>
Блок навигации с заголовком в виде ссылок

Тег <footer>

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

Каждая страница может иметь несколько подвалов, например, если у article-а есть отдельный footer. Также нижний колонтитул бывает у цитаты – тогда в нем указывается источник.

Пример: подвал html-документа.

<body>
  <header>Шапка</header>
  <article>Содержание (статья)</article>
  <footer>
    Владелец авторских прав
    <a href="почта"> связаться </a>
  </footer>
</body>
Расположение тега footer в html документе

Пример: подвал статьи

<body>
  <header>Шапка</header>
  <article>
    <h3>Заголовок статьи</h3>
    <p>Статья
    <p>
    <footer>
      автор<br>
      Отзывы
    </footer>
  </article><br>
  <footer>Подвал сайта</footer>
</body>
Наполнение тега footer

Тег <aside>

Бывает, что разработчик вносит данные, которые дополняют основной материал страницы. Такие сноски оборачиваются элементом <aside>. Относится к категориям: потоковый контент, секционный контент.

Aside собирает контент в группы, которое прямо относится к окружающему содержимому. Проще говоря – это сноска. Обычно aside является боковой колонкой и содержит дополнительные элементы: рекламу, навигацию и т.д. Однако nav в aside не оборачивается:

<section>
  <article>
    <header>
      <h2>Цитаты</h2>
    </header>
    <aside>
      <p> <i>Первая.</i><br>(Автор)</p>
    </aside>
    <p>Вторая</p>
    <p>Третья</p>
    <footer>
      <p><a href="comments"><i>Комментарии</i></a>...</p>
    </footer>
  </article>
</section>
Расположение в коде тега aside

Этот тег можно расположить в любом месте относительно главного контента. Для этого используют CSS.

Теги <figure> и <figcaption>

Эти элементы относятся к категориям потокового контента и корневого секционного контента.

Тег <figure> – независимое содержимое, которое может не иметь заголовка, самостоятельная часть главного потока. Этот элемент можно перемещать из статьи в сноски или приложения, не нарушая поток страницы. Figure используют для добавления описания к графическим объектам.

Пример: подпись картинки.

<figure>
  <img src="../img/nature.jpg" alt="Описание" width="480" height="240">
  <figcaption>Расширенное описание</figcaption>
</figure>
Применение тега figcaption если недостаточно alt в figure

Figure – блочный элемент, растягивающийся на ширину контейнера, но учитывает отступы margin.

Тег <figcaption> – потомок figure, но не относится к какой-либо категории содержимого. У него такая же ширина, как и у родительского элемента, а стандартная высота – 18 пикселей.

Тег <img> задает образ, а <figcaption> – подпись. В результате получается подписанное изображение.

Тег <main>

Это основное содержимое страницы, которое должно быть уникальным и не повторяться в других местах интернет-рессурса, кроме тех случаев, когда форма поиска – основной контент. Main нельзя ни во что оборачивать. Относится к категории потокового контента.

<body>
  <header>
    <h3>Шапка</h3>
  </header>
  <section>
    <nav>Меню</nav>
  </section>
  <main>
    <h2>Контент</h2>
    <article>Статья</article>
  </main>
  <footer>Подвал </footer>
</body>
Уникальное содержимое ресурса расположенное с помощью тега main

Тег <adress>

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

Пример: стандартные параметры отображения.

address {display: block;
font-style: oblique;}
<body>
  <article>
    <h3>Название</h3>
    <p>Статья</p>
    <address>Автор</address>
  </article>
</body>
<address>
  Создатель <a href="mailto:domhtml@example.com"> Autor</a>.<br>
  Контактная информация:<br>
  https://domhtml.ru/<br>
  Абонетский ящик 9876543,<br>
  Мир<br>
</address>
Данные, располагаемые в теге adress

Важно!

  • не оборачивает почтовый адрес, если это не контактная информация;
  • address принято оборачивать в footer;
  • поддерживает глобальные переменные HTML;
  • поддерживает переменные событий.

Тег <time>

Задает время и дату по григорианскому календарю в заданном часовом поясе. Относится к категориям потокового и текстового контента. Браузер никак не оформляет текст в этом элементе. Можно задать значение переменной datetime, чтобы показать посетителю определенное время и дату:

<p>Новый год<time datetime="2021-01-1 00:00"> 1 января - праздник</time>.</p>
Как задаются параметры для тега time

Этот тег не показывает ничего, кроме указанной даты. Также time может координировать даты и время машиносчитаваемым методом, чтобы user-агенты предлагали добавить напоминание о важной дате в календарь, и для оптимизации поисковиков. Элемент поддерживают все браузеры.

Тег <mark>

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

<p>Бонус(англ. <mark>Bonus</mark>) — премия за покупку товара, заключающаяся в раздаче денег</p>
Выделение фрагментов контента при помощи тега mark

Этот элемент также поддерживается всеми браузерами.

Теги <details> и <summary>

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

Details поддерживает глобальные переменные и переменные событий, однако поддерживается не всеми браузерами. Чтобы указать видимый заголовок details применяется тег <sumary>, при нажатии на который он открывается.

Sumary нужно ставить вначале details. Он также поддерживает глобальные переменные и переменные событий.

<article>
  <h5>Шапка</h5>
  <p>Текст</p>
  <details>
    <summary>Заголовок виджета</summary>
    текст виджета
  </details>
</article>
Расположение тега summary для дополнительной информации в details

Проверка валидности HTML-документов. Валидаторы

После написания кода нужно проверить валидность на основе спецификаций пятой версии HTML. Валидность – соответствие кода правилам, созданным Консорциумом Всемирной Паутины или W3C. Есть много методов найти ошибку. Их делят на онлайновые и локальные. Первый проверяет сервер в интернете, а второй – компьютер разработчика.

https://validator.w3.org/ — самый популярный сервис проверки валидности: проверяют по адресу, локальному файлу и код, который ввели в форму.

Проверка по ссылке: подходит для опубликованных сайтов. Требуется ввести адрес страницы в специальное поле и нажать Check. Система выдаст ответ, содержит ли страница ошибки. Если ошибки найдены, то разработчик получит их список с указанием строк.

Проверка файлов: если страница сайта еще не опубликована, то можно загрузить в валидатор файл страницы по кнопке «Validate by File Upload».

Форма ввода исходного кода: если код еще вообще не написан, то его можно проверить, набрав в соответствующее поле.

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

Почему семантическая разметка необходима

В HTML четвертой версии создатели сайтов вводили собственные имена, чтобы код был нагляднее, но это мешало поисковым алгоритмам определять правильное содержимое веб-страницы. В пятой версии появились стандартизированные теги(<header> <footer> <nav> <section> <article>), которые знают в том числе и поисковики.

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

1 комментарий к “Семантические элементы HTML5”

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *