Менее известные семантические элементы

Введение

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

Выделение контактной информации

Элемент address является, вероятно, самым плохо названным и понятным элементом в HTML. На первый взгляд с таким названием как " address " может показаться, что он используется для инкапсуляции адресов, почтовых адресов, e-mail, или чего-то аналогичного. Но это только частично так.

Реальное назначение элемента address состоит в предоставлении контактной информации авторов страницы или основного раздела страницы. Он может принимать форму имени, адреса e-mail, почтового адреса, или ссылки на другую страницу с дополнительной контактной информацией. Например:

<address> 
  <span>Mark Norman Francis</span>, 
  <span class="tel">1-800-555-4865</span>
</address>

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

<p class="footer">© Copyright 2008</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>

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

Неправильно использовать элемент address для указания других типов адресов, такого как следующий:

<p> Our company address: </p>
  <address>
    Opera Software ASA,
    Waldemar Thranes gate 98,
    NO-0175 OSLO,
    NORWAY
  </address>

(Конечно, если компания Opera принимает коллективную ответственность за эту статью, это будет правильно, даже если у конкретной страницы имеется конкретный автор.)

Для любого общего адреса можно использовать так называемое "микроформатирование", чтобы указать, что параграф содержит адрес. Дополнительную информацию о "микроформатировании" можно найти в других статьях на сайте dev.opera.com (http://dev.opera.com/articles/html/).

Языки программирования и код

Элемент code используется для указания компьютерного кода или языка программирования, такого как PHP, JavaScript, CSS, XML и т.д. Для кратких фрагментов внутри предложения можно просто разместить элемент вокруг фрагмента кода следующим образом:

<p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>

Для более значительных образцов кода, которые занимают несколько строк, можно использовать предварительно форматированные блоки, как показано в лекции 15, "Разметка текстового контента в HTML".

Хотя не существует определенного метода указания, какой язык программирования или код показан в элементе code, можно использовать атрибут class. Обычная практика (упомянутая в проекте HTML 5) состоит в использовании префикса language- и затем добавлении названия языка. Поэтому пример выше будет выглядеть следующим образом:

<p>It is bad form to use event handlers like 
<code class="language-javascript">onclick</code>
directly in the HTML.</p>

Некоторые языки программирования имеют названия, которые не так просто представить в классах, такие как C# (C-шарп). Правильный способ записи в этом случае будет "class='language-c\#'", что может создавать трудности и приводить к опечаткам. Я бы рекомендовал использовать класс, состоящий только из букв и дефисов, и записывать его полностью. Поэтому в данном случае используйте лучше "class='language-csharp'".

Вывод взаимодействия с компьютером

Два элемента samp и kbd можно использовать для ввода и вывода взаимодействия с компьютерной программой. Например:

<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p>

<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
  <samp>PING google.com (64.233.187.99): 56 data bytes
  64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms

  --- google.com ping statistics ---
  1 packets transmitted, 1 packets received, 0% packet loss
  round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
  </samp></pre>

Элемент samp указывает образец вывода из компьютерной программы. Как показано в этом примере, различные типы вывода можно указывать с помощью атрибута class. Однако не существует широко принятых соглашений, какие виды классов использовать.

Элемент kbd указывает ввод взаимодействия пользователя с компьютером. Хотя это традиционно ввод с клавиатуры (поэтому используется сокращение "kbd" ), он должен также использоваться для указания других типов ввода, таких как ввод с голоса.

Переменные

Элемент var используется для указания переменных в текстовом контенте. Он может включать алгебраические математические выражения или находиться в программном коде. Например:

<p>The value of <var>x</var> in
 3<var>x</var>+2=14 is 4.</p>
    
<pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code></pre>

Цитирование

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

<p>The saying <q>Everything should be made as simple as possible,
but not simpler</q> is often attributed to <cite>Albert
Einstein</cite>, but it actually a paraphrasing of a quote which
is much less easy to understand.</p>

Аббревиатуры

Элементы abbr и acronym используются для указания места, где используется аббревиатура, и предоставляют метод их раскрытия без ненужного прерывания потока документа.

Текст аббревиатуры заключается в элемент abbr , а полная версия помещается в атрибут title следующим образом:

<p>Styling is added to 
<abbr title="Hypertext Markup Language">HTML</abbr> documents
using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

Акроним является разновидностью аббревиатуры, с разницей в том, что результат считается, и произносится, как если бы он был реальным словом. Примером является слово scuba, которое сформировано из фразы "self-contained underwater breathing apparatus" (автономный аппарат для дыхания под водой).

Хотя спецификация HTML 4.01 разрешает оба элемента abbr и acronym, существуют некоторые проблемы при попытке сделать здесь все правильно …

Internet Explorer (до версии 8) не распознает элемент abbr , но распознает acronym. К сожалению акронимы являются подмножеством аббревиатур и будет неправильно помечать что-нибудь типа "HTML" с помощью элемента acronym.

Также в черновом проекте HTML 5 элемент acronym был опущен в пользу стандартизации элемента abbr , так как любой акроним является также аббревиатурой.

Лучше всего избегать использования acronym и использовать везде в коде abbr . Если потребуется применить некоторое визуальное оформление для abbr , можно поместить в него элемент span и указывать его вместо abbr , чтобы все браузеры применяли визуальное оформление. Дополнительное описание будет дано в будущей лекции по "стилевому оформлению текста".

Определение экземпляров

Существует некоторая путаница с правильным использованием элемента dfn, который описан в спецификации HTML как "определение экземпляра вложенного термина". Это удивительно близко к идее элемента dl (термин определения), используемого в списках определений.

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

Поэтому, например, если в тексте многократно встречается аббревиатура HTML, то использование всякий раз кода "<abbr title="HyperText Markup Language">HTML</abbr>", было бы избыточным, визуально отвлекающим и для пользователей считывателей экрана, возможно, утомительным, когда HTML раскрывался бы снова и снова, хотя они уже и слышали, что он означает.

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

<p><dfn><abbr>HTML</abbr></dfn> ("HyperText Markup Language") is 
a language to describe the contents of web documents. [...]</p>

Затем в дальнейшем, когда используется аббревиатура HTML, ее можно пометить просто как "<abbr>HTML</abbr>". Агент пользователя может затем предоставить пользователю некоторый метод извлечения определяющего экземпляра этой аббревиатуры. К сожалению пока ни один агент пользователей в настоящее время этого не делает, включая считыватели экрана. Было бы лучше, поэтому, использовать атрибут title.

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> 
("HyperText Markup Language") is a language to describe the contents of web documents. [...]</p>

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

Я бы предложил считать это допустимым компромиссом, когда имеется только один или два объекта, требующих определения. Если вы этим специально озабочены, можно использовать вместо этого следующий код:

<p><abbr title="HyperText Markup Language">HTML</abbr> 
(<dfn>HyperText Markup Language</dfn>) is a language to 
describe the contents of web documents. [...]</p>

Однако агент пользователя должен тогда делать предположение, когда он видит только один элемент dfn, к чему он относится. В настоящее время ни один агент пользователя в действительности не делает ничего полезного с элементом dfn, поэтому это может оказаться приемлемым.

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

Это неудачное решение, когда спецификация была создана без четких рекомендаций о том, как предполагается использовать элемент, и, вероятно, не основывалась на каких-либо реальных применениях этого элемента — иначе был бы метод соединения термина с его полным описанием или определением. Спецификация HTML 5 содержит значительно больше деталей об использовании dfn, но она находится все еще в стадии чернового проекта и пока не подходит для приложения в Web.

Верхние и нижние индексы

Чтобы пометить часть некоторого текста как верхний или нижний индекс (слегка выше или ниже по сравнению с остальным текстом), используют элементы sup и sub .

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

Пример применения обоих элементов:

<p>The chemical formula for water is H<sub>2</sub>O, and it
is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived
by Albert Einstein is E=mc<sup>2</sup> - energy 
is equal to the mass multiplied by the speed of light 
squared.</p>

Разрыв строки

В связи с тем, как HTML определяет разделитель, невозможно управлять разрывом строк текста (как в случае разметки почтового адреса в качестве параграфа, но с представлением каждой части адреса на отдельной строке) простым нажатием клавиши Enter во время записи текста.

Разрыв строки можно ввести в документ с помощью элемента br. Однако он должен применяться для принудительного разрыва строки, там где это требуется, а не для увеличения вертикального интервала между параграфами или чего-то подобного в документе — это более правильно делается с помощью CSS.

Иногда может быть легче использовать блок предварительно форматированного текста, а не вставлять элементы br. Или, если необходимо определенную часть некоторого текста представить на отдельной строке, но это, в общем-то, вопрос стилевого оформления, его можно поместить в элемент span и задать его вывод как элемента блочного уровня.

Поэтому, например, можно написать показанный ранее контактный адрес компании Opera следующим образом:

<p>Our company address: </p>
<address>
Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
NO-0175 OSLO,<br>NORWAY
</address>

Естественно, если используется XHTML, а не HTML, то элемент должен записываться следующим образом: <br />.

Горизонтальная линейка

Горизонтальная линейка создается в HTML с помощью элемента hr. Он вставляет в документ линию, которая должна представлять границу между различными разделами документа.

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

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

Элемент hr не имеет необычных атрибутов и должен оформляться с помощью CSS, если обычного представления будет недостаточно.

Как и для разрыва строки, при использовании XHTML, а не HTML, используйте <hr />.

Изменения в документах (вставка и удаление)

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

Новый текст (вставки) должен быть заключен в элемент ins. Текст, который был удален (удаления) должен быть заключен в элемент del. Если текст изменился, что в действительности является удалением и вставкой в одной точке документа, правильная форма предполагает сначала удаление текста, а затем вставку.

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

Если причина изменения сообщается на странице или где-то в Web, необходимо сделать ссылку на этот документ или фрагмент в атрибуте cite. Он, по сути, сообщает: "Это изменение произошло по следующей причине".

Можно также указать время, когда было сделано изменение, используя атрибут ).

Пример использования обоих атрибутов:

<p>We should only solve problems that actually arise. As
  <cite><del datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">Donald Knuth</del><ins
  datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
  said: <q>premature optimization is the root of all 
  evil</q>.</p>

Некоторые будущие элементы HTML

Как отмечалось несколько раз в этой и некоторых других статьях, в данный момент создается предложение по HTML версии 5 (http://www.w3.org/html/wg/html5/). Это будет наиболее радикальное обновление HTML с момента его возникновения.

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

Примеры нескольких элементов, намеченных для введения в HTML, которые могли бы реально улучшить способ кодирования и использования документов, включают:

Существуют и другие элементы, которые можно найти в самой спецификации HTML 5 (http://www.whatwg.org/specs/web-apps/current-work/).

Заключение

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

Об авторе