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

Введение

В этой лекции рассматриваются основы использования HTML для описания значения контента в теле ( body ) документа.

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

Пробел - последняя граница

Необходимо отметить один важный момент, прежде чем переходить к обсуждению текста, вопрос о пространстве, в частности, пространстве между словами. При записи HTML исходный документ будет содержать так называемые "разделители" — символы в файле, которые служат для разделения текста. Реальный символ пробела, который создается при нажатии клавиши пробела Spacebar на клавиатуре, является наиболее распространенным, но существуют и другие, такие как символ табуляции Tab и маркер между двумя отдельными строками в документе (называемый возвратом каретки или новой строкой).

В HTML несколько экземпляров таких символов (почти) всегда интерпретируется как один символ разделитель. Например:

<h3>In   the
                beginning</h3>

будет интерпретировано Web-браузером как эквивалент следующего текста:

<h1>In the beginning</h1>

Единственным местом, где это не действует, является элемент pre , который рассматривается подробнее позже в этой лекции.

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

Элементы блочного уровня

В этом разделе рассматривается синтаксис и использование общих элементов блочного уровня для форматирования текста.

Заголовки разделов страницы

Когда страница разбита на логические разделы, каждый раздел должен вводиться соответствующим заголовком. Это рассматривается подробнее в лекции 7, "Что нужно хорошей Web-странице".

HTML определяет шесть уровней заголовков: h1, h2, h3, h4, h5, и h6 (от наиболее важного до наименее важного). Говоря в общем, h1 будет основным заголовком всей страницы и вводит все содержимое. h2 используется затем для разбиения страницы на разделы, h3 на подразделы, и т.д.

Важно использовать уровни заголовков для описания документа в терминах разделов, подразделов, под-подразделов, так как это делает документ более понятным для считывателей экрана (http://www.accessibilitytips.com/2008/03/10/avoid-skipping-header-levels/) и для автоматических процессов (таких как робот индексации компании Google).

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

<h1>Разметка текстового контента ‚ основы </h1>
  <h2>Введение </h2>
  <h2>Пробел‚ последняя граница </h2>
  <h2>Элементы блочного уровня </h2>
    <h3>Заголовки разделов страниц </h3>
    <h3>Стандартные параграфы текста </h3>
    <h3>Цитирование других документов или источников </h3>
    <h3>Предварительно форматированный текст </h3>
  <h2>Строковые элементы </h2>

[... и т. д. ...]

Стандартные параграфы

Параграф является строительным блоком большинства документов. В HTML параграф представляют элементом p, который не имеет специальных атрибутов. Например:

<p>Это очень короткий параграф. Он содержит только два предложения.</p>

Параграф во многих статьях и книгах может содержать только одно предложение. Хотя значение (в терминах письменной прозы) " параграфа " достаточно четко, в Web значительно более короткая область текста часто помещается в элементы параграфа, так как автор считает, что это более "семантически правильно", чем использование элемента div (мы рассмотрим это в будущей лекции c названием "Базовые контейнеры").

Параграф является совокупностью из одного или нескольких предложений, также как в газетах и книгах. В Web лучше использовать элемент параграфа для этого, а не просто для произвольного куска текста на странице. Если это только несколько слов и даже не является предложением, тогда они, вероятно, не должны помечаться как параграф.

Цитирование других источников

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

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

Если цитата поступает с другой Web-страницы, можно указать это с помощью атрибута cite следующим образом:

<p>HTML 4.01 is the only version of HTML that you should use 
when creating a new web page, as, according to the specification:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
<p>This document obsoletes previous versions of HTML 4.0,
although W3C will continue to make those specifications and
their DTDs available at the W3C Web site.</p>
</blockquote>

Атрибут cite не требуется в том случае, когда цитата берется из книги, журнала, или другой формы несетевого контента.

Предварительно форматированный текст

Любой текст, в котором форматирование и разделители (см. ранее) имеют значение, должен быть размечен с помощью элемента pre .

В большинстве Web-браузеров текст, помеченный как предварительно форматированный, будет выводиться пользователю в том же виде, как он представлен в источнике, иногда с помощью шрифта фиксированной ширины (моноширинный), что придает тексту вид как бы отпечатанного на машинке. Это является наследием программистов, которые использовали ранее шрифты фиксированной ширины для представления предварительно форматированного текста.

В следующем примере можно видеть фрагмент кода, написанного на языке программирования perl.

<pre><code class="language-perl">
# read in the named file in its entirety
sub slurp {
  my $filename = shift;
  my $file     = new FileHandle $filename;
                
  if ( defined $file ) {
    local $/;
    return <$file>;
  }
  return undef;
};
</code></pre>

Использование приведенного выше кода будет объяснено в лекции 21 о менее известных семантических элементах позже в этом курсе.

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

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

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

Короткие цитаты, которые используются в обычной последовательности параграфа помещают внутрь элемента 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 можно переопределить с помощью CSS в что-то отличное от курсива, то значение "курсив" в этом контексте является по сути "чем-то немного отличным". Собственно я не считаю это приемлемым, но существует достаточно прецедентов для такого использования.

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

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

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

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

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

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

b

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

s и strike

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

u

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

tt

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

big и small

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

Заключение

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

Об авторе