HTML5 семантические элементы
Семантика — это изучение значений слов и фраз в языке.
Семантические элементы = элементы со смыслом.
Что такое семантические элементы?
Семантический элемент четко описывает его значение как для браузера, так и для разработчика.
Примеры несемантических элементов: <div> и <span> — ничего не говорит о его содержимом.
Примеры семантических элементов: <form>, <table> и <article> — четко определяет его содержание.
Поддержка браузера
Семантические элементы 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> определяет раздел в документе.
Согласно документации W3C по HTML5: «Раздел — это тематическая группировка контента, обычно с заголовком».
Домашнюю страницу обычно можно разделить на разделы для введения, содержания и контактной информации.
Элемент HTML5 <article>
Элемент <article> определяет независимое, автономное содержимое.
Статья должна иметь смысл сама по себе, и должна быть возможность читать ее независимо от остальной части веб-сайта.
Примеры использования элемента <article>:
- Пост форума
- Сообщение блога
- Газетная статья
Вложение <article> в <section> или наоборот?
Элемент <article> определяет независимое, автономное содержимое.
Элемент <section> определяет раздел в документе.
Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет мы не можем!
Итак, в Интернете вы найдете HTML-страницы с элементами <section>, содержащими элементы <article>, и элементами <article>, содержащими элементы <section>.
Вы также найдете страницы с элементами <section>, содержащими элементы <section>, и элементами <article>, содержащими элементы <article>.
Пример для газеты: Спорт <article> в разделе спорта может содержать технический раздел в каждой <article>.
Элемент HTML5 <header>
Элемент <header> определяет заголовок для документа или раздела.
Элемент <header> должен использоваться в качестве контейнера для вводного содержимого.
Вы можете иметь несколько элементов <header> в одном документе.
В следующем примере определяется заголовок для статьи:
Элемент HTML5 <footer>
Элемент <footer> определяет нижний колонтитул для документа или раздела.
Элемент <footer> должен содержать информацию о его содержащем элементе.
Нижний колонтитул обычно содержит автора документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. д.
У вас может быть несколько элементов <footer> в одном документе.
HTML5 <nav> элемент
Элемент <nav> определяет набор навигационных ссылок.
Обратите внимание, что НЕ все ссылки документа должны быть внутри элемента <nav>. Элемент <nav> предназначен только для основного блока навигационных ссылок.
HTML5 <aside> элемент
Элемент <aside> определяет некоторый контент помимо контента, в который он помещен (например, боковая панель).
Содержание <aside> должно быть связано с окружающим контентом.
Элементы HTML5 <figure> и <figcaption>
Цель подписи к рисунку — добавить визуальное объяснение к изображению.
В HTML5 изображение и подпись могут быть сгруппированы в элемент <figure>:
Элемент <img> определяет изображение, элемент <figcaption> определяет заголовок.
Почему семантические элементы?
В HTML4 разработчики использовали свои собственные имена идентификаторов / классов для стилизации элементов: заголовок, верх, низ, нижний колонтитул, меню, навигация, основной, контейнер, контент, статья, боковая панель, topnav и т. Д.
Это сделало невозможным для поисковых систем определить правильное содержание веб-страницы.
С новыми элементами HTML5 (<header> <footer> <nav> <section> <article>) это станет проще.
Согласно W3C, Semantic Web: «Позволяет обмениваться данными и повторно использовать их в приложениях, предприятиях и сообществах».
Семантические элементы в HTML5
Ниже приведен алфавитный список новых семантических элементов в HTML5.
Тег Описание
<article> Определяет статью
<aside> Определяет содержимое помимо содержимого страницы
<details> Определяет дополнительные детали, которые пользователь может просматривать или скрывать
<figcaption> Определяет заголовок для элемента <figure>
<figure> Определяет автономное содержимое, такое как иллюстрации, диаграммы, фотографии, списки кодов и т. д.
<footer> Определяет нижний колонтитул для документа или раздела
<header> Определяет заголовок для документа или раздела
<main> Определяет основное содержание документа
<mark> Определяет отмеченный / выделенный текст
<nav> Определяет навигационные ссылки
<section> Определяет раздел в документе
<summary> Определяет видимый заголовок для элемента <details>
<time> Определяет дату / время