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

Структурирование контента подразумевает его разбивку на логические блоки. Первым среди таких блоков, как правило, следует заголовок.

Заголовки. Элементы h1, h2, h3, h4, h5, h6

Существуют заголовки первого, второго, третьего и других уровней, вплоть до шестого. Организуются они при помощи тегов h1, h2, h3, h4, h5, h6:

<h1> 3аголовок 1-го уровня </h1>
<h2> Заголовок 2-го уровня </h2>
<h3> 3аголовок 3-го уровня </h3>
<h4> Заголовок 4-го уровня </h4>
<h5> Заголовок 5-го уровня </h5>
<h6> 3аголовок 6-го уровня </h6>

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

Пример.

<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Уровни заголовков</title>
</head>

<body>
<h1> 3аголовок 1-го уровня </h1>
<h2> Заголовок 2-го уровня </h2>
<h3> 3аголовок 3-го уровня </h3>
<h4> Заголовок 4-го уровня </h4>
<h5> Заголовок 5-го уровня </h5>
<h6> 3аголовок 6-го уровня </h6>
</body>
</html>

Уровни заголовков

Рис. 3.1. Уровни заголовков

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

3аголовок 1-го уровня

Заголовок 2-го уровня

3аголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня
3аголовок 6-го уровня

В зависимости от предпочтений браузера, некоторые заголовки разного уровня могут отображаться одинаково, или даже заголовки более низкого уровня могут выглядеть заметнее своих "старших братьев". В ряде браузеров, например, в Opera, размер и вид шрифтов, используемых на Web-странице, может задавать сам пользователь в настройках. Далее будет показано, как управлять размером, типом и другими характеристиками шрифта программным путем при помощи стилей, не полагаясь на особенности других браузеров.

Атрибуты:

  • align - задает выравнивание заголовка на странице. Не рекомендуемый. Может принимать четыре значения:
    • left - выравнивает заголовок по левому краю страницы (используется по умолчанию);
    • right - выравнивает заголовок по правому краю страницы;
    • center - выравнивает заголовок по центру;
    • justify - выравнивает заголовок по ширине страницы, растягивая строку от правого до левого поля. Эффект проявляется, когда длина заголовка больше ширины листа.
  • id, class - идентификаторы в пределах документа.
  • lang, dir — информация о языке и направленности текста;
  • title - заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
  • style - встроенная информация о стиле.
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутренние события.

Элементы встроенные и блочные

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

  • элементы уровня блока, или блочные ( block );
  • встроенные, или элементы уровня текста ( inline ).

Первые отделяют в документе большие блоки (например, заголовок, абзац, адрес автора публикации). Вторые выделяют фрагмент внутри строки (одну букву, слово или фразу).

По умолчанию блоки начинаются с новой строки и занимают всю доступную ширину. На рис. 3.2 для наглядности блоки специально выделены розовой линией. Блоки могут быть вложены друг в друга. Блочные элементы могут содержать встроенные элементы. Подробно блочные элементы будут рассмотрены ниже, а пока только перечислим их:
абзацы — <р>,
заголовки — <h1>,...,<h6>,
блоки — <div>,
предварительно отформатированный текст — <рrе>,
цитаты — <blockquote>, <fieldset>, <address>,
разделитель — <hr>,
таблицы — <table>,
списки — <ul>, <ol>, <dl>,
скрипты — <script>, <noscript>.

Блочные элементы

Рис. 3.2. Блочные элементы.

Элементы более низкого уровня — уровня текста — по умолчанию выводятся друг за другом в текущей строке (рис. 3.3). Они могут встраиваться в элементы уровня блока и включать другие встроенные элементы. Однако встроенные элементы не могут содержать элементы блочные. Общее правило: элементы можно вкладывать только в элементы более высокого или своего уровня. К встроенным относятся элементы логического ( phrase ) и физического ( fontstyle ) форматирования текста, специальные элементы и элементы задания форм.

Если очень Вам не ймется,
Оптирайтесь, чем придется,
Водными займитесь процедурами.

Рис. 3.3. Встроенные элементы.

Выделение блока. Элемент <div>

Элемент div является наиболее характерным представителем элементов уровня блока. Он используется для объединения различного содержимого в логически цельную единицу. Логический блок — это нечто большее, чем выделение текста в абзац. Он может отделять, например, несколько абзацев, которые представляют собой аннотацию статьи, новости или замечания к основному тексту. В сочетаниии с атрибутами class и id, работу которых мы рассмотрим позднее, элемент div позволяет легко структурировать текст.

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

Атрибуты:

  • align — задает выравнивание текста на странице. Не рекомендуемый. Может принимать четыре значения:
    • left — выравнивает текст по левому краю страницы (используется по умолчанию);
    • right — выравнивает текст по правому краю страницы;
    • center — выравнивает текст по центру;
    • justify — выравнивает текст по ширине страницы, растягивая строку от правого до левого поля.
  • id, class — идентификаторы в пределах документа.
  • lang, dir — информация о языке и направленности текста;
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
  • style — встроенная информация о стиле.
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

Встроенный блок. Элемент <span>

Аналогом div на уровне текста является элемент span. Основное его назначение — организовывать встроенные блоки, которые затем можно эффективно форматировать при помощи стилей.

Атрибуты:

  • ctlparid
  • id, class — идентификаторы в пределах документа.
  • lang, dir — информация о языке и направленности текста;
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
  • style — встроенная информация о стиле.
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

Цитаты. Элемент <blockquote>

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

Атрибуты:

  • cite — задает URL документа или письма, подлежащего цитированию.
  • id, class — идентификаторы в пределах документа.
  • lang, dir — информация о языке и направленности текста;
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
  • style — встроенная информация о стиле.
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

Организация абзацев. Элемент <р>

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

Атрибуты:

  • align — задает выравнивание текста. Не рекомендуемый. Может принимать четыре значения:
    • left — выравнивает текст по левому краю страницы (используется по умолчанию);
    • right — выравнивает текст по правому краю страницы;
    • center — выравнивает текст по центру;
    • justify — выравнивает текст по ширине страницы, растягивая строку от правого до левого поля.
  • id, class — идентификаторы в пределах документа.
  • lang, dir — информация о языке и направленности текста;
  • title — заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента).
  • style — встроенная информация о стиле.
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup — внутренние события.

Пример.

1    <!doctype html public"-//W3C//DTD HTML 4.0 Transitional//EN">

2    <html>
3    <head>
4    <title>Заголовки, блоки, цитаты, абзацы</title>
5    </head>
6    <body leftmargin="100" bgcolor="#ffffff">

7    <h1  align="center">
8       <p>Часть первая</p>
9       <p>Старгородский лев</p>
10   </h1>
11   <h2>
12      <p>Глава 1</p>
13      <p>Безенчук и "Нимфы"</p>
14   </h2>
15   <p>
16   B уездном городе N было так много парикмахерских заведений и бюро
17   похоронных процессий, что казалось, жители города рождаются лишь
18   затем, чтобы побриться, остричься, освежить голову вежеталем и
19   сразу же умереть. А на самом деле в уездном городе N люди рождались,
20   брились и умирали довольно редко. Жизнь города N была
21   тишайшей.
22   </p>

23   <div style="background:lightblue; color:red; margin-left:-50px">
24      <p>
25      Вопросы любви и смерти не волновали Ипполита Матвеевича
26      Воробьянинова, хотя этими вопросами по роду своей службы он
27      ведал с девяти утра до пяти вечера ежедневно с получасовым
28      перерывом для завтрака.
29      </p>
30   </div>
31   <p>
32   Хотя похоронных депо было множество, но клиентура у них была небогатая.
33   "Милости просим" лопнуло еще за три года до того, как Ипполит Матвеевич
34   осел в городе N, а мастер Безенчук пил горькую и даже однажды пытался
35   заложить в ломбарде свой лучший выставочный гроб.
36   </p>

37   <blockquote style="font-style:italic">
38   Пешеходов надо любить.<br>
39   Пешеходы составляют большую часть человечества. Мало того —
40   лучшую его часть. Пешеходы создали мир. Это они построили города,
41   возвели многоэтажные здания, провели канализацию и водопровод,
42   замостили улицы и осветили их электрическими лампами.
43   </blockquote>
44   </body>
45   </html>

Блочная структура страницы

Рис. 3.4. Блочная структура страницы.

Анализируя данную Web-страницу, можно отметить следующее:

  • строки 7-10 : заголовок первого уровня.
  • строки 11-14 : заголовок второго уровня, выполненный по умолчанию более мелким шрифтом.
  • строки 15-22 : обычный абзац, созданный при помощи элемента <p>.
  • строки 23-30 : блок <div>. Для наглядности он выделен другим цветом текста и фоном, которые задаются при помощи стилей CSS, а также смещен на 50 пикселей влево от линии других элементов.
  • строки 31-36 : обычный абзац, созданный при помощи элемента <p>.
  • строки 37-43 : цитата, созданная при помощи элемента <blockquote>. По умолчанию сдвинута вправо по отношению к основному тексту. Для большей наглядности выделена курсивом, который задается при помощи стилей CSS.

Все перечисленные элементы входят в элемент <body>. В терминах программирования говорят, что этот элемент является родительским для вложенных элементов-потомков (а также «детей» или «наследников») <h1>, <h2>, <div>, <p>, <blockquote>. Элементы-потомки наследуют ряд свойств элемента-родителя. Например, <h1>, <h2>, <p> наследуют от <body> значение левой границы. Элементы <div> и <blockquote> выпадают из этого списка, поскольку для <div> явно задано левое поле, а <blockquote> имеет смещение вправо по умолчанию. А вот элемент <p> который входит в <div>, наследует от него смещенную левую границу (рис. 3.4).

Перевод строки. Элементы <br>, <nobr>, <wbr>

Элемент <br>

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

Примечание:

В XHTML, где закрывающий тег обязателен, из положения выходят, записывая тег в форме <br/>, или сразу за открывающим вводят закрывающий тег <br></br>.

