Определение терминов с помощью HTML

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

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

Blue (прилагательное)

Цвета неба в солнечный день. «Чистое голубое небо»

Но мы постоянно неформально определяем ключевые слова, например:

Firefox — веб-браузер, созданный Mozilla Foundation.

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

Как разметить неформальное описание

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

В HTML мы делаем то же самое, за исключением того, что HTML — не визуальный формат, поэтому жирный шрифт мы не используем. Мы используем <dfn> — специальный элемент для разметки первого появления ключевых слов. Обратите внимание: теги <dfn> окружают определяемое слово, а не определение (определение — это весь абзац):

<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>

Особый случай: аббревиатуры

Лучше специально размечать аббревиатуры с помощью <abbr>, чтобы программы чтения с экрана произносили их правильно и чтобы можно было единообразно работать со всеми аббревиатурами. Как и любое новое ключевое слово, аббревиатуру следует определить при первом появлении.

<p>
  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
  is a description language used to structure documents on the web.
</p>

Повышение доступности

<dfn> отмечает определяемое ключевое слово и указывает, что текущий абзац содержит его определение. Иными словами, между элементом <dfn> и его контейнером существует неявная связь. Если нужна более формальная связь или определение состоит всего из одного предложения, а не из всего абзаца, можно использовать атрибут aria-describedby, чтобы формально связать термин с его определением:

<p>
  <span id="ff">
    <dfn aria-describedby="ff">Firefox</dfn>
    is the web browser created by the Mozilla Foundation.
  </span>
  You can download it at <a href="https://www.mozilla.org">mozilla.org</a>
</p>

Вспомогательные технологии часто могут использовать этот атрибут, чтобы найти текстовую альтернативу для указанного термина. Атрибут aria-describedby можно использовать с любым тегом, содержащим определяемое ключевое слово (не только с элементом <dfn>). Атрибут aria-describedby ссылается на id элемента, содержащего описание.

Как создать список описаний

Списки описаний — это именно то, что следует из их названия: список терминов и соответствующих им описаний (например, списки определений, словарные статьи, часто задаваемые вопросы и пары «ключ — значение»).

Описываемые термины помещаются в элементы <dt>. Сразу за ними следует соответствующее описание, помещённое в один или несколько элементов <dd>. Весь список описаний оборачивается в элемент <dl>.

Простой пример

Вот пример с описанием видов еды и напитков:

<dl>
  <dt>jambalaya</dt>
  <dd>
    rice-based entree typically containing chicken, sausage, seafood, and spices
  </dd>

  <dt>sukiyaki</dt>
  <dd>
    Japanese specialty consisting of thinly sliced meat, vegetables, and
    noodles, cooked in sake and soy sauce
  </dd>

  <dt>chianti</dt>
  <dd>dry Italian red wine originating in Tuscany</dd>
</dl>

Улучшение визуального отображения

Вот как графический браузер отображает приведённый выше список:

Если вы хотите, чтобы ключевые слова выделялись сильнее, можно попробовать сделать их жирными. Помните: HTML — не визуальный формат; для всех визуальных эффектов нам нужен CSS. Здесь нам понадобится свойство CSS font-weight:

dt {
  font-weight: bold;
}

В результате получится немного более удобный для чтения вариант:

Подробнее

• <dfn>
• <dl>
• <dt>
• <dd>
• Как использовать атрибут aria-describedby