HTML Семантика

Семантический элемент четко описывает свое значение как для браузера, так и для разработчика. Примеры несмысловых элементов: <div> и <span> - ничего не говорит о своем содержании. Примеры смысловых элементов: <form>, <table>, и <article> - Четко определяет его содержание.

Многие веб-сайты содержат HTML-код, например: <div id="nav"> <div class="header"> <div id="footer"> для обозначения навигации, верхнего и нижнего колонтитула. В HTML есть несколько семантических элементов, которые можно использовать для определения различных частей веб-страницы:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

HTML элемент <section>

Элемент <section>определяет раздел в документе. Согласно HTML-документации W3C: «Раздел представляет собой тематическую группу контента, обычно с заголовком».

Примеры использования <section> элемента:

• Для глав документов
• Для оглавление
• Для новостей
• Для контактов

Веб-страница обычно может быть разделена на разделы для введения, содержания и контактной информации.

HTML элемент <article>

Элемент <article> определяет независимое, автономное содержимое. Статья должна иметь смысл сама по себе, и ее должна быть возможность распространять независимо от остальной части веб-сайта.

Примеры использования <article> элемента:

• Сообщения на форуме
• Сообщения в блоге
• Комментарии пользователей
• Карточки товаров
• Газетные статьи

Вложение <article> в <section> или наоборот?

Элемент <article> определяет независимое, автономное содержимое.

Элемент <section>определяет раздел в документе.

Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет мы не можем!

Итак, вы найдете HTML-страницы с <section> элементами, содержащими <article> элементы, и <article> элементами, содержащими <section> элементы.

HTML элемент <header>

Элемент <header> представляет собой контейнер для вводного контента или набор навигационных ссылок.

Элемент <header> обычно содержит:

• один или несколько элементов заголовка (<h1> - <h6>)
• логотип или значок
• информация об авторстве

В одном HTML-документе может быть несколько <header> элементов. Однако <header> не может быть помещен в <footer>, <address> или другой <header> элемент.

HTML элемент <footer>

Элемент <footer> определяет нижний колонтитул для документа или раздела.

Элемент <footer> обычно содержит:

• информация об авторстве
• информация об авторских правах
• контакты
• карта сайта
• вернуться к верхним ссылкам
• соответствующие документы

В одном документе может быть несколько <footer> элементов.

HTML элемент <nav>

Элемент <nav>определяет набор навигационных ссылок.

Обратите внимание, что НЕ все ссылки документа должны находиться внутри <nav> элемента. Элемент <nav> предназначен только для крупных блоков навигационных ссылок.

Браузеры, такие как программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, следует ли пропустить первоначальную визуализацию этого содержимого.

HTML элемент <aside>

Элемент <aside> определяет некоторое содержимое помимо содержимого, в котором он размещен (например, боковая панель).

Контент <aside> должен быть косвенно связан с окружающим контентом.

HTML-элементы <figure> и <figcaption>

Тег <figure> определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д.

Тег <figcaption> определяет заголовок для <figure> элемента. Элемент <figcaption> может быть размещен как первый или как последний дочерний <figure> элемент элемента.

Элемент <img> определяет фактическое изображение/иллюстрацию.

HTML Семантические Элементы

Теперь резюмируя статью можно выделить следующие семантические теги: