СЕМАНТИКА В ВЕБ-СТРАНИЦАХ HTML5

Технологии создания сайтов постоянно развиваются. В HTML5 появились новые теги, несущие исключительно смысловое значение. В статье рассмотрены средства, позволяющие сделать HTML разметку еще более семантичной, без превращения HTML в XML.

Семантика в разметке

В самых общих чертах, семантика в разметке касается обозначений. Если говорить о терминах, то семантику можно определить, как «раздел семиотики и логики, исследующий отношение языковых выражений к обозначаемым объектам и выражаемому содержанию.» [6], а также как «(от греч. — обозначающий), раздел логики (или металогики) и семиотики, посвящённый анализу комплекса связанных между собой понятий, центральными из которых являются понятия значения и смысла.» [5]. В жизни нам постоянно требуется обозначать различные предметы, например, банки в магазине, чтобы понимать, что находится внутри. Аналогично и при написании кода HTML, требуется понимать какой контент находится в том или ином элементе.

Но только ли с появлением HTML5 и тегов, как <section>, <article>, <address> в вебе появилась семантика? Если верстка осуществляется согласно спецификации HTML, то она уже является семантичной. Такие теги, как <h1>,  <ul>, <blockquote> использовались еще в html 3.2 и раньше, и каждый из них нёс определенное понимание того, что в нем находится.

Я бы сравнил использование элементов по своему назначению с подсветкой синтаксиса в редакторе, в отличие от чтения кода в блокноте. Мне встречался код, где автор вместо <h1> использовал <div class=”h1”> или <div class=”title1”>, читать такой код крайне сложно, хотя бы потому, что приходится разбираться в том, в каком контексте каждый из таких блоков используется.

Так в каких случаях полезна семантика элементов HTML? «Прежде всего, семантика в вёрстке — это совокупность смысловых отношений, возникающих в документе. Однако для существования таких отношений необходим документ, который возникает благодаря внедрению HTML-разметки в простой текст.» [3] Таким образом можно сделать вывод, что в том числе семантика представляет собой: правильное применение элементов HTML, именование элементов, комбинирование именованных элементов[2].

Рассмотрим пример со списком определений. Как уже было сказано, семантика — совокупность смысловых связей.

Термин размещается в элементе <dt> (definition term), а его определение в элементе <dd> (definition description). Эти элементы рассматриваются в контексте оборачивающего <dl> (definition list). Который диктует смысловые отношения между элементами внутри себя, по этой причине не зная какой текст расположен в <dt> и <dd>, мы уже знаем назначение этого текста. Благодаря семантичной верстке создается абстрактная логика документа. Таким образом можно сделать вывод, что семантические связи существуют между элементами документа, а не отдельными частями текста или словами. Однако, чем больше семантических элементов будет иметь HTML, тем больше он будет похож на некий универсальный XML. Думаю, это даже хорошо, поскольку от оформления тегов современный веб зависит все меньше, например, методология БЭМ как раз пропагандирует максимальную независимость CSS оформления от HTML разметки, что лично я считаю очень удобным.

Элементы HTML в свою очередь можно разделить на структурные — те, которые позволяют организовать основные части страницы, к ним относятся в том числе <header>, <nav>, <article>; текстовые — обычно располагаются внутри структурных и определяют цель содержимого, как <p>, <ul>, <blockquote>; и строчные элементы — в связи с тем, что текстовые элементы могут содержать большой объем текста, но с различным содержанием, строчные элементы позволяют различать части этого текста, к таким относятся <strong>, <em>, <a>, <abbr>. Таким образом, читая код, становится легче понять, что означает каждый из элементов в нем. Поскольку значений элементов может быть великое множетво (на данный момент самих семантических элементов насчитывается около 100[7]), то существует, и группа не наделенных семантикой общих элементов, как <div> и <span>, применяемых при группировке или стилизации. [4]

Семантика в CSS

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

WAI-ARIA

