» » HTML5 | Семантическая разметка сайта

HTML5 | Семантическая разметка сайта

Что такое семантика в HTML

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

Семантическая вёрстка веб-документа

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

Чем отличается семантическая вёрстка от обычной
Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:
<div class="header">Шапка сайта</div>
<div class="navigasia">Главное верхнее меню сайта</div>
<div class="sidebar">Дополнительное боковое сайта</div>
<div class="content">Содержимое веб-страницы</div>
<div class="footer">Подвал сайта</div>
Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:
<header>Шапка сайта</header>
<nav> Главное верхнее меню сайта </nav>
<aside>Дополнительное боковое сайта</aside>
<article>Содержимое веб-страницы</article >
<footer>Подвал сайта</footer>
Как видно из примера, для обозначения и задания соответствующих стандартных элементов веб-страницы использованы соответствующие теги. Кроме этого, код гораздо проще. При этом, внешний вид такой страницы для человеческого глаза – останется абсолютно неизменным. Возникает резонный вопрос – а зачем тогда нужна семантическая вёрстка и разметка веб-страницы, если людям она не видна?

Зачем нужна семантическая вёрстка

Семантическая вёрстка и разметка веб-страницы видна браузеру и роботам. Семантическая вёрстка и разметка позволяет более точно определять значимость отдельных элементов веб-страницы и всего текста в целом Поэтому, прежде всего – семантическая вёрстка нужна для улучшения робото-функционала сайта и, как следствие – лучшей его поисковой индексации. А, не об этом-ли, мы все мечтаем?

Семантическая вёрстка в HTML5

Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.

В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов <i> и <b> на <em> и <strong>. HTML5 – не в пример «семантичней» и это видно из приведённого примера.

Новые популярные семантические теги HTML5

Прежде всего, <!DOCTYPE html> – простой и понятный всем доктайп.

Дальше идут теги, определяющие семантическую специализацию блоков:
(семантические теги)

<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>

Проблемы совместимости HTML5 и XHTML

Принципиально, в совместимости HTML5 и XHTML – проблем нет никаких. Все новые браузеры прекрасно поддерживают теги HTML5 и выполняют их. Единственное огорчение ждёт любителей валидного кода. Потому что, большинство сайтов свёрстано не HTML, а в XHTML. И теперь, получается странная ситуация – доктайп от XHTML, а теги из HTML5. Валидатор «вешается и пишет красным». В настоящий момент, на такую «нестыковку» все закрыли глаза. А что делать? Ведь XHTML всегда был только производным языком от HTML.

Так что основной веб-язык, это всё-таки HTML5. В ближайшее время, проблемы совместимости HTML5 и XHTML, скорей всего будут решаться, либо простым игнорированием вопроса в пользу HTML5, либо простым добавлением тегов HTML5 в спецификацию XHTML. В любом случае, это будет простое решение, без фундаментальной перестройки положения вещей. Уж слишком он выстрадан, этот HTML5, чтобы теперь ещё всерьёз начинать возиться с XHTML5.

Плавный переход шаблона с XHTML на HTML5

Как утверждают специалисты, HTML5 – это не одна большая вещь, это набор разных возможностей. Поэтому, начинать переходить с XHTML на HTML5 можно постепенно, по частям добавляя нужный код в свой шаблон. Валидатор XHTML ругнётся и всё вскорости образуется. Ведь всем остальным – «по барабану», теги HTML5 работают везде и вся. Для начала, можно изменить общую структуру своего шаблона, простой заменой классов CSS на семантические теги из примера «Чем отличается семантическая вёрстка от обычной».

HTML5 | Семантическая разметка сайта

(Главное – начать)
Опять-же таки, как утверждают известные специалисты – «обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> в HTML5 имеет предельно простой вид: <!DOCTYPE html>. После такого «обновления», ровным счётом ничего не произойдёт, потому что все теги, определённые в HTML4, также поддерживаются и в HTML5. Что касаемо перехода с XHTML на HTML5, то тут я не рискнул на своём сайте так резко менять <!DOCTYPE>, решился только на постепенную замену части тегов да изменение структуры страницы.

 

Ключевые слова статьи: HTML сайт интернет

Поделиться ссылкой на статью в социальной сети, добавить в избранное или распечатать:

Добавление комментария

Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив