В этой публикации мы затронем две важные темы — использование элемента span и создание наклонного и полужирного текста при помощи тегов em и strong. Вероятно вы узнаете кое-что новое и полезное. Запомнив и уловив тонкости однажды, в будущем вы будете применять эти элементы более корректно.

Использование элемента span

Элемент <span> -  второй из наиболее неверно понимаемых элементов в словаре HTML, после элемента блока. Может быть полезным думать об элементах span следующим образом: это строчный тег, который как бы является спасательным кругом в HTML и используется только после того, как применение всех других элементов в этой ситуации было исключено. Почти всегда есть более удачные решения.

Элемент span применяется только как крайняя мера, так как у него нет смыслового значения: нет возможности сказать, какое в нем находится содержимое. Элемент <span> совершенно бесполезен без применяемого к нему кода CSS: сам по себе он совершенно не влияет на отображение. Сочетание этих двух особенностей приводит к тому, что элемент span на сайте нужно использовать редко, обдуманно и аккуратно.

Типичный пример использования элемента <span> в блочном элементе — оборачивание содержимого, которому другим способом нельзя было бы задать стили CSS. Например:

<p>По какой-то причине нам нужно, чтобы определенное слово отображалось
<span class="special">иначе<span> в этом абазце.</p>

Конечно, сначала нам нужно было исключить все другие возможности перед тем, как применять элемент span, отказаться от применения такой строчной разметки, как: <dfn> (используется для определений) и <abbr> (используется для аббревиатур), <em> (используется для создания наклонного текста) и <strong> (используется для создания полужирного текста), к каждому из которых можно применить код CSS.

Создание наклонного и полужирного текста

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

По этой причине теги, использующиеся для разметки текста в коде HTML, имеют очень широкую область применения. Например, тег <em> выделяет текст. В большинстве случаев визуально содержимое этого тега отображается наклонно, а программы чтения текста выделят текст, зачитывая его громче.

Содержимое тега <strong> визуально отображается полужирно, и как и в предыдущем случае, в разных контекстах этот тег будет иметь разное значение.

Оба тега предназначены для применения на небольших количествах текста — одно-два слова или предложение — в абзаце длинной в несколько предложений. Если Вы сталкиваетесь со следующим кодом:

<p><em> ..  здесь много текста .. </em></p>

То в такой ситуации почти всегда лучше не использовать теги для создания наклонного или полужирного текста, а задать стили в коде CSS.

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

Спецификация HTML5 вновь вводит теги <b> и <i> для создания полужирного и наклонного текста соответственно, но мы бы рекомендовали по-прежнему продолжать использовать теги <strong> и <em> для этих целей, так как у них более широкая применимость и адаптивность.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селектора атрибута
• Использование элементов HTML col и colgroup
• Использование селектора элемента в CSS