ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих

En Ua

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


Что такое семантика?

Семантика - это изучение значений слов и фраз в языке.

Семантические элементы = элементы со смыслом.


Что такое семантические элементы?

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

Примеры не семантических элементов: <div> и <span> - ничего не говорят о своём содержимом.

Примеры семантических элементов: <form>, <table> и <article> - чётко указывают своё содержимое.


Поддержка браузерами семантических HTML элементов

Yes Yes Yes Yes Yes

Семантические элементы HTML5 поддерживаются во всех современных браузерах.

Кроме того, вы можете "научить" старые браузеры обращаться с "неизвестными элементами".

Узнайте об этом больше в разделе HTML5 Поддержка браузерами на нашем сайте W3Schools на русском.


Новые семантические элементы в HTML5

Многие веб-сайты содержат HTML-код, например: <div id="nav">, <div class="header">, <div id="footer">, что определяет навигацию, верхний и нижний колонтитулы.

HTML5 предлагает новые семантические элементы для определения различных частей веб-страницы:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 Семантические элементы


HTML5 элемент <section> - секция

Элемент <section> определяет раздел в документе.

Согласно документации W3C по HTML5: "Раздел - это тематическая группировка контента, обычно с заголовком."

Домашнюю страницу обычно можно разделить на разделы для ознакомления, содержания и контактной информации.

Пример

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Попробуйте сами »

HTML5 элемент <article> - статья

Элемент <article> определяет независимый, автономный контент.

Статья должна иметь смысл сама по себе, и должна быть возможность читать ее независимо от остальной части сайта.

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

  • Сообщение на форуме
  • Публикация в блоге
  • Газетная статья

Пример

<article>
  <h2>Чем занимается WWF?</h2>
  <p>Миссия WWF - остановить деградацию природной среды нашей планеты,
и построить будущее, в котором люди будут жить в гармонии с природой.</p>
</article>
Попробуйте сами »

Пример

Три статьи с независимым, автономным содержанием:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome - это веб-браузер, разработанный Google, выпущенный в 2008 году. Chrome - самый популярный веб-браузер на сегодняшний день!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox - это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox был вторым по популярности веб-браузером с января 2018 года.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge - это веб-браузер, разработанный Microsoft, выпущенный в 2015 году. Microsoft Edge заменил Internet Explorer.</p>
</article>
Попробуйте сами »

Пример

Используйте CSS для стилизации элемента <article>:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome - это веб-браузер, разработанный Google, выпущенный в 2008 году. Chrome - самый популярный веб-браузер на сегодняшний день!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox - это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox был вторым по популярности веб-браузером с января 2018 года.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge - это веб-браузер, разработанный Microsoft, выпущенный в 2015 году. Microsoft Edge заменил Internet Explorer.</p>
  </article>
</article>

</body>
</html>
Попробуйте сами »

Влаживать <article> в <section> или наоборот?

Элемент<article>определяет независимое, автономное содержание.

Элемент <section> определяет раздел в документе.

Можем ли мы использовать определение, чтобы решить, как вставить эти элементы? Нет, мы не можем!

Итак, в Интернете вы найдете HTML-страницы с элементами <section> которые содержат элементы <article> и элементы <article>, которые содержат элементы <section>.

Вы также найдёте страницы с элементами <section>, которые содержат элементы <section> и элементы <article>, которые содержат элементы <article>.

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


HTML5 элемент <header> - заголовок

Элемент <header> представляет собой контейнер для вводного контента или набора навигационных ссылок.

Элемент <header> обычно содержит:

  • один или несколько элементов заголовка (<h1> - <h6>)
  • лого или иконку
  • информацию об авторстве

Примечание: В одном HTML-документе может быть несколько элементов <header> Однако <header> нельзя поместить в <footer>, <address> или другой элемент <header>.

Следующий пример определяет заголовок статьи:

Пример

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
Попробуйте сами »

HTML5 Элемент <footer> - нижний колонтитул

Элемент <footer> определяет нижний колонтитул для документа или раздела.

Элемент <footer> должен содержать информацию о его содержащем элементе.

Элемент <footer> обычно содержит:

  • информация об авторстве
  • информация об авторских правах
  • контактная информация
  • карта сайта
  • ссылка возврата вверх
  • связанные документы

Может быть несколько элементов <footer> в одном документе.

Пример

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
Попробуйте сами »

HTML5 элемент <nav> - навигация

Элемент <nav> определяет набор навигационных ссылок.

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

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

Пример

Набор навигационных ссылок:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
Попробуйте сами »

HTML5 элемент <aside> - в стороне

Элемент <aside> определяет некоторый контент помимо контента, в который он помещен (например, боковая панель).

Контент <aside> должен быть связан с окружающим контентом.

Пример

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Попробуйте сами »

Пример 2

Используйте CSS для стилизации элемента <aside>:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>Этим летом мы с семьей посетили центр Epcot. Погода была хорошей, и Epcot был восхитителен! Я отлично провел лето вместе с семьей!</p>

<aside>
<p>Центр Epcot - это тематический парк на территории Walt Disney World Resort с захватывающими аттракционами, международными павильонами, отмеченными наградами фейерверками и сезонными специальными мероприятиями.</p>
</aside>

<p>Этим летом мы с семьей посетили центр Epcot. Погода была хорошей, и Epcot был восхитителен! Я отлично провела лето вместе с семьей!</p>
<p>Этим летом мы с семьей посетили центр Epcot. Погода была хорошей, и Epcot был восхитителен! Я отлично провела лето вместе с семьей!</p>

</body>
</html>
Попробуйте сами »

HTML5 элементы <figure> и <figcaption> - рисунок и подпись

Назначение подписи к рисунку - добавить визуальное объяснение к изображению.

В HTML5 рисунок и подпись к нему могут быть сгруппированы в элемент <figure>:

Пример

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Попробуйте сами »

Элемент <img> определяет изображение, элемент <figcaption> определяет подпись к нему.


Зачем нужны семантические элементы?

В HTML4 разработчики использовали свои собственные имена идентификаторов/классов для оформления элементов: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav и т.д.

Это сделало невозможным для поисковых систем определить правильное содержание веб-страницы.

С новыми HTML5 элементами (<header> <footer> <nav> <section> <article>) это стало легче.

Согласно W3C, семантический Web: "позволяет совместно использовать данные в приложениях, предприятиях и сообществах."


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

Ниже приведен алфавитный список некоторых семантических элементов в HTML5.

Ссылки ведут на полный HTML5 Справочник на нашем сайте W3Schools на русском.

Тег Описание
<article> Определяет статью
<aside> Определяет содержание, кроме содержания страницы
<details> Определяет дополнительные детали, которые пользователь может просматривать или скрывать
<figcaption> Определяет подпись для элемента <figure>
<figure> Определяет автономное содержание, например, иллюстрации, диаграммы, фотографии, списки кодов и т.д.
<footer> Определяет нижний колонтитул для документа или раздела
<header> Определяет заголовок для документа или раздела
<main> Определяет основное содержание документа
<mark> Определяет помеченный / выделенный текст
<nav> Определяет навигационные ссылки
<section> Определяет раздел в документе
<summary> Определяет видимый заголовок для элемента <details>
<time> Определяет дату/время