Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
В то время как новые элементы и API были в центре внимания HTML5, эта последняя итерация веб-разметки также внесла изменения в существующие элементы. По большей части, любые сделанные изменения были сделаны с учетом обратной совместимости, чтобы гарантировать, что разметка существующего контента все еще может использоваться.
Мы уже рассмотрели некоторые изменения (например, объявление doctype, кодировка символов и типы содержимого). Давайте посмотрим на другие существенные изменения, внесенные в спецификацию HTML5.
Слово «Устаревший» устарело
В предыдущих версиях HTML и XHTML элементы, которые больше не были рекомендованы для использования (и поэтому удалены из спецификации), считались «устаревшими». В HTML5 больше не существует такой вещи, как устаревшие элементы; используемый сейчас термин «устарел».
Устаревшие элементы делятся на две основные категории: «соответствующие» устаревшие функции и «не соответствующие» устаревшие функции. Соответствующие функции будут выдавать предупреждения в валидаторе, но все равно будут поддерживаться браузерами. Таким образом, вы можете использовать их, но лучше избегать их использования.
Несоответствующие функции, с другой стороны, считаются полностью устаревшими и не должны использоваться. Они будут выдавать ошибки в валидаторе.
W3C имеет описание этих функций, с примерами.
Блокировать элементы внутри ссылок
Хотя в прошлом большинство браузеров хорошо справлялись с этой ситуацией, на самом деле никогда нельзя было разместить элемент уровня блока (например, div ) внутри элемента. Вместо этого для создания корректного HTML вам придется использовать несколько элементов a и стилизовать группу так, чтобы она отображалась как один блок.
В HTML5 вам теперь разрешено оборачивать практически все в элемент, не беспокоясь об ошибках валидации. Единственный контент блока, который вы не можете обернуть элементом — это другие интерактивные элементы, такие как элементы формы, кнопки и другие элементы a .
Жирный текст
Внесены некоторые изменения в семантическое определение жирного текста в HTML5. Существуют два способа сделать текст жирным в большинстве браузеров: с помощью элемента b или элемента strong .
Хотя элемент b никогда не считался устаревшим, до HTML5 его не поощряли в пользу strong . Элемент b ранее был способом сказать «сделать этот текст выделенным жирным шрифтом». Поскольку предполагается, что HTML полностью связан со смыслом содержимого, оставляя презентацию CSS, это было неудовлетворительно.
Согласно спецификации , в HTML5 элемент b был переопределен для представления фрагмента текста, «на который обращено внимание в утилитарных целях без какой-либо дополнительной важности и без использования альтернативного голоса или настроения». Приведены следующие примеры: ключевые слова в аннотации документа, названия продуктов в обзоре, полезные слова в интерактивном текстовом программном обеспечении или статья.
strong элемент, между тем, все еще передает более или менее то же самое значение. В HTML5 он представляет «сильную важность, серьезность или срочность для своего содержимого». Интересно, что спецификация HTML5 допускает вложение strong элементов. Таким образом, если целое предложение состоит из важного предупреждения, но некоторые слова имеют еще большее значение, предложение может быть заключено в один strong элемент, а каждое важное слово может быть заключено в свой собственный вложенный strong .
Текст, выделенный курсивом
Наряду с изменениями элементов b и strong были внесены изменения в способ определения элемента i в HTML5.
Ранее элемент i использовался для простой визуализации выделенного текста. Как и в случае с b , это определение было неудовлетворительным. В HTML5 определение было обновлено до «диапазона текста альтернативным голосом или настроением, или иным образом смещенного по сравнению с обычной прозой, что указывает на другое качество текста». Таким образом, внешний вид текста не имеет ничего общего с смысловой смысл, хотя он вполне может быть курсивом — это решать вам.
Примером содержимого, которое можно сместить с помощью тегов i может быть идиоматическая фраза из другого языка, например, reductio ad absurdum , латинская фраза, означающая « доведение до абсурда». Другими примерами может быть текст, представляющий последовательность сновидений в часть беллетристики, или научное название разновидности в статье журнала.
Элемент em не изменился, но его определение было расширено для пояснения его использования. Это все еще относится к тексту, который выделен, как было бы в разговорной речи. Например, следующие две фразы имеют одинаковую формулировку, но их значения меняются из-за разного использования em :
<p>Harry's Grill is the best <em>burger</em> joint in town.</p> <p>Harry's Grill <em>is</em> the best burger joint in town.</p>
В первом предложении, поскольку подчеркивается слово «бургер», значение предложения фокусируется на обсуждаемом типе «соединения». Во втором предложении акцент делается на слове «есть», поэтому акцент в предложении переносится на вопрос о том, действительно ли гриль Гарри является лучшим из всех гамбургеров в городе.
Ни i ни em следует использовать для обозначения названия публикации; вместо этого вы должны использовать cite .
Из всех четырех элементов, обсуждаемых здесь ( b , i , em и strong ), единственным, который придает контекстуальное значение своему содержанию, является strong элемент.
Большой и маленький текст
big элемент ранее использовался для представления текста, отображаемого крупным шрифтом. big элемент теперь является несоответствующей устаревшей функцией и не должен использоваться. small элемент, однако, все еще действителен, но имеет другое значение.
Ранее small предназначался для описания «текста мелким шрифтом». В HTML5 он представляет «побочные комментарии, такие как мелкий шрифт». Некоторые примеры, в которых можно использовать small , включают информацию в тексте нижнего колонтитула, мелком шрифте, а также в положениях и условиях. Небольшой элемент следует использовать только для коротких текстов. Таким образом, вы не будете использовать small чтобы разметить тело целой страницы «условий использования».
Несмотря на то, что small значения для презентации были удалены из определения, текст внутри small тегов, скорее всего, будет отображаться более мелким шрифтом, чем остальная часть документа.
Например, нижний колонтитул The HTML5 Herald содержит уведомление об авторских правах. Так как это по сути законный мелкий шрифт, он идеально подходит для small элемента:
<small>© SitePoint Pty. Ltd.</small>
cite для воспаленных глаз
Элемент cite был первоначально переопределен в HTML5, что сопровождалось некоторыми противоречиями. В HTML4 элемент cite представлял собой «цитату или ссылку на другие источники». В рамках этого определения спецификация позволяла пометить имя человека с помощью cite (в случае цитаты, приписываемой человеку, для пример).
Более ранние версии спецификации HTML5 запрещали использование cite для имени человека, что явно противоречит принципу обратной совместимости. Теперь спецификация вернулась к более сходному определению с оригинальным, определив ссылку как «ссылку на творческое произведение. Оно должно включать название произведения или имя автора (человека, людей или организации), или ссылку на URL, или ссылку в сокращенной форме ».
Вот пример, взятый из спецификации:
<p>In the words of <cite>Charles Bukowski</cite> - <q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>
Описание (не определение) Списки
Существующий элемент dl (список определений), а также связанные с ним дочерние элементы dt (term) и dd (description) были переопределены в спецификации HTML5. Ранее, в дополнение к терминам и определениям, спецификация позволяла элементу dl разметить диалог, но спецификация теперь запрещает это.
В HTML5 эти списки больше не называются «списками определений»; теперь они являются более «звучащими» «списками описания» или «списками ассоциаций». Их следует использовать для разметки любого вида пар имя-значение, включая термины и определения, темы и значения метаданных, а также вопросы и ответы.
Вот пример, использующий термины CSS и их определения:
<dl> <dt>Selector:</dt> <dd>The element(s) targeted.</dd> <dt>Property:</dd> <dd>The feature used to add styling to the targeted element, defined before a colon.</dd> <dt>Value:</dd> <dd>The value given to the specified property, declared after the colon.</dd> </dl>