Структурирование текста в HTML
В этой главе:
- Элементы фразы
- Цитаты: элементы Q и BLOCKQUOTE
- Элементы SUB и SUP
- Элементы INS и DEL
- Элементы LISTING, PLAINTEXT, XMP
Для структуризации текста в языке HTML предусмотрен целый ряд элементов. Часто их называют элементами логического форматирования, поскольку они как бы указывают на принадлежность слова или фразы к той или иной языковой конструкции. Элементы для структурной разбивки следует отличать от элементов визуального форматирования (выравнивания, гарнитуры и оформления шрифта и т.д.) – для этих целей существуют таблицы стилей.
Элементы фразы
Элементы фразы определяют способ структурирования текста, или, иначе говоря, добавляют в документ информацию о структуре текста. К элементам фразы в HTML и XHTML относятся: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR и ACRONYM. Предназначение всех этих элементов, а так же типичный формат вывода браузерами приводятся в таблице 2.18.
| Элемент | Что означает | Как выводится |
|---|---|---|
| em | Акцентирование фрагмента текста | Курсивом |
| strong | Сильное акцентирование фрагмента текста | Полужирным начертанием |
| cite | Идентифицирует цитату | Курсивом |
| dfn | Определение термина | Курсивом |
| code | Выделяет текст программы или фрагмент любого другого машинного кода в документе | Моноширинным шрифтом |
| samp | Выделяет данные, выводимые программой | Моноширинным шрифтом |
| kbd | Обозначает текст, который должен быть введен пользователем с клавиатуры | Моноширинным шрифтом |
| var | Определяет переменную или аргумент программы | Курсивом |
| abbr | Идентифицирует аббревиатуру | Обычным шрифтом |
| acronym | Идентифицирует акроним (слово, составленное из первых букв слов некоторой фразы) | Обычным шрифтом |
На самом деле, браузеры могут по-разному форматировать текст, заключенный в эти элементы. Так, первые версии Internet Explorer почти все данные элементы выделял полужирным шрифтом. Тем не менее, в последних версиях как MSIE, так Netscape, Mozilla и Opera наблюдается редкостное единодушие по этому вопросу: указанный в таблице 2.16 стиль вывода будет одинаковым на все 100%. Для примера можно посмотреть, как это выводит Mozilla Firefox (рис. 2.10).
Рис. 2.10. Выделение различных элементов фразы графическим браузером
Набор атрибутов для этих элементов стандартен и состоит из «джентльменского набора», определенного для всех элементов. Приведем его еще раз (таблица 2.19).
| Атрибут | Примечание | Описание |
|---|---|---|
| id, class | Общие | Идентификаторы элемента |
| lang, dir | Общие | Информация о языке и направление текста |
| title, style | Общие | Определяют заголовок и стиль элемента |
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Общие | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
Свойства EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR и ACRONYM
Закрывающий тег: требуется.
Совместимость: ABBR – все, кроме MSIE 6, остальные – все.
Вложение: недопустимо.
Уникальный: нет.
Цитаты: элементы Q и BLOCKQUOTE
Для выделения в тексте цитат и высказываний используются элементы Q и BLOCKQUOTE. Элемент Q применяется для заключения в кавычки слова или фразы, а BLOCKQUOTE – для выделения достаточно объемной цитаты в качестве абзаца с отступом от края. При этом элемент Q является строковым (inline), а BLOCKQUOTE, соответственно, блочным.
<q>краткое высказывание</q>
<blockquote>
Большое высказывание, занимающее, как правило,<br />
несколько строк
</blockquote>
К сожалению, элемент Q не распознается браузерами 4-го поколения, и, соответственно, до сих пор не поддерживается надлежащим образом в MSIE 6 и 7. Так, фрагмент текста, заключенного в контейнер Q, при выводе браузером должен заключаться в кавычки. Opera 6 и все Mozilla-браузеры так и делают, но в Internet Explorer полноценная поддержка элемента Q была реализована лишь в 8-й версии. На рис. 2.11 показано форматирование элементов Q и BLOCKQUOTE в Netscape 7.
Рис. 2.11. Цитаты в Netscape 7
Теоретически (по стандарту HTML 4.01), браузеры не обязательно должны создавать отступ для текста, помещенного в контейнер BLOCKQUOTE. Однако на практике они это делают по той причине, что до недавнего времени среди создателей страниц была распространена порочная практика использовать данный элемент для создания отступа от края страницы для абзацев или даже для страницы целиком. На самом деле для создания отступов следует применять таблицы стилей в сочетании с элементами уровня блока (например, DIV). Поскольку до плотного исследования CSS мы еще не дошли, то перейдем к изучению атрибутов рассматриваемых элементов, для чего обратимся к таблице 2.20.
| Атрибут | Примечание | Описание |
|---|---|---|
| id, class | Общие | Идентификаторы элемента |
| lang, dir | Общие | Информация о языке и направление текста |
| title, style | Общие | Определяют заголовок и стиль элемента |
| cite | - | Указывает URI оригинального (цитируемого) документа |
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Общие | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
Очевидно, что набор атрибутов все тот же, что и у предшествующих элементов, исключение составляет лишь CITE, который позволит человеку, изучающему код страницы, обратиться к первоисточнику.
Свойства Q и BLOCKQUOTE
Закрывающий тег: требуется.
Совместимость: BLOCKQUOTE – все, Q – Mozilla, Opera, MSIE 8.
Вложение: допустимо.
Уникальный: нет.
Элементы SUB и SUP
Иногда для более наглядного представления текста необходимо приподнять или приспустить какой-либо символ или слово относительно всей строки. Для этих целей применяются, соответственно, элементы SUP и SUB. Рассмотрим применение этих элементов на примере (листинг 2.21).
Листинг 2.21. Применение верхнего и нижнего индексов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Верхний и нижний индексы</title>
</head>
<body>
<p>Химические формулы: H<sub>2</sub>O; C<sub>2</sub>H<sub>5</sub>OH</p>
<p>Математические выражения: 5<sup>3</sup>=625; F<sub>(x)</sub></p>
<p>Время работы: 9<sup>30</sup> – 21<sup>00</sup></p>
<p>Торговые знаки: Microsoft<sup>®</sup></p>
</body>
</html>
Браузеры выводят символы верхнего и нижнего индексов шрифтом чуть меньшего кегля, чем остальной текст (рис. 2.12). Если вам по каким-либо причинам надо изменить такое поведение, то можно явно задать размер шрифта для этих элементов, используя таблицы стилей.
Рис. 2.12. Элементы SUB и SUP в действии
В этом примере мы впервые столкнулись с &-последовательностями – специальными ссылками на символы, которые могут отсутствовать в основной раскладке клавиатуры. Здесь это знак тире (–) и знак торговой марки (®). В принципе, любые текстовые символы можно указывать при помощи ссылок, но на практике применяют лишь некоторые из них. Список ссылок на символы приведен в приложении Б.
Что касается атрибутов, то поскольку для SUB и SUP предусмотрен лишь стандартный их набор (id, class, lang, dir, title, style и атрибуты поведения), то приводить лишнюю таблицу мы здесь не будем.
Свойства SUB, SUP
Закрывающий тег: требуется.
Совместимость: все.
Вложение: допустимо.
Уникальный: нет.
Элемент PRE
Элемент PRE обозначает блок предварительно отформатированного текста. Он стоит несколько особняком от иных элементов разметки и форматирования. Дело в том, что это – единственный элемент, который заставляет браузер воспринимать текст так, как он введен в HTML-файл, с сохранением всех пробелов, символов табуляции и переноса строк. Текст, заключенный между тегами <PRE> и </PRE> выводится моноширинным шрифтом. Все это делает PRE идеальным выбором для того, чтобы выводить тексты программ, например, как это показано в листинге 2.22.
ВНИМАНИЕ
Хотя элемент PRE является элементом уровня блока, он не может содержать ряд других элементов, в частности img, object, big, small, sub и sup.
Листинг 2.22. Элемент PRE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Предварительно отформатированный вывод</title>
</head>
<body>
<h4>Часть программы на Object Pascal</h4>
<p>Предварительно отфорамтированный текст (PRE):</p>
<pre>
function NewWindowProc(WindowHandle : hWnd;
TheMessage : LongInt;
ParamW : LongInt;
ParamL : LongInt) : LongInt stdcall;
var
S: string;
PC: array [0..255] of Char;
A: atom;
begin
if TheMessage = MyMsg then begin
...
end;
</pre>
</body>
</html>
При просмотре этого документа (файл preformatted.html) в браузере мы увидим фрагмент кода точно таким же, как в исходном файле (рис. 2.13).
Рис. 2.13. Вывод предварительно отформатированного текста
Элемент PRE имеет стандартный набор атрибутов (id, class, lang, dir, title, style и атрибуты поведения). Кроме того, стандартом HTML 4 предусмотрен атрибут WIDTH, обозначающий ширину выводимого текстового блока в символах. Однако он объявлен устаревшим, и поддерживается только Mozilla-браузерами.
Свойства PRE
Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.
Элементы INS и DEL
Для выделения добавляемых или удаляемых фрагментов документа используют элементы INS и DEL. Подобный подход, связанный с сохранением удаленных фраз и выделением добавленных может пригодиться, например, в юриспруденции для просмотра изменений и в иных подобных случаях. Как правило, браузеры выводят находящийся в контейнере INS текст подчеркнутым, а в DEL – зачеркнутым. Но, опять-таки, вы можете переопределить стиль отображения текста при помощи таблиц стилей.
Еще одно замечание, касающееся этих элементов состоит в том, что они могут быть как блочными, так и строковыми, в зависимости от того, что в них содержится. Так, если, скажем, элемент DEL содержит лишь несколько слов, то он будет строковым:
Строка текста, содержащая <del>удаленный фрагмент</del>.
Если же в него попадут параграфы, таблицы или иные элементы уровня блока, то браузер сочтет его блочным:
<del>
<p>Здесь отсутствует целый параграф!</p>
</del>
Соответственно, все ограничения, налагаемые на вложение различных типов элементов, остаются в силе: приведенный в листинге 2.23 код недопустим, поскольку элемент P не может содержать в себе иных элементов уровня блока.
Листинг 2.23. Неверное использование DEL
<html>
<head>
<title>INS и DEL</title>
</head>
<body>
<p>Первый абзац мы трогать не будем</p>
<p>А вот второй абзац,
<del>из которого мы удалим эту строку
<div>И эту часть тоже удалим!</div>
</del>
</p>
<ins><p>Зато добавим новый!</p></ins>
</body>
</html>
В данном случае ошибка заключается в том, что элемент DEL содержит недопустимый в данном случае элемент DIV, поскольку в этом примере он является строковым (т.к. вложен в контейнер P, для которого допустимо лишь строковое содержимое). В то же время элемент INS, вложенный в данном случае непосредственно в BODY, может быть блочным и в данном случае является им, поскольку содержит другой блок (P). Чтобы исправить допущенную ошибку, достаточно «поднять» DEL выше по иерархии документа:
<del>
<p>А вот второй абзац,
из которого мы удалим эту строку
<div>И эту часть тоже удалим!</div>
</p>
</del>
Теперь с DEL проблем нет, но в данном случае остается проблема с вложением DIV в P. Поэтому следует исправить порядок вложения DIV и P:
<div>А вот второй абзац,
<del>из которого мы удалим эту строку
<p>И эту часть тоже удалим!</p>
</del>
</div>
Теперь все правильно – DEL теперь вложен в DIV, который может содержать любые элементы, и, следовательно, здесь DEL становится элементом уровня блока и может содержать в себе P.
Теперь перейдем к атрибутам. Помимо стандартных для всех элементов атрибутов, INS и DEL имеют два собственных – CITE и DATETIME, их описание приведено в таблице 2.21.
| Атрибут | Примечание | Описание |
|---|---|---|
| id, class | Общие | Идентификаторы элемента |
| lang, dir | Общие | Информация о языке и направление текста |
| title, style | Общие | Определяют заголовок и стиль элемента |
| cite | - | Указывает URI документа, на основании которого внесено изменение |
| datetime | - | Указывает дату и время внесения изменения |
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Общие | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
Если содержимое атрибута CITE вопросов не вызывает – это обычный URI, то со временем имеется некоторая накладка. Ранее, при исследовании элемента META было сказано, что время должно быть указано в формате «День недели, число месяц год часы:минуты:секунды часовой пояс», т.е., к примеру, «Mon, 23 Aug 2004 15:00:00 GMT». Однако это было скорее исключением из правил: во всех других случаях дату в атрибутах HTML следует писать в ином формате: «год-месяц-числоTчасы: минуты:секунды±смещение от времени по Гринвичу». В итоге мы получаем:
<ins cite="http://www.book.ru/news.html" time="2004-08-23T15:00:00"> </ins>
Свойства INS и DEL
Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.
Элементы LISTING, PLAINTEXT, XMP
Для вывода предварительно отформатированного текста, помимо PRE, в ранних версиях HTML были определены элементы LISTING, PLAINTEXT и XMP. Все они являются устаревшими и не должны использоваться в документах HTML 4.0, включая даже «переходный» вариант Transitional – вместо них следует использовать элемент PRE. Все эти элементы заставляют браузер выводить текст моноширинным шрифтом и не игнорировать пробелы. Отличия же заключаются в том, что если LISTING полностью идентичен PRE, то PLAINTEXT и XML еще и отключали интерпретацию тегов HTML.
Свойства LISTING, PLAINTEXT, XMP
Закрывающий тег: требуется (Opera и MSIE игнорируют закрывающий тег для PLAINTEXT).
Совместимость: все, однако в реализации различными браузерами есть отличия. Кроме того, эти элементы не могут использоваться в документах HTML 4.0 и выше.
Вложение: недопустимо.
Уникальный: нет (PLAINTEXT для Opera и MSIE – да).
2011-05-31 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !
