HTML пробел, абзац

HTML блоки и параграфы

Урок 7. HTML блок и параграф, пробел, абзац

Теги, определяющие абзац, пробел, HTML блок и параграф

Рассмотрим в деталях HTML блоки и параграфы как элементы интернет-страницы.


Содержание страницы


Рассмотрим расположенный ниже код:

<html>
<head>
<title>HTML параграфы и блоки</title>
</head>
<body>
<p>Первая строка</p>
<p>Вторая строка</p>
<div>Третья строка</div>
<div>Четвертая строка</div>
<div style="color:#ff0000"><p>Пятая строка</p></div>
<div>Шестая строка</div>
</body>
</html>

Результат:

Параграфы ХТМЛ блоки

Посмотреть в новом окне HTML блоки и параграфы

Нам видно, что HTML параграфы имеют отступы по вертикали – такова особенность тегов <p> </p>. HTML блоки <div> </div> такие пространства не создают, потому что они не несут никакой нагрузки, а просто являются контейнерами.

Tеги <p> </p> не могут содержать другие <p> </p> или <div> </div>. Внутри <p> </p> могут быть размещены линейные элементы, такие как <span> </span> или, например, теги, отвечающие за форматирование текста.

Теги <p> </p> и <P> </P>, в принципе, одно и то же, но W3C консорциумом рекомендовано использовать маленькие буквы. В новой версии HTML как и в современном XHTML использование больших букв при написании тегов запрещено.

Блок <div> </div> может содержать внутри себя сколько угодно <div> </div> и <p> </p> и других элементов HTML документа. Он идеально подходит для верстки, но об этом позже – в уроках CSS самоучителя.

HTML пробел из таблицы специальных символов

HTML пробел позволяет увеличить расстояние между словами и символами.

Что касается пробелов между словами, то сколько бы не было их в Блокноте, то есть в исходном коде, на web-странице отобразится только один. Если вам понадобится увеличить растояние – используйте символ пробела &nbsp; из таблицы символов. Вы спросите: Зачем нужны эти закодированные значения обычных символов? – Я отвечу: Они нужны, чтобы отображать, например, такие скобки < >. Другими словами, для вывода на экран тегов <p> </p>, в своем редакторе я пишу: <code>&lt;p&gt; &lt;/p&gt;</code>. Теги <code> </code>, как мы помним, преобразуют текст в моноширинный (машинописный).

Способы отображения HTML абзаца

Примеры вывода абзаца:

<html>
<title>Абзац в HTML</title>
</head>
<body style="background-color:#ffee77">
<p><blockquote>Отступ слева с использованием тегов.</blockquote></p>
<p style="text-indent:100px">Отступ слева с использованием CSS атрибута.</p>
</body>

Результат:

Абзац в ХТМЛ, параграф, блок, пробел

Посмотреть в новом окне: HTML абзац

В первом случае абзац выводится тегами <blockquote> </blockquote>, а во втором случае — с помощью CSS атрибута text-indent и его значения, которое устанавливается в пикселях и может иметь любую величину, что бывает очень удобно.

HTML абзац или отступ мы рассматривали в уроке Выравнивание текста.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 6. Перенос   Пробел, HTML параграф, блок, абзац   Урок 8. HTML линия

    Сохранить в сервисы и закладки