Семантическая разметка – создание осмысленной и логически связанной информационной структуры содержимого (контента) html-документа в соответствии с семантикой (предназначением) html-элементов, их тегов и атрибутов.
Информационно-осознанная структурная семантическая разметка html-документа легко и просто сменила классическую косметическую информационно-безликую блочную div-верстку, придав осмысленность структуре подаваемой информации. Простота семантической разметки html-документа объясняется фактом появления в спецификации HTML5 ряда целевых и наполненных смыслом тегов для оборачивания важных элементов по информационному содержимому (контенту), а не по визуальному представлению страницы в браузере.
Семантическая разметка несет поисковым роботам, браузерам и программам-ридерам (чтецам) информацию о типе, важности и акцентировании контентного содержания html-документа для облегчения его машинной обработки.
Семантическая разметка не имеет отношения к внешнему виду (представлению) страницы на экране, для визуализации html-элементов подключаются стилевые правила.
Поисковые пауки особенно «полюбляют» семантическую структуру веб-документа, помогающую определиться с индексацией контента (содержащегося материала). Не отстают от поисковиков в любви к html-семантике браузеры и ридеры (обозреватели и чтецы), часто скрывающие в режиме чтения колонтитулы страницы (header и footer), навигационные (nav) и связанные (aside) элементы.
Традиционно, код веб-страницы в 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>.
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
Юзер панель |