Разметка текстового контента в HTML

Строковые элементы

В этом разделе рассматриваются синтаксис и использование распространенных строковых элементов для форматирования текста.

Короткие цитаты

Короткие цитаты, которые используются в обычной последовательности параграфа помещают внутрь элемента q. Подобно элементу blockquote, этот элемент может содержать атрибут cite, который указывает страницу в Интернет, где можно найти цитату.

Короткая цитата должна обычно изображаться со знаками кавычек. Согласно спецификации HTML (http://www.w3.org/TR/html401/struct/text.html#h-9.2.2.1), они должны вставляться агентом пользователя, чтобы их можно было корректно вставлять друг в друга и информировать о языке, использованном в документе. Можно использовать CSS для управления использованием знаков кавычек — это рассматривается в последующей лекции по "стилевому оформлению текста ".

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

<p>This did not end well for me. Oh well, 
              <q lang="fr">c'est la vie</q> as the French say.</p>

Выделение

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

Для текста, который необходимо выделить, используется элемент em следующим образом:

<p><em>Please note:</em> the kettle is to be unplugged at
              night.</p>

Если должно быть выделено все предложение, но в этом предложении есть место, которое должно быть выделено еще сильнее, то используется элемент strong, чтобы указать еще более сильное выделение, чем нормальное, следующим образом:

<p><em>Please note: the kettle <strong>must</strong> be unplugged every evening, otherwise it will explode -
<strong>killing us all</strong></em>.</p>

Выделение текста курсивом

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

Существует пара ситуаций, когда описание контента курсивом будет, пожалуй, правильным. Было замечено, что некоторые понятия лучше всего описываются "курсивом", а не путем создания некоторых специальных и никак иначе не используемых элементов. Сюда относятся такие понятия как названия кораблей, названия телевизионных сериалов, фильмов и книг, некоторые технические термины и другие таксономические обозначения.

Аргумент состоит в том, что использование курсива указывает, что текст внутри является специальным, а контекст указывает, в чем его специальность. На самом деле это отражено в текущем проекте спецификации HTML 5:

Элемент i представляет фрагмент текста альтернативным голосом или тональностью, или как-то иначе отклонится от обычной прозы [...] Элемент i должен использоваться как последнее средство, когда нет другого более подходящего элемента.

Так как элемент i можно переопределить с помощью CSS в что-то отличное от курсива, то значение "курсив" в этом контексте является по сути "чем-то немного отличным". Собственно я не считаю это приемлемым, но существует достаточно прецедентов для такого использования.

Элементы представления - никогда не используйте их

Спецификация HTML включает несколько элементов, которые обычно описываются как "элементы представления", так как они только определяют, как должен выглядеть размещенный в них контент, а не что он означает.

Некоторые из них были помечены как исключенные в спецификации. Это означает, что они были заменены более новыми методами для достижения того же результата.

Я опишу их здесь кратко, но обратите внимание, что это по большей части представляет исторический интерес — эти элементы никогда не должны использоваться на любой современной Web-странице. Результат всех этих элементов должен достигаться другим способом и будет описан в двух последующих лекциях. "стилевое оформление текста с помощью CSS" и о менее известных семантических элементов ( "лекция 21" ).

font face="..." size="..."

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

b

Текст в этом элементе должен быть жирным - это почти всегда означает, что текст был выделен, поэтому необходимо использовать элементы em или strong как показано ранее.

s и strike

Текст в этом элементе будет перечеркнут линией — если это только эффект представления, то этого можно добиться с помощью CSS. Альтернативно, если текст действительно был помечен для удаления или как нежелательный, то он должен быть помечен элементом del, описанным в будущей лекции.

u

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

tt

Текст в этом элементе представляется шрифтом "телетайпа" или моноширинным шрифтом - это можно реализовать с помощью CSS или более подходящего семантического элемента, такого как pre - как показано выше.

big и small

Размер текста внутри будет изменяться - это можно реализовать с помощью CSS.

Заключение

В этой лекции были рассмотрены некоторые из наиболее распространенных элементов, используемых при разметке текстового контента. В следующей лекции мы рассмотрим контент другого вида: списки объектов.

Об авторе

Марк Норман Френсис работает с Интернет с момента изобретения Web. Он работает в настоящее время в компании Yahoo! в качестве архитектора внешнего интерфейса для крупнейшего в мире Web-сайта, определяя лучшие методы, стандарты кодирования и качества разработки Web.

До Yahoo! он работал в Formula One Management, Purple Interactive и City University на различных должностях, включая разработку Web приложений, серверное программирование CGI и архитектура систем. Он приписывает себе блог по адресу http://marknormanfrancis.com/.

Источник: Andy Budd http://flickr.com/photos/andybudd/98405468/

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.