15. Разметка текстового контента в html

Рассматриваются основы использования HTML для описания значения контента в теле (body) документа. Рассмотрены общие структурные элементы, такие как заголовки и параграфы, вставка цитат и кода; строковый контент, такой как короткие цитаты и визуальное выделение. А также, кратко - устаревший контент представления

Введение

В этой лекции рассматриваются основы использования 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>

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