Семантические элементы в HTML5
Семантические элементы чётко определяют своё назначение на странице, упрощая понимание разметки как для браузера, так и для разработчиков.
Семантические элементы — одно из наиболее значимых нововведений HTML5. В предыдущих версиях HTML для структурирования веб-страницы использовался универсальный тег <div> с атрибутом id или class. Например, для определения боковых панелей, подвалов, меню и других структурных блоков применялся тег <div> с соответствующим значением (div class="footer").
Семантические элементы HTML имеют собственное значение и передают его как браузеру, так и разработчику. Они чётко определяют, какой тип контента содержат (например, тег <footer> используется вместо <div id="footer">). Они также улучшают доступность и упрощают понимание разметки поисковыми системами.
На этой странице рассматриваются структурные (компоновочные) семантические элементы, которые используются для построения скелета практически любой веб-страницы: <header>, <nav>, <main>, <article>, <section>, <aside> и <footer>, а также несколько семантических тегов уровня контента. Здесь также показано, как эти элементы соотносятся с ориентирами ARIA — именно в этом и заключается их главное значение для доступности.
Давайте рассмотрим семантические элементы и их значение.
Полный семантический макет страницы
Прежде чем рассматривать каждый элемент отдельно, полезно понять, как они сочетаются друг с другом. Структурные элементы вложены предсказуемым образом: <header> и <footer> обрамляют страницу, единственный <main> содержит основной контент, а внутри него <article> может располагаться рядом со связанным <aside>. Навигация размещается в <nav>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic page layout</title>
</head>
<body>
<header>
<h1>The Daily Markup</h1>
<nav>
<a href="/">Home</a> |
<a href="/articles">Articles</a> |
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic elements describe the role of the content they wrap,
which helps browsers, search engines and assistive technology.</p>
</article>
<aside>
<h2>Related reading</h2>
<ul>
<li><a href="/articles/headings">Heading structure</a></li>
<li><a href="/articles/landmarks">ARIA landmarks</a></li>
</ul>
</aside>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Остальная часть этой страницы объясняет каждый элемент по отдельности.
Семантические элементы и ориентиры ARIA
Главное практическое преимущество структурных семантических элементов — доступность. Пользователи программ чтения с экрана не прокручивают страницу сверху вниз — они перемещаются между ориентирами. Многие структурные элементы автоматически предоставляют неявную роль ориентира ARIA, поэтому вы получаете это бесплатно, просто используя правильный тег (атрибут role не нужен):
| Элемент | Неявная роль ориентира | Примечания |
|---|---|---|
<header> (прямой потомок <body>) | banner | Общий заголовок сайта. <header> внутри <article>/<section> не является ориентиром. |
<nav> | navigation | Помечайте несколько навигационных блоков с помощью aria-label, чтобы их можно было различить. |
<main> | main | Используйте только один на странице. |
<aside> | complementary | Контент, связанный с основным, но отделяемый от него. |
<footer> (прямой потомок <body>) | contentinfo | Общий подвал сайта (авторские права, контакты и т.д.). |
Именно поэтому замена <div class="header"> на <header> — это не просто более аккуратная разметка: она делает страницу доступной для навигации людям, использующим вспомогательные технологии.
Элемент <header>
Элемент <header> определяет заголовок документа или раздела. Как правило, он содержит логотип, строку поиска, навигационные ссылки и т.д.
Пример элемента HTML <header>
Пример заголовка страницы HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr />
</header>
<article>
<header>
<h2>Title of the document</h2>
<p>The content of the paragraph.</p>
</header>
</article>
</body>
</html>Элемент <nav>
Элемент <nav> определяет блок навигационных ссылок — как в пределах текущего документа, так и на другие документы. Обратите внимание, что не все ссылки в HTML-документе могут быть помещены внутрь элемента <nav>; он предназначен только для основных блоков навигации. Например, тег <nav> можно также разместить в теге <footer> для определения ссылок в подвале сайта.
Пример элемента HTML <nav>
Пример элемента nav на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>Элемент <article>
Элемент <article> используется для обозначения независимого самодостаточного контента (статьи, публикации в блоге, комментарии и т.д.). Содержимое элемента имеет собственный смысл и легко отличается от остального контента веб-страницы.
Пример элемента HTML <article>
Пример элемента article на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>Элемент <section>
Элемент <section> используется для группировки самостоятельных разделов веб-страницы, содержащих логически связанный контент (блок новостей, контактная информация и т.д.).
Пример элемента HTML <section>
Пример элемента section на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h1>Hypertext markup language HTML</h1>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h1>CSS</h1>
<p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html><section> vs <article>
Эти два элемента легко перепутать. Простое правило:
- Используйте
<article>, когда контент самодостаточен и может распространяться независимо — он сохраняет смысл сам по себе, вне контекста (публикация в блоге, новостная статья, карточка товара, отдельный комментарий пользователя). Если можно представить, что он попадёт в RSS-ленту, это<article>. - Используйте
<section>для тематической группировки связанного контента, который является частью чего-то большего и сам по себе не имеет смысла.<section>почти всегда должен начинаться с заголовка (<h2>–<h6>), называющего группу.
Когда ни то, ни другое не подходит — нужна лишь обёртка для стилей или компоновки без семантического значения — используйте обычный <div>.
Элемент <aside>
Элемент <aside> определяет раздел с дополнительной информацией, связанной с контентом, расположенным рядом с элементом <aside>. Как правило, он используется для дополнения статьи дополнительными сведениями или выделения частей, которые могут быть интересны пользователю.
Пример элемента HTML <aside>
Пример элемента aside на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Элемент <footer>
Элемент <footer> определяет подвал веб-страницы или раздела. Как правило, он содержит информацию об авторских правах, контактные данные, навигационные ссылки и т.д.
Пример элемента HTML <footer>
Пример элемента footer на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
main {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<header>Header / Menu</header>
<main>
<h1>Main content</h1>
<p>This is some paragraph. </p>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Элемент <address>
Элемент <address> предоставляет контактную информацию для ближайшего предка <article> или для всего документа, когда является дочерним элементом <body>. Он предназначен для контактных данных (автора или владельца статьи или сайта), а не для произвольных почтовых адресов, которые просто являются частью контента.
Пример элемента HTML <address>
Пример элемента address на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs Team<br />
<a href="mailto:[email protected]">Send Mail to the Author</a>
</address>
</body>
</html>Demo: Send Mail to the Author
Элемент <main>
Элемент <main> определяет основной контент страницы. Содержимое тега <main> должно быть уникальным и не дублировать блоки одного типа, повторяющиеся в других документах, — такие как заголовок сайта, подвал, меню, поиск, информация об авторских правах и т.д.
Пример элемента HTML <main>
Пример элемента main на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.</p>
<article>
<h2>HTML</h2>
<p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS is a language of styles, defining the display of HTML documents. </p>
<p>... </p>
</article>
</main>
</body>
</html>Элемент <figure>
Элемент <figure> используется для обозначения самодостаточного контента. Тег может включать изображения, диаграммы, иллюстрации, примеры кода и т.д.
Пример элемента HTML <figure>
Пример элемента figure на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>Элемент <figcaption>
Элемент <figcaption> используется для добавления подписи или аннотации к тегу <figure>.
Пример элемента HTML <figcaption>
Пример элемента figcaption на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Семантические элементы уровня контента
Описанные выше элементы определяют структуру страницы. Следующие теги добавляют смысл на уровне текста — они выделяют небольшие фрагменты контента внутри абзаца, а не задают компоновку страницы. Они не являются ориентирами и не влияют на структуру страницы.
Элемент <time>
Элемент <time> определяет время в понятном для человека формате по 24-часовому циклу или точную дату по григорианскому календарю.
Пример элемента HTML <time>
Пример элемента time на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>Элемент <mark>
Элемент <mark> используется для выделения части текста, имеющей отношение к текущему контексту. Он может применяться для подчёркивания важности текста, выделения поисковых запросов в результатах поиска для обеспечения контекста или обозначения нового контента, добавленного пользователем, путём его визуального выделения.
Пример элемента HTML <mark>
Пример элемента mark на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Элемент <bdi>
Элемент <bdi> используется для изоляции двунаправленного текста, когда язык с направлением письма справа налево, например арабский или иврит, встречается в строке с языками с направлением слева направо.
Пример элемента HTML <bdi>
Пример элемента bdi на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>Элемент <wbr>
Тег <wbr> используется для указания браузеру места, где при необходимости можно сделать перенос строки в тексте. В отличие от тега <br>, который обязывает браузер вставить перенос строки, в случае <wbr> браузер сначала анализирует содержимое, а затем вставляет перенос строки при необходимости (слишком длинное слово или URL-адрес).
Пример элемента HTML <wbr>
Пример элемента wbr на странице|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>