Еще больше семантики в HTML5: изменения в существующих свойствах

От автора: новые элементы и API в основном сосредоточились на HTML5, но в последней версии языка разметки есть и изменения в существующие элементы. В большинстве случаев внесенные изменения выполнены с обратной совместимостью, чтобы уже существующая разметка с контентом не поломалась.

Мы уже разбирали некоторые изменения (объявление doctype, кодировка, тип контента, например). Давайте рассмотрим другие значимые изменения, представленные в спецификации HTML5.

Слово «запрещен» запрещено

В предыдущих версиях HTML и XHTML элементы, которые больше не рекомендовали к использованию (и удалены из спецификации), считались «запрещенными». В HTML5 больше нет запрещенных элементов, есть «устаревшие».

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

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

Блочные элементы в ссылках

Раньше большая часть браузеров нормально переносила такую ситуацию, но размещать блочные элементы (типа div) в тегах a было неправильно. Чтобы не портить валидность HTML, вам нужно было использовать несколько тегов a и стилизовать эту группу в виде единого блока.

В HTML5 вам разрешено почти все помещать в тег a, и это не будет вызывать ошибок валидатора. Единственное ограничение – это другой интерактивный элемент типа полей формы, кнопок и других ссылок a.

Жирный текст

В HTML5 были внесены изменения, чтобы жирный текст задавался семантически. Раньше сделать текст жирным можно было двумя способами: использовать тег b или strong.

Тег b не был запрещен, но вместо него до HTML5 предпочитали использовать strong. Раньше тег b использовался, чтобы сказать «сделай этот текст жирным». HTML должен передавать значение контента, поэтому лучше не оставлять презентацию на CSS.

По спецификации в HTML5 тег b был переназначен и теперь представляет секцию текста, «к которой необходимо привлечь внимание в утилитарных целях без передачи дополнительной важности и без каких-либо подтекстов. В качестве примеров можно привести ключевые слова в кратком описании документа, имена товаров в обзоре, действенные слова в интерактивном ПО на основе текста, а также первый абзац статьи.

Смысл тега strong почти не изменился. В HTML5 он представляет «что-то очень важное, серьезное или актуальный контент». Интересен тот факт, что HTML5 спецификация позволяет вкладывать теги strong. Если все предложение – это важное сообщение, но отдельные слова имеют еще большую значимость, то можно обернуть все предложение в strong, а все важные слова завернуть в свои теги strong.

Курсивный текст

Помимо тегов b и strong изменениям подвергся элемент i.

Раньше тег i использовался просто для рендеринга курсивного текста. Как и с тегом b, его объявление было неудовлетворительным. В HTML5 определение обновили на «отрывок текста с другой интонацией или настроением, или сдвиг от нормального произношения таким образом, чтобы это указывало на другое качество текста». То есть внешний вид тега не имеет ничего общего с его семантическим значением, хотя его все еще можно использовать для курсива. Решать вам.

Пример контента, который можно выделить тегом i — идиоматическая фраза из другого языка. Например, латинская фраза «reductio ad absurdum», что означает «доведение до абсурда». Другие примеры – представление сна в художественном произведении или научное название вида в статье в журнале.

Тег em не изменился, но его определение стало шире и теперь четче описывает его использование. Он так и используется для постановки ударения в тексте, как в разговорной речи. Например, две фразы ниже написаны одинаково, но они имеют разную значимость из-за разного использования тега em:

В первом предложении слово «burger» выделено, поэтому ударение идет на тип «joint». Во втором предложении ударение на слове «is», поэтому ударение сдвигается к вопросу, а действительно ли гриль Гарри самый лучший для бургеров в городе.

Теги i и em нельзя использовать в заголовках статей. Вместо них можно использовать cite. Из четырех тегов (b, i, em и strong) только strong придает контекстной важности контенту.

Большой и маленький текст

Тег big раньше использовали для представления текста большим шрифтом. Теперь big является несоответствующим устаревшим тегом, и использовать его нельзя. Тег small все еще валидный, но имеет другое значение.

Раньше small использовался для «текста маленького шрифта». В HTML5 он представляет собой «сторонние комментарии, например, мелкий шрифт». Среди примеров использования можно выделить информацию в футере, мелкий шрифт, условия и положения. Тег small можно использовать только с маленькими отрывками текста. Поэтому small нельзя использовать для всего текста на странице «условия использования».

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

Например, в футере сайта The HTML5 Herald есть уведомление об авторских правах. По сути это юридическая информация, написанная мелким шрифтом, тег small подходит идеально:

Тег cite и боль в глазах

С самого начала переопределение тега cite в HTML5 столкнулось с трудностями. В HTML4 тег представлял собой «цитату или отсылку к другому ресурсу». В рамках определения спецификация разрешала использовать cite для выделения имен (в случае с цитатой, например, человек один).

Ранние версии спецификации HTML5 запретили использовать тег cite для выделения имени человека, тем самым пойдя против принципа обратной совместимости. Сейчас спецификация вернулась к более похожему на оригинал определению. Тег cite представляет собой «ссылку на работу, он должен включать заголовок работы или имя автора (один человек, несколько или организация), или URL, или ссылку в сокращенном виде».

Пример из спецификации:

Списки описаний (не определений)

Существующий тег dl (список определения) и его дочерние элементы dt (термин) и dd(описание) были переопределены в спецификации HTML5. Раньше помимо терминов и определений спецификация позволяла использовать dl для разметки диалогов, сейчас это запрещается.

В HTML эти списки больше не называются «списки определений». Теперь это более общие «списки описаний» или «списки ассоциаций». Их необходимо использовать для разметки любых пар имя-значение, в том числе терминов и определений, тем метаданных и значений, а также вопросов и ответов.

Пример использования CSS терминов и их определений:

Автор: Louis Lazaris

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (1)