Сегодня, в рамках наших постоянных исследований, мы проведём анализ определённой группы (X)HTML-элементов, с помощью которой мы оформляем текстовое содержимое на наших сайтах. Никогда не стоит забывать о том, что текст — это основа Web, что бы ни говорили ведущие различных фото- или видеоблогов (вы понимаете, о чём я).

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

Что рекомендации гласят

Для того, чтобы говорить о чём-то, нужно знать, о чём же. Заглянем в DTD HTML 4:

Данное определение объявляет нам два типа элементов: fontstyle (для быстрого стилистического оформления документов, фактически, их можно назвать alias`ами некоторых CSS-свойств) и phrase. Первая категория заставляет сказать лишь пару слов негодования, а вторая требует кропотливого анализа.

Fontstyle, история HTML и ISO

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

Теперь отодвинемся немного от их репрезентативных качеств и обратимся к тому, что (X)HTML должен представлять собой структурную разметку документа, но не стилевое его представление. Я считаю, что внедрение подобных тегов было совершено для облегчения (хотя, куда уж легче, согласны?) вёрстки страниц, чтобы это было доступно не только профессионалам, но и любителям. И что из этого вышло? Консорциум пошёл на необдуманные шаги, которые превратили HTML в язык для определения репрезентативных качеств документа.

Но правильное ли это было решение? Сапожник должен сапоги шить, булочник должен булки печь, однако что будет, если они поменяются местами? Всё верно: ничего хорошего не будет. Спецификация CSS берёт на себя всю ответственность по стилевому обогащению документа (тот самый принцип трёх китов, о котором я говорил). Элементы группы fontstyle пересекаются со свойствами CSS, поэтому их можно считать избыточными, лишними.

Вот что о них говорит нам рекомендация:

The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.

Вместе с этими элементами идёт и сам элемент font, использование которого противоречит «обязанностям» HTML. Вспомним определение markup из HTML 2.0 (RFC 1866):

Syntactically delimited characters added to the data of a document to represent its structure. There are four different kinds of markup: descriptive markup (tags), references, markup declarations, and processing instructions.

Или вспомните ещё один репрезентационный элемент, center, который был добавлен компанией-сподвижником HTML 3.2:

CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 On account of its widespread deployment.

Вот такие вот дела. Все элементы внедрялись с определённым смыслом в своё время. Уйдём ещё глубже в историю этих элементов и посмотрим, как их определяли в черновике первой версии HTML:

PHYSICAL STYLES

TT Fixed-width typewriter font.

B Boldface, where available, otherwise

Alternative mapping allowed.

I Italic font (or slanted if italic

Unavailable).

U Underline.

LOGICAL STYLES

EM Emphasis, typically italic.

STRONG Stronger emphasis, typically bold.

Посмотрите на то, какой смысл несут в себе указанные элементы. Посмотрите, чем em отличается от b и в какие подгруппы они отнесены. Физические стили шрифта — это именно такие стили, которые накладывают физические ограничения на отображение текста, указанного в таких элементах. Логические стили, помимо всего прочего, несут в себе определённую семантику.

В конце концов, у нас есть третья инстанция, куда мы можем обратиться — ISO, а именно приложение ISO-HTML:

It provides a simple way of structuring hypertext documents and of placing references in one document which point to another.

…

In the frenzy of the growth, much of the discipline and good practice of the mature SGML world has been lost, and browser developers have added additional features to the markup language such as new tags and new semantics for tags. As a result, many documents have been created which can only be rendered faithfully on a limited number of browsers..

…

The W3C Recommendation for HTML 4.01 provides a number of attributes that are not supported by the International Standard. They have been omitted because they are used to describe appearance rather than structure, or because the feature is considered to be still too unstable or immature for an International Standard.

ISO задумывается о том, что у HTML несколько другое предназначение, и оно не включает в себя стилевые и косметические изменения документа.

Теперь, со спокойной душой, можно приступать к фразовым элементам.

Элемент em

Перед тем как перейти к рассмотрению данного элемента, давайте разберёмся с этимологией слова emphasis, которое и является основной для сокращения em. Так-так-так… оказывается, что emphasis обозначает «акцент». Вот тут всё должно стать предельно ясным: данным элементом мы акцентируем внимание пользователя на конкретном участке текста. «Акцент» может означать всё что угодно, но он и не должнен указывать, как отображать данный элемент, и это лишь соглашение, что он отображается курсивом. Синтезаторы речи могут на этом элементе изменять речевые характеристики именно для акцентирования внимания, а браузеры могут изменять характеристики шрифта, чтобы их выделить.

Вот пример простого акцента в тексте:

В вышеприведённом примере мы делаем акцент на том, откуда именно дядя Фёдор. Мы можем заострить внимание пользователя и на других элементах текста, например на его имени, или на то, что так зовут именно его, а не сидящего рядом с ним кота Матроскина.

Элемент strong

Этот элемент аналогичен элементу em с той лишь разницой, что он представляет из себя сильный акцент. Его следует использовать в тех случаях, когда нужно акцентировать внимание на очень важном, порой даже критичном сообщении. В английском варианте элемент звучит как strong emphasis, о чём мы и говорили.

Элемент strong не следует использовать для обозначения заголовков в тексте: для этого есть соответствующие элементы hx.

Вот пример сильного акцента:

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

Элемент abbr

Такой элемент уже встречался вам ранее, в наших нескольких предыдущих беседах. Он предназначен для выделения аббревиатур в тексте. Посмотрим определение аббревиатуры в Wikipedia, чтобы лучше понять предназначение элемента:

Аббревиатура (итал. Abbreviatura от лат. Brevis — краткий). В старинных рукописях и книгах сокращённое написание слова или группы слов. В современных изданиях любое сокращённое слово или словосочетание.

Вот оно! Для расшифровки аббревиатуры мы можем воспользоваться атрибутом title, а для указания языка аббревиатуры — атрибутом lang. Синтезаторы речи могут читать пользователю и само сокращение, и его полную форму.

Вот пример аббревиатуры:

Если вы сомневаетесь насчёт того, в какой форме писать полную форму аббревиатуры, то приведите фразу к именительному падежу, если это возможно. Атрибут lang следует указывать, если язык текста сокращения не совпадает с языком документа (языком, указанного в атрибуте lang для элемента html).

Элемент abbr очень часто используется в различных микроформатах, например в hCalendar, geo и некоторых других.

Элемент acronym

Давайте снова подглядим определение акронима в Wikipedia:

Акро́ним (от греч. άκρος — «высший, крайний» и όνυμος — «имя») — аббревиатура, образованная из начальных букв слов или словосочетаний, произносимая как единое слово, а не побуквенно.

Как вы уже, скорее всего, поняли, это то же самое, что и аббревиатура, лишь читается по-другому.

Как обычно, небольшой пример:

В реальном мире существует проблема с тем, как разные люди интерпретируют разные сокращения. У одних получаются аббревиатуры, а у других — акронимы. Авторы документов могут давать указания синтезаторам речи через CSS, как читать акронимы, а как — аббревиатуры, не устанавливая этот параметр закреплённым на семантическом уровне.

Элемент cite

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

В данном случае в элементе cite заключена ссылка на ресурс, который упоминается нашим героем. Помимо этого, в элементе может содержаться сам цитируемый текст.

Элемент dfn

Если у вас в документе встречаются различные определения, или жаргонизмы, вы можете использовать элемент dfn, чтобы указать браузерам (или средствам для синтеза речи) на это. Помимо этого, вы можете добавить атрибут id к данному элементу, чтобы в дальнейшем можно было ссылаться на это определение.

Например:

Использование данного элемента рекомендовано WCAG 2.0.

Элемент code

Как было сказано выше, указанный элемент используется для указания исходного кода различных программ или их частей, алгоритмов, скриптов и подобных.

Элемент kbd

В данный элемент следует заключать текст, который был набран пользователем с клавиатуры, то есть всё предельно просто.

Элемент samp

Использование данного тега необходимо в случаях, когда вам нужно показать вывод программы, скрипта. Не следует для этого использовать элемент code, так как он предназначен для разметки исходного кода данных программ или скриптов.

Пример:

Вывод

Текст в Web — это основное средство передачи информации, поэтому мы не должны пренебрегать его разметкой, его представлением. (X)HTML предоставляет нам возможность синтаксически разметить информацию, которую мы не можем донести посредством текста: интонацию, тембр, громкость. Для того, чтобы помочь пользователю понять текст, нужно использовать нужные элементы в правильных местах. Это первое время может казаться необычно, но потом наступает привыкание и отказаться от этого уже не представляется возможным. Удачной вам вёрстки.