Это акроним Web Accessibility Initiative — Accessible Rich Internet Applications (стандарт доступности активных Интернет-приложений,). Чтобы информация на сайте была доступна людям с ограниченными возможностям или тем людям, которые не могут использовать мышь, было изобретено такое средство как WAI-ARIA — средство доступности. Благодаря нему люди с ограниченными возможностями могут использовать те части сайта, которые без этого средства им недоступны. Средство основано на распределении ролей. Два из трех правил ролей, которые описаны в спецификации, говорят о том, что нужно использовать нативную семантику и стараться до последнего не изменять ее. Когда средство доступности сроит дерево доступности, которое далее использует скрин-ридер или подобное средство, атрибут role перекрывает нативную семантику элемента.

Такие элементы как <header>, <h1> уже имеют нативную семантику, поэтому указывать role не обязательно.

Микроразметка

HTML5 привнес в веб новые структурные элементы. Благодаря этому иерархия внутри документа теперь строится не только на элементах <h1>-<h6>. Структура теперь строится при помощи вложенности тегов <section>. Использование новых семантичных тегов упрощает работу по поиску информации поисковым системам. Помимо поисковых систем, интерпретация HTML элементов важна для различных скринридеров, браузерных ридеров, сайтов-агрегаторов. В первую очередь, конечно, семантичная разметка полезна уже упомянутым поисковым системам. Им важно отобрать то, что важно и содержит полезную информацию, а что нет. Задача поисковой системы дать пользователю максимально точный ответ, и добавление дополнительной семантики серьезно улучшает этот процесс.

К микроформатам относятся: Microformats, Microdata, RDFa, Open Graph protocol, Twitter Card. Open Card является лидирующим форматом на данный момент. Поиск «Яндекс» работает с микроформатами hCard, hRecipe, hReview, эти форматы позволяют сделать контент доступным для поисковых роботов.

Микроразметка состоит из словаря и синтаксиса. Словарь — набор классов и свойств, при помощи которого указывается суть содержимого на странице. Синтаксис — способ использования словаря, то есть с помощью каких тегов и как будут указываться сущности и свойства [1].

У использования микроразметки есть один большой недостаток — чтобы успешно ее использовать, микроразметку должна поддерживать поисковая система, которая будет использовать последнюю для индексации страниц. Если же применять сразу различные виды микроразметки на странице, то сильно вырастает количество кода, отвечающего за смысловое оформление страницы, что может перегружать разметку, ровно как обильное использование атрибутов style для оформления документа. Возможно, при достаточном развитии технологии индустрия придет к тому, что семантика будет вынесена в отдельный файл, ровно как CSS и JavaScript, не переполняя разметку HTML.

Итог

Семантика в разметке с HTML5 и грамотное, осмысленное именование классов и идентификаторов улучшают процесс поиска элементов в коде.

Средство доступности WAI-ARIA позволяет большему числу людей получить доступ к информации на сайте.

Микроразметка позволяет улучшить отображение ссылок на страницы в поисковых системах и социальных сетях.

Список литературы:

1. Как устроен мир семантической микроразметки, 2014[Электронный ресурс], режим доступа. – URL:https://habrahabr.ru/company/yandex/blog/211638/ (дата обращения 28.04.2017)
2. Лауке П. Семантическая вёрстка. Часть первая, 2008 [Электронный ресурс], режим доступа. – URL:https://pepelsbey.net/2008/04/semantic-coding-1/ (дата обращения 28.04.2017)
3. Сергей М. Расставив все элементарные точки над «семантикой», 2008 [Электронный ресурс], режим доступа. – URL:https://habrahabr.ru/post/29498/ (дата обращения 28.04.2017)
4. Томас Д. Семантика в HTML, 2016 [Электронный ресурс], режим доступа. – URL:https://webref.ru/course/html-basics/semantics (дата обращения 28.04.2017)
5. Философия: Энциклопедический словарь. — М.: Гардарики. Под редакцией А.А. Ивина. 2004.
6. Философский энциклопедический словарь. — М.: Советская энциклопедия. Гл. редакция: Л. Ф. Ильичёв, П. Н. Федосеев, С. М. Ковалёв, В. Г. Панов. 1983.
7. Smith M. HTML element reference, 2017[Электронный ресурс], режим доступа. – URL:https://developer.mozilla.org/en-US/docs/Web/HTML/Element (дата обращения 28.04.2017)