Фразовые элементы

22 июля 2008 года, 04:25

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

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

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

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

<!ENTITY fontstyle "TT | I | B | BIG | SMALL"> <!ENTITY phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

Данное определение объявляет нам два типа элементов: 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 обозначает «акцент». Вот тут всё должно стать предельно ясным: данным элементом мы акцентируем внимание пользователя на конкретном участке текста. «Акцент» может означать всё что угодно, но он и не должнен указывать, как отображать данный элемент, и это лишь соглашение, что он отображается курсивом. Синтезаторы речи могут на этом элементе изменять речевые характеристики именно для акцентирования внимания, а браузеры могут изменять характеристики шрифта, чтобы их выделить.

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

Меня зовут дядя Фёдор. Я из <em>Простоквашино</em>.

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

Элемент strong

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

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

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

Кот Матроскин очень любил свою корову и её молоко, но пёс Шарик был очень недоволен тем, что его становится <strong>слишком</strong> много!

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

Элемент abbr

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

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

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

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

Он работает на <abbr title="Простоквашинский тракторный завод" lang="ru">ПТЗ</abbr>.

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

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

Элемент acronym

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

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

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

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

Дядя Фёдор никогда не служил в <acronym>НАТО</acronym>.

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

Элемент cite

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

Пёс Шарик вычитал про охоту на зайцев в <cite>Wikipedia</cite>, но он ещё не применял полученные знания.

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

Элемент dfn

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

Например:

Как сказано в <cite>Wikipedia</cite>, <dfn id="dfn-milk">Молоко</dfn> — питательная жидкость, вырабатываемая молочными железами самок млекопитающих.

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

Элемент code

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

Пёс Шарик написал в файл myscript.rb следующую строку на Ruby: <code>puts "Hello, World"< /code>

Элемент kbd

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

Кот Матроскин набрал в своей консоли <kbd>ruby myscript.rb</kbd>.

Элемент samp

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

Пример:

После запуска программы Шарика, она вывела <samp>Hello, World!</samp>. Кот Матроскин обрадовался.

Вывод

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

Мнения (9)

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

  • pepelsbey

    22 июля 2008 г.05:51

    cite … помимо этого, в элементе может содержаться сам цитируемый текст

    Это домысел или где-то вычитано? Я тут не скепсис выражаю, мне правда интересно )

  • Дин автор

    22 июля 2008 г.16:22

    Вычитано:

    HTML 4:

    CITE:

    Contains a citation or a reference to other sources.

    Цитируемый текст, всмысле указание того, что цитируется.

    HTML 5:

    >A citation is not a quote (for which the q element is appropriate).

    Да, это понятно, уважаемый консорциум, но посмотрим на этот пример (там же):

    According to the Wikipedia article <cite>HTML</cite>, as it

    stood in mid-February 2008, leaving attribute values unquoted is

    unsafe. This is obviously an over-simplification.

    То есть имеется ввиду не ссылка на ресурс, который цитируется, а сам объект цитирования.

  • наташа

    22 июля 2008 г.20:02

    Элементарные вещи, но многие о них забывают.

    Спасибо за примеры с Простоквашино)

  • Александр

    22 июля 2008 г.20:10

    Спасибо за примеры. Всё очень подробно описано, прям загляденье.

    Теперь буду использовать только эти элементы при вёрстке.

  • Sam

    22 июля 2008 г.23:48

    Александр,

    не надо «только» :)

  • Дин

    23 июля 2008 г.00:19

    @Александр, о Боже! :-)

  • Сергей

    23 июля 2008 г.03:20

    «5+» — Замечательный труд!

  • Miscђka

    23 июля 2008 г.09:48

    картинок не хватает. И желательно отдельной статьей. И не про (X)HTML :)

    Я серьезно.

    Ну, на крайний случай — статью про картинки в (X)HTML. :)

  • Дин автор

    23 июля 2008 г.13:27

    Картинки не входят во фразовые элементы.

    «Чую подкол, но не знаю где он» ;-)

Я тоже знаю!

Для обращения к человеку используйте символ @, после которого следует имя того, к кому обращаетесь (пробелы заменяются на знак подчёркивания). Если вам интересно, можете подписаться на комментарии по RSS или по эл. почте. Ведите себя достойно, вы же не роботы, правда?

Вы можете использовать следующие XHTML-элементы в разметке комментария: strong, em, span[class=crossline], a[href=uri], code[type=язык], blockquote, ul и ol. В качестве языка кода может быть указан, например, javascript или css.