HTML Семантические элементы
Семантические элементы = элементы со значением.
Что такое семантические элементы?
Семантический элемент чётко описывает своё значение как для браузера, так и для разработчика.
Примеры несемантических элементов: <div> и <span> — ничего не говорят о своём содержимом.
Примеры семантических элементов: <img>, <table> и <article> — чётко определяют своё содержимое.
Семантические элементы в HTML
Многие веб-сайты содержат 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> определяет раздел в документе.
Согласно документации W3C по HTML: «Раздел — это тематически сгруппированный контент, обычно с заголовком».
Примеры использования элемента <section>:
- Главы
- Введение
- Новостные материалы
- Контактная информация
Обычная веб-страница может быть разделена на разделы для введения, контента и контактной информации.
Пример:
<section>
<h1>WWF</h1>
<p>Всемирный фонд дикой природы (WWF) — международная организация, работающая над сохранением,
исследованием и восстановлением окружающей среды. WWF был основан в 1961 году.</p>
</section>
<section>
<h1>Символ WWF — панда</h1>
<p>Панда стала символом WWF. Известный логотип WWF с пандой появился благодаря панде по имени Чи Чи,
которую перевели из Пекинского зоопарка в Лондонский зоопарк в том же году, когда был основан WWF.</p>
</section>HTML элемент <article>
Элемент <article> определяет независимый, самодостаточный контент.
Контент внутри этого элемента должен иметь смысл сам по себе и может быть распространён независимо от остальной части веб-сайта.
Примеры использования элемента <article>:
- Сообщения на форуме
- Записи в блоге
- Комментарии пользователей
- Карточки товаров
- Газетные статьи
Пример:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome — веб-браузер, разработанный Google, выпущен в 2008 году.
На сегодняшний день это самый популярный веб-браузер в мире!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox — веб-браузер с открытым исходным кодом, разработанный Mozilla.
С января 2018 года занимает второе место по популярности.</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>Самые популярные браузеры</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome — веб-браузер, разработанный Google, выпущен в 2008 году.
На сегодняшний день это самый популярный веб-браузер в мире!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox — веб-браузер с открытым исходным кодом, разработанный Mozilla.
С января 2018 года занимает второе место по популярности.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge — веб-браузер, разработанный Microsoft, выпущен в 2015 году.
Microsoft Edge заменил Internet Explorer.</p>
</article>
</article>
</body>
</html>Вложение <article> в <section> или наоборот?
Элемент <article> определяет независимый, самодостаточный контент.
Элемент <section> определяет раздел в документе.
Можно ли использовать эти определения, чтобы решить, как вкладывать эти элементы? Нет, нельзя!
Поэтому вы можете встретить веб-страницы, где элементы <section> содержат элементы <article>, а элементы <article> содержат элементы <section>.
HTML элемент <header>
Элемент <header> представляет контейнер для вводного контента или набора навигационных ссылок.
Обычно элемент <header> содержит:
- один или несколько элементов заголовка (
<h1>—<h6>) - логотип или значок
- информацию об авторстве
Примечание: В одном HTML-документе может быть несколько элементов <header>. Однако <header> нельзя размещать внутри <footer>, <address> или другого элемента <header>.
Пример:
Заголовок для <article>:
<article>
<header>
<h1>Чем занимается WWF?</h1>
<p>Миссия WWF:</p>
</header>
<p>Миссия WWF — остановить деградацию природной среды нашей планеты и построить будущее,
в котором человечество будет жить в гармонии с природой.</p>
</article>HTML элемент <footer>
Элемент <footer> определяет подвал для документа или раздела.
Элемент <footer> обычно содержит:
- информацию об авторстве
- информацию об авторских правах
- контактную информацию
- карту сайта
- ссылки «вернуться наверх»
- связанные документы
В одном документе может быть несколько элементов <footer>.
Пример:
<footer>
<p>Автор: Хеге Рефснес</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>HTML элемент <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>Мы с семьёй посетили центр Epcot этим летом. Погода была хорошая, и Epcot был потрясающим!
Я прекрасно провёл лето вместе с семьёй!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot — это тематический парк в Walt Disney World Resort с захватывающими аттракционами,
международными павильонами, отмеченными наградами фейерверками и сезонными специальными мероприятиями.</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>Мы с семьёй посетили центр Epcot этим летом. Погода была хорошая, и Epcot был потрясающим!
Я прекрасно провёл лето вместе с семьёй!</p>
<aside>
<p>Центр Epcot — это тематический парк в Walt Disney World Resort с захватывающими аттракционами,
международными павильонами, отмеченными наградами фейерверками и сезонными специальными мероприятиями.</p>
</aside>
<p>Мы с семьёй посетили центр Epcot этим летом. Погода была хорошая, и Epcot был потрясающим!
Я прекрасно провёл лето вместе с семьёй!</p>
<p>Мы с семьёй посетили центр Epcot этим летом. Погода была хорошая, и Epcot был потрясающим!
Я прекрасно провёл лето вместе с семьёй!</p>
</body>
</html>HTML элементы <figure> и <figcaption>
Тег <figure> определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кода и т.д.
Тег <figcaption> определяет подпись для элемента <figure>. Элемент <figcaption> может быть размещён как первый или последний дочерний элемент <figure>.
Элемент <img> определяет фактическое изображение/иллюстрацию.
Пример:
<figure>
<img src="pic_trulli.jpg" alt="Трулли">
<figcaption>Рис.1. — Трулли, Апулия, Италия.</figcaption>
</figure>Почему семантические элементы?
Согласно W3C: «Семантический веб позволяет обмениваться данными и повторно использовать их в приложениях, предприятиях и сообществах».