Отделяем заголовки от абзацев или структурирование текста на html странице

Рубрика: Основы HTML

25 сентября 2013

Оглавление:

Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки.

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

Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:

<p>Добро пожаловать на наш сайт!</p>
<p>Добро
пожаловать на наш сайт!</p>
<p>Добро пожаловать
на наш
сайт!</p>

Исключение составляет тег <pre>, внутри которого все пробелы и переносы отображаются как есть.

Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.

Теперь перейдем к рассмотрению структурных элементов текста в разметке html.

Абзацы в языке HTML

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

<p>Это первый абзац.</p>
<p>А это уже второй абзац</p>

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег <p> также является блочным элементом. Что такое блочные элементы я писал в статье «Как создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт об автомобилях.</title>
</head>
<body>
<p>Сайт об автомобилях.</p>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<p>Классификация автомобилей</p>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>
</body>
</html>

При открытии данного файла будет примерно такая картина:

абзац html - применение тега p

Пока, что наша страница содержит одни абзацы.

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

left — выравнивание текста по левому краю;
center — выравнивание текста по центру;
right — выравнивание текста по правому краю;
justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.

По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

<p align="left">Этот текст в абзаце на html странице будет выровнен по левому краю!</p>
<p align="center">Этот текст в браузере отобразится по центру страницы!</p>
<p align="right">Этот текст будет выровнен по правому краю!</p>
<p align="justify">А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!</p>

И так это отобразится в браузере:

тег p атрибут align

Заголовки в языке HTML

Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег <h1>, а самым нижним — уровень 6, тег <h6>. Теги <h1> — <h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.

Синтаксис создания заголовков:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовки html</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>

Результат:

Заголовки тег h1-h6

Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

Добавим заголовки в нашу страницу:

<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>

И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:

заголовки на странице

Теги <h1>-<h6>, как и тег <p>, используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом <p>.

Нумерованные и маркированные списки в HTML

Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным, а с непронумерованными пунктами — маркированным.

В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.

Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега <li>. Затем все элементы помещаются внутрь тега <ul>, если нужен маркированный список, или внутрь тега <ol>, если нужен нумерованный список.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовки html</title>
</head>
<body>
Маркированный список:
<ul>
<li>первый пункт.</li>
<li>второй пункт.</li>
<li>третий пункт.</li> </ul>
Нумерованный список:
<ol>
<li>первый пункт нумерованного списка.</li>
<li>второй пункт нумерованного списка.</li>
<li>третий пункт нумерованного списка.</li>
</ol>
</body>
</html>

И выглядят они примерно так:

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег <ul> добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег <li> если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

disc — закрашенная окружность;
circle — окружность;
square — квадрат.

По умолчанию атрибут type равен disc. Пример использования:

<ul type="circle">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul type="square">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul>
<li type="circle">Пункт 1</li>
<li type="square">Пункт 2</li>
<li type="disc">Пункт 3</li>
</ul>

Отображение в браузере:

html список, атрибут type

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

A — заглавные латинские буквы;
a — строчные латинские буквы;
I — заглавные римские цифры;
i — строчные римские цифры;
1 — арабские цифры.

По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.

Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов <li> внешнего списка:

<ul>
<li>первый пункт.</li>
<li>второй пункт.
<ul>
<li>первый пункт вложенного списка.</li>
<li>второй пункт вложенного списка.</li>
<li>третий пункт вложенного списка.</li>
</ul>
</li>
<li>третий пункт.</li>
</ul>

И в браузере:

вложенный html список

В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега <dl>. Внутри него помещают пары «термин — определение». Термины заключают в парный тег <dt>, а определения — в парный тег <dd>:

<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>

Отображение в браузере:

список определений

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:

<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>

И посмотрим результат:

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

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:

<p>Первый абзац</p>
<hr>
<p>Второй абзац</p>

И вот как это отображается:

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.

С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег <hr> поддерживает следующие атрибуты:

align — определяет выравнивание линии;
color — задает цвет линии;
size — устанавливает толщину линии в пикселях;
width — устанавливает ширину линии в пикселях.

Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:

<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<hr color="green" size="1" width="320" align="left">
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>

Результат будет примерно таким:

горизонтальная линия hr

Комментарии html

В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом . Пример:

Комментариями можно помечать какие-то участки кода, чтобы в будущем можно было легче разобраться в нем.

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

Абзацы — выделяются с помощью парного тега <p>;
Заголовки. Существует шесть уровней заголовков, которые можно создать на странице с помощью парных тегов <h1>-<h6>;
На веб-странице можно создать маркированный или нумерованный список фраз. Для создания маркированного списка применяется парный тег <ul>, а для нумерованного <ol>. Для выделения каждого пункта применяется парный тег <li>;
Для отделения блоков текста можно применять горизонтальную линию с помощью одинарного тега <hr>.