Семантические элементы HTML
Семантические элементы = элементы со значением.
Что такое семантические элементы?
Семантический элемент четко описывает свое значение как для браузера, так и для разработчика.
Примеры несмысловых элементов: <div>и <span>- ничего не говорит о своем содержании.
Примеры смысловых элементов: <form>, <table>, и <article>- Четко определяет его содержание.
Семантические элементы в HTML
Многие веб-сайты содержат HTML-код, например: <div id="nav"> <div class="header"> <div id="footer"> для обозначения навигации, верхнего и нижнего колонтитула.
В HTML есть несколько семантических элементов, которые можно использовать для определения различных частей веб-страницы:
- <статья>
- <в сторону>
- <детали>
- <figcaption>
- <рисунок>
- <нижний колонтитул>
- <заголовок>
- <основной>
- <отметка>
- <навигация>
- <раздел>
- <резюме>
- <время>
HTML-элемент <section>
Элемент <section>определяет раздел в документе.
Согласно HTML-документации W3C: «Раздел представляет собой тематическую группу контента, обычно с заголовком».
Примеры использования <section>элемента:
- Главы
- Введение
- Новостные предметы
- Контакты
Веб-страница обычно может быть разделена на разделы для введения, содержания и контактной информации.
Пример
Два раздела в документе:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
HTML-элемент <article>
Элемент <article>определяет независимое, автономное содержимое.
Статья должна иметь смысл сама по себе, и ее должна быть возможность распространять независимо от остальной части веб-сайта.
Примеры использования <article>элемента:
- Сообщения на форуме
- Сообщения в блоге
- Комментарии пользователей
- Карточки товаров
- Газетные статьи
Пример
Три статьи с независимым самостоятельным содержанием:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Пример 2
Используйте 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 is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Вложение <article> в <section> или наоборот?
Элемент <article>
определяет независимое, автономное содержимое.
Элемент <section>определяет раздел в документе.
Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет мы не можем!
Итак, вы найдете HTML-страницы с <section>элементами, содержащими <article>элементы, и <article>элементы, содержащие <section>элементы.
HTML-элемент <header>
Элемент <header>представляет собой контейнер для вводного контента или набор навигационных ссылок.
Элемент <header>обычно содержит:
- один или несколько элементов заголовка (<h1> - <h6>)
- логотип или значок
- информация об авторстве
Примечание. В одном HTML-документе может быть несколько <header>элементов. Однако <header>не может быть помещен в <footer>, <address>или другой <header>элемент.
Пример
Заголовок для <article>:
<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>
HTML-элемент <footer>
Элемент <footer>определяет нижний колонтитул для документа или раздела.
Элемент <footer>обычно содержит:
- информация об авторстве
- информация об авторских правах
- контакты
- карта сайта
- вернуться к верхним ссылкам
- связанные документы
В одном документе может быть несколько <footer>элементов.
Пример
Нижний колонтитул в документе:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML-элемент <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>
HTML-элемент <aside>
Элемент <aside>определяет некоторое содержимое помимо содержимого, в котором он размещен (например, боковая панель).
Контент <aside>должен быть косвенно связан с окружающим контентом.
Пример
Отображать некоторый контент помимо контента, в котором он размещен:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</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>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
HTML-элементы <figure> и <figcaption>
Тег <figure>определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д.
Тег <figcaption>определяет заголовок для <figure>элемента. Элемент <figcaption>может быть размещен как первый или как последний дочерний <figure>элемент элемента.
Элемент <img>определяет фактическое изображение/иллюстрацию.
Пример
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Почему семантические элементы?
Согласно W3C: «Семантическая паутина позволяет обмениваться данными и повторно использовать их в приложениях, предприятиях и сообществах».
Семантические элементы в HTML
Ниже приведен список некоторых семантических элементов HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .