A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: and — Tells nothing about its content.
Semantic Elements in HTML
In HTML there are some semantic elements that can be used to define different parts of a web page:
HTML Element
The element defines a section in a document.
According to W3C’s HTML documentation: «A section is a thematic grouping of content, typically with a heading.»
Examples of where a element can be used:
A web page could normally be split into sections for introduction, content, and contact information.
Example
Two sections in a document:
WWF
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
WWF’s Panda symbol
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
HTML Element
The element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
Examples of where the element can be used:
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
Example
Three articles with independent, self-contained content:
Google Chrome
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!
Mozilla Firefox
Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.
Microsoft Edge
Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.
Can we use the definitions to decide how to nest those elements? No, we cannot!
So, you will find HTML pages with elements containing elements, and elements containing elements.
HTML Element
The element represents a container for introductory content or a set of navigational links.
A element typically contains:
one or more heading elements ( — )
logo or icon
authorship information
Note: You can have several elements in one HTML document. However, cannot be placed within a , or another element.
Example
What Does WWF Do?
WWF’s mission:
WWF’s mission is to stop the degradation of our planet’s natural environment, and build a future in which humans live in harmony with nature.
HTML Element
The element defines a footer for a document or section.
A element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several elements in one document.
Example
A footer section in a document:
HTML Element
The element defines a set of navigation links.
Notice that NOT all links of a document should be inside a element. The element is intended only for major blocks of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
Example
A set of navigation links:
HTML Element
The element defines some content aside from the content it is placed in (like a sidebar).
The content should be indirectly related to the surrounding content.
Example
Display some content aside from the content it is placed in:
My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!
Epcot Center
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Example 2
Use CSS to style the element:
My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!
The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!
My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!
HTML and Elements
The tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The tag defines a caption for a element. The element can be placed as the first or as the last child of a element.
The element defines the actual image/illustration.
Example
Fig1. — Trulli, Puglia, Italy.
Why Semantic Elements?
According to the W3C: «A semantic Web allows data to be shared and reused across applications, enterprises, and communities.»
Semantic Elements in HTML
Below is a list of some of the semantic elements in HTML.
Элементы разделов, такие как , , , , применяются для смыслового деления содержимого. Браузеры визуально никак не показывают эти элементы и не меняют вид их содержимого. Тем не менее, на веб-странице часто требуется стилизовать какой-то блок, изменив цвет текста, добавив к нему рамку, фон и др. Какой элемент для этого использовать? Правильный ответ — .
Элемент придуман именно для оформительских целей — изначально он никак не меняет вид своего содержимого и не несёт какого-либо смысла, в отличие от , к примеру. используется, когда требуется изменить стиль блока, но сам блок нельзя отнести к элементам раздела. В примере 1 показано применение для стилизации блока.
Результат данного примера показан на рис. 1. Для оформления задействованы стили, заданные через элемент внутри .
является блочным элементом — он занимает всю доступную ширину и начинается с новой строки. Для стилизации отдельных букв, слов или фраз применяется элемент , который вставляется непосредственно в строку, как показано в примере 2.
span
Лягте животом на пол. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперёд до полного сокращения мышц живота.
Результат данного примера показан на рис. 2. Для оформления фразы она выделена с помощью элемента , к которому применяется стиль через .
Семантика — это наука о значениях слов и фраз в языке. Таким образом, семантические элементы — это элементы или теги со значением.
Что такое семантические теги?
Семантические теги четко описывают, что они означают, как браузеру, так и веб-разработчику.
В качестве примера не семантических элементов можно привести теги и . Они ничего не говорят о характере их контента.
Семантические теги 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.
Тег
Описание
Определяет статью
Определяет блок сбоку от основного контента
Определяет дополнительную информацию, которую пользователь может открывать или закрывать
Определяет пояснение для элемента
Используется для группирования различных самодостаточных элементов — иллюстраций, диаграмм, фотографий, листингов кода и т.д.
