HTML5 | Семантическая разметка и структура документа

15-12-2020, 08:24

Семантическая разметка – создание осмысленной и логически связанной информационной структуры содержимого (контента) html-документа в соответствии с семантикой (предназначением) html-элементов, их тегов и атрибутов.

Информационно-осознанная структурная семантическая разметка html-документа легко и просто сменила классическую косметическую информационно-безликую блочную div-верстку, придав осмысленность структуре подаваемой информации. Простота семантической разметки html-документа объясняется фактом появления в спецификации HTML5 ряда целевых и наполненных смыслом тегов для оборачивания важных элементов по информационному содержимому (контенту), а не по визуальному представлению страницы в браузере.

Назначение семантической разметки

Семантическая разметка несет поисковым роботам, браузерам и программам-ридерам (чтецам) информацию о типе, важности и акцентировании контентного содержания html-документа для облегчения его машинной обработки.

Семантическая разметка не имеет отношения к внешнему виду (представлению) страницы на экране, для визуализации html-элементов подключаются стилевые правила.

Пользователи семантики – пауки, обозреватели, ридеры

Поисковые пауки особенно «полюбляют» семантическую структуру веб-документа, помогающую определиться с индексацией контента (содержащегося материала). Не отстают от поисковиков в любви к html-семантике браузеры и ридеры (обозреватели и чтецы), часто скрывающие в режиме чтения колонтитулы страницы (header и footer), навигационные (nav) и связанные (aside) элементы.

Структура HTML-документа

Традиционно, код веб-страницы в HTML5 начинается элементом <!DOCTYPE html>, определяющим тип документа. Единственный и неповторимый тег html с атрибутом указания языка содержащегося контента lang="ru" обрамляет два основных элемента html-документа: <head> – блок неотображаемой на экране служебной информации и <body> – видимая в браузере часть веб-страницы. Между тегами <body></body> находится тема семантической разметки.

1.<!DOCTYPE html>
2. <html lang="ru">
3.  <head>
4.   Служебная информация
5.  </head>
6.  <body>
7.   Семантическая разметка контента
8.  </body>
9. </html>

Семантическая структура документа

Опытные верстальщики настоятельно рекомендуют избегать лишних нагромождений кода и для начала ограничиться минимальным набором обязательных структурных семантических html-элементов в шаблоне (макете) веб-страницы: <header>, <nav>, <main> и <footer>.

<header>: Вводная информация документа. Сквозной элемент, отображающийся на всех сайто-страницах возглавляемого домена. Хедер (header) – визитная карточка документа, его «шапка», верхний колонтитул. Служит идентификатором контента в области принадлежности сайту, разделу, категории, домену. Обязательно содержит логотип сайта и заголовок страницы h1. Допускается размещение в хедере элементов сайтовой навигации.
<main>: Контейнер в <body> основного уникального содержимого, не допускающего дублирование на сайте. Текст, рисунки, видео, аудио и т.п., в <main> – исключительно в единственном и неповторимом экземпляре в пределах сайта (блога, домена).
Скромно умалчиваемый в практических руководствах, чисто! семантический элемент <main> – главное действующее лицо семантической разметки. <main> не содержит сквозные типовые повторяющиеся блоки страниц: шапку сайта (хедер), подвал (футер), сайтовую навигацию (нав), боковые панели (<div>), формы для поиска, регистрации, входа и т.д. Содержимое <main> индексируется поисковыми системами в первую очередь. В документе (на странице) – исключительно один элемент <main>. <main> не вкладывается в другие семантические элементы: <article>, <aside>, <footer>, <header>, <nav> ...
Боковая панель (sidebar) в <main>
Возлелеянная яростной div-ной версткой, сквозная боковая панель навигации не входит в элемент <main> ни в каком виде. Горячо любимый рунетом сквозной боковой, повторяющийся на всех страницах, блок не получил собственного семантического тега HTML5, не предусмотрен семантической разметкой и служит исключительно удобству (юзабилити) юзера, отвлекая его от настоящих семантических элементов навигации. С большой нужды, боковая панель веб-страницы верстается div-ом, расположенным за пределами структуры вложений элемента <main> и визуально выравнивается стилями.
Контентные html-элементы внутри <main> обрамляются тегами соответствующего назначения:
картинки – <img>, <picture>, <figure> ...;
заголовки, тексты, списки и цитаты – <h2 ... h6>, <р>, <ul>, <ol>, <strong> и <em> вместо <b> и <i>, <blockquote> ...;
видео – <video> ...;
аудио – <audio> и т.д.
Безликий элемент <div> в <main> – крупная дичь исключительно визуального назначения!
<footer>: Нижний колонтитул веб-документа, «подвал» статьи (сайта, раздела), содержит дополнительную информацию технического или правового характера: автор, контакт, копирайт, ссылки доп.меню, кнопка «Вверх» и т.д
<nav>: Блок основных приоритетных ссылок навигации, обычно расположен в колонтитуле страницы (хедере или футере) или между ними.

Семантическая структура документа — Семантическая структура html-документа

1. <header>
2.  <h1>Заголовок сайта</h1>
3.  <nav>
4.   Ссылки (сайто- навигация)
5.  </nav>
6. </header>
7. <main>
8.  Контент (неповторимый)
9. </main>
10. <footer>
11.  Копирайт, контакт, «про автора»
12. </footer>

Вёрстка семантического шаблона (макета)

Семантический шаблон (макет) веб-страницы – минимализм, лаконичность и логика, позволяющая избежать дублирования материала. Первым делом отказался от многочисленных раскрашенных менюшек и тупого поиска. CSS-трюки (закруглюшки, тенюшки, плюшки и финтиклюшки) – в прошлом, блок основной сайтовой навигации (<nav>) – одинокий воин в хедере семантической страницы.

Абзацы-черновики:

Семантические теги
<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer><header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp><rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

Реклама в семантике страницы

Расширение спецификации HTML явило миру два десятка новых тегов, призванных указать поисковым роботам особенности содержания веб-страницы для облегчения машинной обработки.

Сердца почтенных юзеров наполнились теплотой термина «семантическая разметка», подаваемого под соусом некоего магического продукта, способного вознести поисковую индексацию сайта (блога) до невиданных высот. Трепетное отношение к новорождённым html-тегам сменилось легким недоумением, переросшим в банальный профессионализм контентных интернет-авторов и верстальщиков шаблонов веб-страниц.

Семантическая разметка HTML – не панацея, свод соблюдаемых правил оформления интернет-документа, не больше и не меньше. Хорошим тоном современности считается обозначение соответствующими html-тегами вида и степени важности подаваемой информации.

Поисковые пауки усовершенствовались гораздо быстрее. Без дополнительных указаний со стороны, поисковики отлично и самостоятельно разбираются с назначением и важностью индексируемой информации, прекрасно понимая идентичность элементов <header>, <div id="header "> и <header id="header ">.

Элемент <р> (абзац) – чисто «литературный герой». Не правильное трактование перевода с инглиш – параграф. Не используемый верстальщиками в сайтовых шаблонах тег, предназначенный исключительно для отображения структуры контентного текстового содержания.

Игнорирование использования семантических HTML-тегов непременно приводит к падению общего рейтинга веб-страницы в глазах поисковиков, уделяющих пристальное внимание качеству индексируемого материала. Использование семантических HTML-тегов в соответствии с их семантикой (назначением) – обязательное условие повышения конкурентоспособности веб-документа.

Источник: HTML5 Semantic Tags: What Are They and How To Use Them!
Перевод источника: Секреты использования семантической вёрстки в HTML5