HTML5 Семантика
Семантика - это изучение значений слов и фраз на языке HTML.
Семантические элементы = элементы со смыслом.
Что такое семантические элементы?
Семантический элемент четко описывает его значение как для браузера, так и для разработчика.
Примеры несемантических элементов: <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 - это тематическая группа контента, обычно с заголовком."
Домашняя страница обычно разделяется на разделы для введения, содержания и контактной информации.
HTML5 <article>
Элемент <article> задает независимое, автономное содержимое.
Статья должна иметь смысл сама по себе и ее можно читать независимо от остальной части веб-сайта.
Примеры того, где можно использовать элемент <article>:
- Сообщения форумов
- Блог
- Газетная статья
Пример
<article>
<h1>Что делает WWF?</h1>
<p>Миссия WWF - остановить деградацию естественной среды нашей планеты,
построить будущее, в котором люди заживут в гармонии с природой.</p>
</article>
Попробуйте сами »
Вложить <article> в <section> или наоборот?
Элемент <article> задает независимое, автономное содержимое.
Элемент <section> определяет раздел в документе.
Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет, мы не можем!
Итак, в интернете вы найдете страницы HTML с элементами <section> содержащих <article> elements и элементами <article> содержащих элемент <section> .
Вы также найдете страницы с элементами <section> содержащих элемент <section>, и элемент <article> содержащий элементы <article>.
Пример для газеты: Спорт <article> в спорте section, может иметь техническое section в каждом <article>.
HTML5 <header>
Элемент <header> задает заголовок документа или раздела.
Элемент <header> должен использоваться в качестве контейнера для вводного содержимого.
Можно использовать несколько элементов <header> в одном документе.
В следующем примере определяется заголовок статьи:
Пример
<article>
<header>
<h1>Что делает WWF?</h1>
<p>Миссия WWF:</p>
</header>
<p>Миссия WWF - остановить деградацию естественной среды нашей планеты ,
постройть будущее, в котором люди будут жить в гармонии с природой.</p>
</article>
Попробуйте сами »
HTML5 <footer>
Элемент <footer> задает нижний колонтитул для документа или раздела.
Элемент <footer> должен содержать информацию о содержащем его элементе.
Нижний колонтитул обычно содержит автор документа, информацию об авторских правах, ссылки на правила пользования, контактная информация и т. д.
Можно использовать несколько элементов <footer> в одном документе.
Пример
<footer>
<p>Автор: Щипунов Андрей</p>
<p>Контактная информация: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
Попробуйте сами »
HTML5 <nav> /h2>
Элемент <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 из контента, в который он помещен (например, боковая панель).
Содержимое <aside> должно быть связано с окружающим контентом.
Пример
<p>Моя семья, посетили центр Epcot этим летом.</p>
<aside>
<h4>Центр Epcot</h4>
<p>Epcot - это тематический парк в Диснейуорлде, штат Флорида.</p>
</aside>
Попробуйте сами »
HTML5 <figure> и<figcaption>
Цель подписи к рисунку - добавить визуальное объяснение к изображению.
В HTML5 изображение и заголовок можно сгруппировать в элементе <figure>:
Пример
<figure>
<img src="pic_mountain.jpg" alt="Пульпит Рок" width="304" height="228">
<figcaption>Рис. 1. - Прекестулен, Норвегия.</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, семантический веб: "Позволяет совместно и повторно использовать данные между приложениями, предприятиями и сообществами."
Семантические элементы в HTML5
Ниже приведен алфавитный список новых семантических элементов в HTML5.
Ссылка к нашему полному Справочнику HTML5.
| Тег | Описание |
|---|---|
| <article> | Определение статьи |
| <aside> | Определяет содержимое aside из содержимого страницы |
| <details> | Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть |
| <figcaption> | Определяет заголовок для элемента <figure> |
| <figure> | Указывает автономный контент, например иллюстрации, диаграммы, фотографии, списки кодов и т. д. |
| <footer> | Определяет нижний колонтитул для документа или раздела |
| <header> | Задает заголовок для документа или раздела |
| <main> | Определяет основное содержание документа |
| <mark> | Определяет маркированный / выделенный текст |
| <nav> | Определяет ссылки навигации |
| <section> | Определяет раздел в документе |
| <summary> | Определяет видимый заголовок элемента <details> |
| <time> | Определяет дату/время |