HTML5 Семантические элементы
Семантические элементы = элементи со значением (смыслом).
Что такое семантика?
Семантика - это изучение значений слов и фраз в языке.
Что такое семантические элементы?
Семантический элемент чётко описывает своё значение как для браузера, так и для разработчика.
Примеры не семантических элементов: <div> и <span> — ничего не говорят о своём содержимом.
Примеры семантических элементов: <form>, <table> и <article> — чётко указывают своё содержимое.
Поддержка браузерами семантических HTML‑элементов
| Да | Да | Да | Да | Да |
Семантические элементы 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 элемент <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>Самые популярные браузеры</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, семантическая Сеть «позволяет обмениваться и совместно использовать данные в приложениях, организациях и сообществах».
Семантические элементы также важны для поисковых систем, которые благодаря им «лучше понимают», какое содержание находится на веб‑странице.
Семантические элементы в HTML5
Ниже приведён алфавитный список некоторых семантических элементов HTML5.
Ссылки ведут на полный HTML5 справочник на нашем сайте W3Schools на русском.
| Тег | Описание |
|---|---|
| <article> | Определяет статью |
| <aside> | Определяет содержание, дополняющее основное содержимое страницы |
| <details> | Определяет дополнительные сведения, которые пользователь может раскрывать или скрывать |
| <figcaption> | Определяет подпись к элементу <figure> |
| <figure> | Определяет автономное содержимое, например иллюстрации, диаграммы, фотографии, фрагменты кода и т. д. |
| <footer> | Определяет нижний колонтитул документа или раздела |
| <header> | Определяет заголовок документа или раздела |
| <main> | Определяет основное содержание документа |
| <mark> | Определяет выделенный текст |
| <nav> | Определяет навигационные ссылки |
| <section> | Определяет раздел документа |
| <summary> | Определяет видимый заголовок для элемента <details> |
| <time> | Определяет дату/время |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
