Всем известно, что теги <b>, <i>, <s>, <small> являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы <strong>, <em>, <del>. Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5. Теперь у нас 4 новых тега со смыслом и каша в голове.

<b> vs <strong>

Если раньше все учебники по вёрстке пестрили фразами вроде «используйте <strong> вместо <b>», и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать <b> для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

и лидов (первый абзац статьи в журналистике)

<article>

 <h2>Kittens 'adopted' by pet rabbit</h2>

 <p><b class="lede">Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.</b></p>

 <p>Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.</p>

</article>

В свою очередь <strong>, как и раньше, означает повышенную значимость своего содержимого.

<i> vs <em>

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

<i>Per aspera ad Astra</i> — в переводе с латыни изречение означает «Через тернии к звёздам».

<em> же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)

Казнить <em>нельзя</em>, помиловать.

Внимательно читайте договор!

«Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — <small>.

Холивар о <s>

Раньше <s> был ни чем иным, как зачёркнутый текст. Теперь <s> представляет информацию, которая утратила свою актуальность.
У нас также есть элемент <del>, результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.
На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом <s>. Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не <del>? <del> подразумевает изменения, внесённые в документ(важно то, что в некоторый момент времени документ был изменён). В нашем же случае, в новом документе уже содержится неактуальная информация.

Новая семантика и старый доктайп

Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме <s> даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.