Осваиваем текст

В настоящее время все еще встречается применение тега <br> для определения параграфов, когда следует использовать тег <p>, так как именно этот тег предназначен для создания параграфа. Следуя той же логики, существует множество тегов для определения специфических элементов, которые, тем не менее, лишены внимания (например, цитаты, аббревиатуры, программный код).

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

Аббревиатуры и акронимы

Тег <abbr> и тег <acronym> используются для определения соответственно аббревиатур и акронимов.

Аббревиатура – это укороченная форма слова или словосочетания, образованное из первых букв слов словосочетания. А акроним – это аббревиатура, составленная из начальных звуков и которую можно произнести слитно.

Для оптимальной доступности, в атрибут title тегов аббревиатур и акронимов следует определять соответствующую исходную фразу:


<p>
   Этот вебсайт посвящен <abbr title="HyperText Markup Language">HTML</abbr> и
   <acronym title="Телеграфное агентство Советского Союза">ТАСС</acronym>.
</p>

По каким-то непонятным причинам Internet Explorer, самый распространенный браузер не поддерживает тег <abbr>. Поэтому споры на тему целесообразности использования тегов аббревиатур и акронимов не утихают до сих пор.

Цитаты

Тег <blockquote>, тег <q> и тег <cite> используются для определения цитат. Тег <blockquote> создает блочный элемент и используется для определения больших цитат, в то время как тег <q> создает строчный элемент и используется для цитат небольшого размера. Тег <cite> также создает строчный элемент и из-за своей семантической природы более предпочтителен по сравнению с тегом <q>, который возможно в будущем перейдет в категорию нежелательных тегов.

Здесь также можно использовать атрибут title, в котором определяют источник цитаты.

Внимание: тег <q> внешне никак не меняет, заключенный в нем текст. Поэтому чтобы задать ему какой-нибудь стиль, придется воспользоваться CSS.


<p>
   Я спросил Сергея о цитатах, и он ответил
   <cite>О цитатах я знаю столько же сколько и о мышлении птиц</cite>.
   К счастью я нашел хороший учебник...
</p>

<blockquote title="Из учебника">
    <p>
       Теги blockquote, q и cite используются для определения цитат.
       Тег blockquote создает блочный элемент и используется для определения больших цитат,
       в то время как тег q создает строчный элемент и используется для цитат небольшого размера.
   </p>
</blockquote>

Программный код

Существует несколько тегов, тем или иным образом определяющих вывод внутреннего кода программы – это тег <code> и тег <var>, использующиеся для отображения программного кода, а также тег <pre> и тег <samp>, которые, в принципе, также используются в основном для отображения кода.

Тег <code> отмечает текст как фрагмент программного кода.

Тег <var> используется для выделения переменной в листинге программы.


<code>
   <var>ronankeatingisbland</var> = true;
</code>

Тег <samp> похож на тег <code>, однако предназначен для пометки текста, как образца.

Тег <pre> обрамляет предварительно отформатированный текст. Он необычен тем, что внутри него сохраняются абсолютно все пробельные символы. Обычно его используют для отображения блоков кода.


<pre>
   &lt;div id="intro"&gt;
   &lt;h1&gt;Заголовок&lt;/h1&gt;
   &lt;p&gt;Параграфный параграф.&lt;/p&gt;
   &lt;/div&gt;
</pre>

Определения

Тег <dfn> отмечает текст как определение и используется, чтобы отмечать термин, впервые встречающийся в документе. Как и в случае с другими тегами, здесь в атрибуте title можно определять описание термина.


<p>
   <dfn title="Мутация, при которой сочетается два или больше наборов хромосом представителей разных видов">Аллополиплоид</dfn> - это…
</p>

Адреса

Тег <address> должен использоваться для идентификации информации об адресе.


<address>
   г. Гдеград<br />
   ул. Кудыкина<br />
   д. 160, кв. 8
</address>

Некоторые редкости

Есть несколько тегов, которые стоит упоминания, но из-за своей чрезвычайной специфичности используются очень редко.

Тег <bdo> может использоваться для изменения направления текста, что позволяет отображать языки, в которых читают справа налево. Значение обязательного атрибута dir может быть либо ltr (слева направо) или rtl (справа налево).


<bdo dir="rtl">lmth</bdo>

Тег <kbd> отмечает текст, вводимый пользователем с клавиатуры.


<p>
   Теперь введите: <kbd>здорово</kbd>
</p>

Тег <ins> и тег <del> используются для отображения соответственно редакторских вставок и удалений текста. У них могут быть атрибуты datetime (дата в формате ГГГГММДД) и cite (URL на описание того, почему были сделаны эти вставки и удаления).

Обычно элементы <ins> отображаются подчеркнутыми, а элементы <del> – перечеркнутыми.


<p>
   Очевидно, что это <del datetime="20030522">чепуха</del> <ins cite="http://www.msiter.ru">очень информативна</ins>.
</p>

Элементы представления

Теги <b>, <i>, <tt>, <sub>, <sup>, <big>, <small> относятся к тегам представления и в связи с этим не должны использоваться там, где применяется принцип разделения представления и содержимого. Например, тег <b> определяет в элементе жирный шрифт, что не несет никакого значения для содержимого – этот тег определяет чисто визуальные характеристики, что должно быть работой CSS. Хотя все эти теги и имеют силу, но существуют другие теги, действительно добавляющие значение содержимому. Если вы хотите применить к элементу какой-нибудь стиль, не придавая значения содержимому, то лучше определить тег <span> с последующим определением для него стиля CSS.