Атрибуты:

  • clear — указывает, где должна появиться перенесенная строка. Этот атрибут учитывает прикрепляемые объекты (таблицы, изображения и т. п.) Не рекомендуемый. Может принимать четыре значения:
    • none — следующая строка текста отображается обычным образом, на ближайшем свободном снизу пространстве (используется по умолчанию);
    • left — следующая строка текста отображается на ближайшем свободном пространстве под прикрепленным у левого края объектом;
    • right — следующая строка текста отображается на ближайшем свободном пространстве под прикрепленным у правого края объектом;
    • all — следующая строка текста отображается на ближайшем свободном пространстве под прикрепленным у любого края объектом;

Рассмотрим на примере использование элемента <br>.

Пусть имеется исходный документ, в котором объект-изображение не прикреплен ни к какому краю документа (не определен атробут align) и, соответственно, текстом не обтекается (рис. 3.5):

Пример.

1    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
2    <html>
3    <head>
4    <title> Использование элемента br с различными атрибутами</title>
5    </head>

6    <body>
7    <img src="ris_html1_3-5.jpg">

8    На занятиях Мирзакарим Санакулович Норбеков часто повторяет:
9    "Я обычный человек, такой же, как все. Ничем не лучше и, надеюсь, 
10  ничем не хуже вас. Всего, чего я добился в жизни, вы тоже можете достичь, 
11  важно только этого захотеть!"
12  А добился он действительно многого. Сегодня М. С. Норбеков - доктор 
13  психологии, доктор педагогики, доктор философии в медицине, профессор, 
14  действительный член и член-корреспондент ряда российских и зарубежных 
15  академий, автор многих запатентованных изобретении и открытий в науке. 
16  Впрочем, все эти звания сам он называет "собачьими регалиями", 
17  потому что не ради признания он работает.
18  Мирзакарим Санакулович - истинный ученый-исследователь.
19  Круг его интересов очень широкий. Многие удивляются тому, как все это 
20  может сочетаться в одном человеке: художник, композитор, писатель, кинорежиссер, 
21  артист, спортсмен, тренер, имеющий черный пояс по каратэ второй дан и черный
22  пояс по сам чон до девятый дан. Но самое главное, автор книги - специалист по 
23  суфийской медицине и практике, одной из самых древних среди всех существующих.
24   </body>
25   </html>

 

Изображение без дополнительных атрибутов

Рис. 3.5.  Вид документа с изображением без дополнительных атрибутов

Теперь организуем обтекание изображения текстом, прикрепив его к левому краю. Для этого изображению укажем атрибут align=left, то есть в HTML-коде документа строку 7 <img src="3-5.jpg"> заменим на строку <img src="3-5.jpg" align=left>. В результате получим текст, обтекающий изображение (рис. 3.6):

 

Изображение выровнено влево

Рис. 3.6.  Вид документа с прикрепленным изображением.

Применение элемента br с заданным атрибутом clear, определяет будет ли расположенный за элементом текст и дальше обтекать объект, или будет выводиться под ним. В приведенном ниже примере, использование элемента br без указания атрибута clear (что равносильно указанию clear=none) не прерывает обтекания текстом, а только осуществляет перенос на следующую строку. Вставим элемент br перед предложением "А добился он действительно многого." (рис. 3.7):

 

Вставлен разрыв строки элементом br

Рис. 3.7.  Демонстрация применения элемента br.

Использование элемента br с атрибутом clear=left прервет обтекание текстом и продолжит вывод текста сразу под прикрепленным объектом (рис. 3.8):

 

Элемент br с атрибутом clear=left

Рис. 3.8.  Применение элемента br с атрибутом clear=left

Элемент <nobr>

Иногда необходимо удержать на экране строку без переноса текста. В этом случае такие строки заключаются в контейнер <nobr> </nobr>.

<nobr>Текст непереносимой строки</nobr>

Закрывающий тег обязателен.

Если строка слишком длинная, то появится горизонтальная линейка скроллинга (прокрутки).В небольших фразах, во избежание переноса, можно использовать неразрывный пробел (один или несколько), который вставляется как символ-литерал &nbsp; (в десятичной форме &#160;, в шестнадцатеричной форме &#xА0;).

Элемент <wbr>

Решает обратную задачу — разрешает перенос и вставляется как контейнер внутрь элемента <nobr>.В следующем примере перенос осуществлен только в предложении "Провинциальная непосредственность.":

<nobr> — Знойная женщина, — сказал Остап, — мечта поэта.

<wbr>Провинциальная непосредственность.</wbr> B центре таких субтропиков
давно уже нет, но на периферии, на местах —
еще встречаются.</nobr>

На практике проще использовать только элемент <nobr>, выделяя им часть строки, не подлежащей переносу. Предыдущий пример в этом случае был бы записан так:

<nobr> - Знойная женщина, — сказал Остап, — мечта поэта.</nobr>
Провинциальная непосредственность. <nobr>B центре таких субтропиков
давно уже нет, но на периферии, на местах — еще встречаются.</nobr>