HTML5 Семантическиие элементы
Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих
Семантика - это изучение значений слов и фраз в языке.
Семантические элементы = элементы со значением.
Что такое семантические элементы?
Семантический элемент чётко описывает его значение как для браузера, так и для разработчика.
Например, несемантические элементы: <div> и <span> - нечого не говорят о своём содержании.
Например, семантические элементы: <form>, <table> и <article> - чётко определяют своё содержание.
Поддержка браузерами
| Да | Да | Да | Да | Да |
Семантические элементы HTML5 поддерживаются во всех современных браузерах.
Кроме того, вы можете "научить" старые браузеры обрабатывать "неизвестные элементы".
Читайте об этом в разделе HTML5 Поддержка браузерами.
Новые семантические элементы в 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> определяет раздел в документе.
В соответствие с документацией HTML5 W3C: "Раздел является тематической группировкой содержания, как правило, из заголовком."
Домашнюю страницу обычно можно разделить на разделы для представления, содержания и контактной информации.
Пример:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Попробуйте сами »
HTML5 элемент <article>
Элемент <article> определяет независимое, автономное содержание (статью).
Статья должна иметь смысл сама по себе, так, чтобы её можно было читать независимо от остального сайта.
Примеры использования элемента <article>:
- Сообщение форума
- Публикация в блоге
- Газетная статья
Пример:
<article>
<h1>What Does WWF Do?</h1>
<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>
Попробуйте сами »
Вложение <article> в <section> или наоборот?
Элемент<article>определяет независимое, автономное содержание.
Элемент <section> определяет раздел в документе.
Можем ли мы использовать определение, чтобы решить, как вставить эти элементы? Нет, мы не можем!
Итак, в Интернете вы найдете HTML-страницы с элементами <section> которые содержат элементы <article> и элементы <article>, которые содержат элементы <section>.
Вы также найдёте страницы с элементами <section>, которые содержат элементы <section> и элементы <article>, которые содержат элементы <article>.
Пример из газеты: Спортивная статья <article> в спортивном разделе section, может содержать технический раздел section в каждой статье <article>.
HTML5 элемент <header>
Элемент <header> определяет заголовок для документа или раздела.
Элемент <header> должен использоваться как контейнер для вступительного содержания.
Вы можете иметь несколько элементов <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>
<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>
Попробуйте сами »
HTML5 элементы <figure> и <figcaption>
Подпись к изображению делается для того, чтобы добавить объяснение, что на нём изображено.
В HTML5 изображения и подпись к нему можна сгруппировать в элемент <figure>:
Пример:
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Попробуйте сами »
Элемент <img> определяет изображение, элемент <figcaption> определяет подпись к изображению.
Почему семантические элементы?
Начиная с HTML4, разработчики использовали свои собственные названия id/class для стилизации элементов: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav и др.
Это значительно усложняло поисковым системам определять правильное содержание веб-страницы.
С новыми HTML5 элементами (<header> <footer> <nav> <section> <article>) это стало намного легче.
Согласно определения с W3C, Semantic Web: "Позволяет обмениваться данными и повторно использовать их в разных программах, на предприятиях и в сообществах".
Семантические элементы в HTML5
Ниже приведён алфавитный список новых семантических элементов в HTML5.
Ссылка на полный HTML5 Справочник тегов.
| Тег | Описание |
|---|---|
| <article> | Определяет статью |
| <aside> | Определяет содержание, кроме содержания страницы |
| <details> | Определяет дополнительные детали, которые пользователь может просматривать или скрывать |
| <figcaption> | Определяет подпись для элемента <figure> |
| <figure> | Определяет автономное содержание, например, иллюстрации, диаграммы, фотографии, списки кодов и т.д. |
| <footer> | Определяет нижний колонтитул для документа или раздела |
| <header> | Определяет заголовок для документа или раздела |
| <main> | Определяет основное содержание документа |
| <mark> | Определяет помеченный / выделенный текст |
| <nav> | Определяет навигационные ссылки |
| <section> | Определяет раздел в документе |
| <summary> | Определяет видимый заголовок для элемента <details> |
| <time> | Определяет дату/время |