Разработка веб-приложений: учебное пособие

2. Язык гипертекстовой разметки

2.4. Форматирование текста

Для форматирования текста HTML-документов предусмотрена целая группа тегов, которую можно условно разделить на теги логического и физического форматирования.

Теги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тег <code>), цитата (тег <сitе>), аббревиатура (тег <abbr>) и т. д. Структурная разметке не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию.

Теги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа).

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

Хотя использование тегов физического форматирования не осуждается в HTML и может свободно использоваться, однако применение таблицей стилей предоставляет значительно больше возможностей по управлению начертанием текста.

Теги логического форматирования текста.

Обозначение аббревиатуры.: Для обозначения текста как аббревиатуру используются теги <abbr>. Данный тег имеет атрибут title, в качестве значения которого дается полная форма записи аббревиатуры, что позволяет понимать ее тем людям, которые с ней не знакомы. Браузеры при наведении курсора на текст, размеченный тегом <abbr>, будут выдавать полное наименование в виде появляющейся подсказки.
Обозначение цитат.: Тег <сitе> используется для обозначения ссылки на источник, например названий книги и статьи. Браузерами такой текст обычно выводится курсивом.
Тег <q> отмечает короткие цитаты в строке текста. Содержимое кон-тейнера, как правило, отображается в браузере в кавычках.
Для выделения длинных цитат из основного текста существует тег <blockquote>. Он является контейнером и может содержать другие теги форматирования. Текст, размеченный тегом <blockquote>, при отображении отделяется от основного текста пустыми строчками и, как правило, выводится с небольшим отступом вправо.
Обозначение определений.: Для выделения текстовый фрагмент как определение используется тег <dfn>. Например, этим тегом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Отображается по умолчанию курсивом.
Выделение важных фрагментов.: Для выделения важных фрагментов текста используются теги <em> и <strong>. Браузеры обычно отображают текст, выделенный с помощью тега <em>, курсивом, а с помощью тега <strong> – полужирным шрифтом. Тегом <strong> обычно размечают более важные фрагменты текста, чем те, что размечены тегом <em>.
В HTML 5 ввели тег <mark>, который выделяет информацию, особенно важную для читателя. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью таблиц стилей.
Обозначение вставок.: Для обозначения текста как вставка используется тег <ins>. Этот элемент полезно использовать для отметки изменений, вносимых в документ. Текст, помеченный тегом <ins>, обычно отображается подчеркнутым.
Обозначение удаленного текста.: Для обозначения фрагмента текста как удаленный используют тег <del>. Этот элемент полезно использовать для отметки изменений, вносимых в документ. Текст, помеченный тегом <del>, обычно отображается перечеркнутым.
Обозначение элементов программ.: Для обозначения текста как небольшого фрагмента программного кода используется тег <code>. Как правило, текст отображается моноширинным шрифтом.
Тег <samp> используется для обозначения текста, выдаваемого программой (листинг). Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта.
Обозначение в тексте переменной величины или аргумента программы осуществляется с помощью тега <var>. Обычно такой текст отображается в браузере курсивом.
Обозначение вводимого с клавиатуры текста.: Тег <kbd> используется для обозначения текста, вводимого пользова-телем с клавиатуры. В браузере такой текст, как правило, отображается моноширинным шрифтом.

Листинг 1. Пример логического форматирования текста.


<!DOCTYPE html>

<html>

<head>

<title>Логическое форматирование текста</title>

</head>

<body>

<p>В книге <cite>Изучаем HTML и CSS</cite> описывается язык <abbr title="HyperText Markup Language – язык гипертекстовой разметки">HTML</abbr> <del>4.01</del> 5</p>

<blockquote>

Для того чтобы создать веб-страницу, необходимо изучить основы HTML. HTML – это не язык программирования и использование его гораздо легче, чем писать программы.

</blockquote>

<q>Книга рассчитана на широкой круг читателей</q><br>

<p>Веб-страницы можно создавать <em>вручную с помощью HTML</em>, при этом ввод HTML-кода выполняется в <strong>любом текстовом редакторе</strong></p>
<p><dfn>Notepad</dfn> – это простейший текстовый редактор.</p>

</body>

</html>

