В HTML5 появились новые семантические элементы для структурирования, группировки контента и разметки текстового содержимого. Они четко описывают, какой контент содержат (было , стало).
Рассмотрим подробнее семантические элементы и их значения.
html> html> head> title>Заголовок окна веб-страницы title> head> body> header> h1>Курсы программирования h1> header> nav> ahref="/uchebnik-html.html">HTML a> | ahref="/learn-css.html">CSS a> | ahref="/learn-javascript.html">JavaScript a> | ahref="/learn-php.html">PHP a> | nav> h2>Добро пожаловать на сайт W3Docs! h2> body> html>
Результат
Элемент
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> article> h1>Заголовок статьи h1> p>Текст статьи p> article> body> html>
Результат
Элемент
Пример
html> html> head> title>Использование тега section title> head> body> section> h1>Язык гипертекстовой разметки HTML h1> p>Стандартизированный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. p> section> section> h1>CSS h1> p>Формальный язык, который используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL. p> section> body> html>
Результат
Элемент
Пример
html> html> body> p>Я люблю смотреть Игру Престолов. p> aside> h4>Игра Престолов h4> p>Американский телесериал в жанре фэнтези, основанный на цикле романов «Песнь Льда и Огня» Джорджа Р. Р. Мартина. p> aside> body> html>
HTML: Семантические элементы
При создании HTML-документа разработчики используют теги и . Они позволяют создать блочный или строчный элемент, что помогает создавать независимые блоки с разным оформлением. Но, для браузера и поисковых систем, эти блоки не являются семантическими, т.е. они не говорят напрямую о том, что в них лежит.
,
— списки. Но этими тегами не получится разметить «шапку», «подвал», «боковую панель» сайта.
До выхода стандарта HTML5 для разметки таких областей использовали классы или идентификаторы. Например так:
Это решило проблемы с точки зрения разработчиков, ведь навигация по коду стала быстрее, но, с точки зрения браузера, ситуация не изменилась. Браузеры не понимают, что id=»header» используется на сайте для обозначения шапки сайта, да и разработчики именовали области по своему, так как не было единого стандарта.
С выпуском стандарта HTML5 появились новые теги, которые стали обозначать семантики областей страницы, а не только текста.
Основными семантическими тегами стали:
Большинство элементов интуитивно понятны и их можно сразу использовать в своих документах. Теперь пример выше можно переделать с использованием новых элементов HTML:
// Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню// Уникальный контент сайта
Обратите внимание, что в вёрстке пропали идентификаторы и она стала чище. В этом модуле мы рассмотрим основные семантические теги на едином примере. От урока к уроку усложняя и дорабатывая страницу сайта.
Задание
Создайте разметку «шапки» и «подвала», используя новые семантические элементы HTML5
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
HTML5
The term HTML5 is essentially a buzzword that refers to a set of modern web technologies. This includes the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia, and hardware access.
You may sometimes hear about «new HTML5 elements», or find HTML5 described as a new version of HTML. HTML5 was the successor to previous HTML versions and introduced new elements and capabilities to the language on top of the previous version, HTML 4.01, as well as improving or removing some existing functionality. However, as a Living Standard HTML now has no version. The up-to-date specification can be found at html.spec.whatwg.org/.
Any modern site should use the HTML doctype — this will ensure that you are using the latest version of HTML.
Note: Until 2019, the W3C published a competing HTML5 standard with version numbers. Since 28 May 2019, the WHATWG Living Standard was announced by the W3C as the sole version of HTML.
See also
our HTML documentation
HTML beginner’s learning guides
Web APIs
Found a content problem with this page?
Edit the page on GitHub.
Report the content issue.
View the source on GitHub.
This page was last modified on Jun 8, 2023 by MDN contributors.
Семантические элементы HTML5
Семантика — это наука о значениях слов и фраз в языке. Таким образом, семантические элементы — это элементы или теги со значением.
Что такое семантические теги?
Семантические теги четко описывают, что они означают, как браузеру, так и веб-разработчику.
В качестве примера не семантических элементов можно привести теги и . Они ничего не говорят о характере их контента.
Семантические теги HTML5 поддерживаются всеми современными браузерами.
Кроме этого, можно «научить» старые браузеры понимать «неизвестные элементы». См. раздел «Поддержка элементов HTML5».
Новые семантические элементы в HTML5
На многих веб-сайтах есть HTML код вроде этого: , , . Обычно он используется для выделения блоков навигации, шапки и подвала страницы.
HTML5 вводит ряд новых семантических тегов, предназначение которых определять блоки различных частей веб-страницы:
Элемент
Элемент определяет раздел в документе.
В соответствии со спецификацией W3C по HTML5: «Раздел — это тематически сгруппированный контент, как правило с заголовком.»
Домашняя страница обычно может быть разбита на следующие разделы: вступление, основной контент и контактная информация.
WWF
Всемирный фонд дикой природы (WWF) это.
Элемент
Элемент определяет независимый, самодостаточный контент.
Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
В качестве примеров использования элемента могут выступать:
Публикация на форуме
Публикация в блоге
Газетная статья
Что делает Всемирный фонд дикой природы?
Задача Всемирного фонда дикой природы остановить деградацию окружающей среды на нашей планете и построить будущее, в котором человечество будет жить в гармонии с дикой природой.
Элемент должен быть вложен в или наоборот?
Элемент определяет независимый, самодостаточный контент.
Элемент определяет раздел в документе.
Можно ли по определению сказать, какой из этих элементов в какой должен быть вложен? Нет, нельзя!
В интернете вы найдете HTML страницы с элементами , содержащие элементы , и элементы , содержащие элементы .
Также, вы встретите страницы с элементами , содержащие другие элементы , и элементы , содержащие другие элементы .
Пример для газеты: Спортивная статья в спортивном разделе может содержать технический раздел.
Элемент
Элемент предназначен для определения заголовочного блока или «шапки» документа или раздела.
Элемент следует использовать как контейнер для вводной информации.
В одном документе разрешается определять несколько элементов .
В следующем примере определяется «шапка» для статьи:
Что делает Всемирный фонд дикой природы (ВФП)?
Цель ВФП:
Задача Всемирного фонда дикой природы остановить деградацию окружающей среды на нашей планете и построить будущее, в котором человечество будет жить в гармонии с дикой природой.
Элемент
Элемент предназначен для определения «подвала» документа или раздела.
Элемент должен содержать информацию о содержащим его элементе.
Обычно в «подвале» размещают информацию об авторе документа, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.
В одном документе разрешается определять несколько элементов .
Элемент
Элемент определяет набор ссылок навигации.
Обратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента . Элемент предназначен только для основного блока навигационных ссылок.
Элемент
Элемент определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, «сайдбар»).
Контент внутри элемента должен соотноситься с окружающим контентом.
Этим летом я с семьей посетил EPCOT центр.
Элементы и
Назначение элемента — добавление визуального пояснения к изображению.
В HTML5 изображение и пояснение к нему может быть сгруппировано в элементе :
Рис. 1 — Палпит Рок. Гора в Норвегии
Элемент определяет изображение, а элемент пояснение к нему.
Зачем нужны семантические элементы?
В HTML4 веб-разработчики использовали свои собственные имена в идентификаторах/классах элементов для их стилизации: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav и т.п.
Такое положение дел не позволяло поисковым системам корректно идентифицировать роль того или иного контента веб-страницы.
Благодаря новым элементам HTML5 (, , , , ), сделать это стало гораздо проще.
Семантические элементы HTML5
Ниже приводится список новых семантических элементов, добавленных в HTML5.
Тег
Описание
Определяет статью
Определяет блок сбоку от основного контента
Определяет дополнительную информацию, которую пользователь может открывать или закрывать
Определяет пояснение для элемента
Используется для группирования различных самодостаточных элементов — иллюстраций, диаграмм, фотографий, листингов кода и т.д.
