Главная › Новости

Html5 семантические теги

Опубликовано: 07.10.2017

Среда Знаний: семантические теги в HTML5

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

— теги семантически описывающие структуру страницы,

Семантическое описание структуры страницы в HTML5

Новые теги в HTML5 — это теги, семантически описывающие структуру страницы, предназначены для того чтобы компьютерная программа (например поисковый робот) , смогла отличать основной контент, от остальных частей страницы: шапки, подвала, меню, сайдбара, повторяющихся (динамических) блоков и т.д. Также идёт семантическое разделение на уровне основного контента (текста старницы).

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

<header> </header> — теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также теги header можно использовать как верхнюю часть тега section .

<nav> </nav> — теги обрамляющие основное меню на сайте.

<article> </article> — теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.

<aside> </aside> — теги обрамляющие сайдбар. Сайдбар — это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта) , социальные кнопки.

<footer> </footer> — теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section , т.е. сами теги footer будут находиться между тегами section