Показать результат листинга 1

Теги физического форматирования текста.

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

Тег <b>: используется, что зрительно привлечь внимание, например, к ключевым словам, такой текст отображается полужирным шрифтом.
Тег <i>: альтернативное отображение текста, отображается в браузере курсивом.
Тег <u>: отображает текст подчеркнутым.
Тег <s>: неверный текст, отображается в браузере перечеркнутым горизонтальной линией.
Тег <small>: мелкий шрифт, выводит текст шрифтом меньшего размера, чем непомеченная часть текста.
Тег <sub>: нижний индекс. Сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера.
Тег <sup>: верхний индекс. Сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера.

Теги <sub> и <sup> удобно использовать для математических индексов.

Теги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере.

Листинг 2. Пример физического форматирования текста.


<!DOCTYPE html>

<html>

<head>

<title>Физическое форматирование текста</title>

</head>

<body>

 
<b>Полужирный</b> текст <br>

<i>Курсивный</i> текст <br>

<u>Подчеркнутый</u> текст<br>

<s>Зачеркнутый</s> текст<br>

Шрифт <small>меньшего</small> размера<br>

<sub>нижний</sub> и <sup>верхний</sup> индексы<br>

<b><i>Полужирный и курсивный</i></b> шрифт


</body>

</html>

Показать результат листинга 2

Разделение на абзацы.

Любой текст имеет определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.

Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши Enter. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.

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

Избежать этой неприятности позволяет применение специального тега разделения на абзацы <p>. Перед началом каждого абзаца текста следует поместить тег <р>, хотя закрывающий тег </p> не обязателен, все равно, его лучше использовать. Браузеры обычно отделяют абзацы друг от друга пустой строкой.

Тег <р> может задаваться с атрибутом горизонтального выравнивания align, которые может принимать следующие значения:

left – выравнивание текста по левой границе окна браузера;
center – выравнивание по центру окна браузера;
right – выравнивание по правой границе окна браузера;
justify – выравнивание по ширине (по двум сторонам).

По умолчанию выполняется выравнивание по левому краю.

Перевод строки.

При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тег принудительного перевода строки <br>, который не имеет соответствующего закрывающего тега. Включение тега <br> в текст документа обеспечит размещение последующего текста с начала новой строки.

В отличие от тега абзаца <p> при использовании тега <br> не будет образована пустая строка.

Для указания возможного места переноса можно использовать, так называемый, "мягкий" перевод строки, т.е. перевода строки будет выполнено только при необходимости. Для этого существует тег <wbr>, который так же, как и тег <br>, не нуждается в закрывающем теге.

Заголовки внутри HTML-документа.

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

Для разметки заголовков используются теги <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Эти теги требуют соответствующего закрывающего тега. Как правило, чем выше уровень заголовка, тем больше информации для читателя содержит этот раздел. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него осуществляется вставка пустой строки.

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

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

right – позиционирование заголовка по правой границе документа;
left – позиционирование заголовка по левой границе документа;
center – позиционирование заголовка по центру документа.

По умолчанию заголовки выравниваются по левому краю страницы.

Горизонтальные линии.

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы.

Тег <hr> позволяет провести горизонтальную линию в окне браузера. Этот тег не является контейнером, поэтому не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Тег <hr> может иметь следующие атрибуты:

align – выравнивание линии, может принимать значения left, center, right;
color – указывает цвет линии;
noshade – рисует линию без трехмерных эффектов;
size – устанавливает толщину линии в пикселях;
width – устанавливает длину линии, указывается в пикселях или процентах от ширины окна браузера.

Пример:

<hr aling="center" width="50%" size="2" color="red">

Использование предварительно отформатированного текста.

В HTML-документах для разбивки текста по абзацам и обеспечения при-нудительного перевода строки следует пользоваться специальными тегами. Однако бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тег-контейнер <pre>, определяющий предварительно форматированный (преформатированный) текст.

Текст, размеченный тегом <pre>, будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения всегда будет использоваться моноширинный шрифт.

Текст внутри контейнера <pre> может содержать элементы форматирования уровня текста, кроме следующих: <img>, <object>, <small>, <sub> и <sup>. Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой).