Разметка текстового контента в 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" о менее известных семантических элементах позже в этом курсе.