Разметка абзацев (практические сведения о языке HTML):ИнфоБлог


Начало абзаца (paragraph) задает тег <Р>. Закрывающий тег </Р> тоже воз­можен, но необязателен, и на практике им не пользуются[1].

Обычные концы абзацев, которые ставят текстовые редакторы, здесь не дей­ствуют: браузеры их просто не замечают. Мы сможем нажимать Enter в HTML-редакторе для своего удобства, а для браузера приберегать тег Р. 


Текст в абзаце может быть выровнен влево, вправо, по обоим краям и по центру. Для этого применяют атрибут ALIGN (выравнивание):

<Р ALIGN =»LEFT»> — выравнивание влево;

 <Р ALIGN=»RIGHT»> — выравнивание вправо;

<Р ALIGN=»CENTER»> — выравнивание по центру;

<Р ALIGN=»JUSTIFY»> — выравнивание по обоим краям.

К сожалению, в HTML не бывает переносов, так что пользоваться таким выравниванием имеет смысл лишь при достаточно широкой текстовой колонке[2].

Каждый следующий тег абзаца отменяет форматирование предыдущего.
При просмотре в браузере новый абзац будет отделен от предыдущего пустой строкой. Если вам нужно, чтобы абзацы шли без пустой строки, и чтобы вырав­нивание распространялось и на следующий абзац, вместо нового абзаца ставьте тег обрыва строки (break): <BR>. Например, строки стихотворения надо  отделять друг от друга разрывом строки, а четверостишия — двумя разрывами или одним абзацем. Тег BR — непарный.

Для форматирования абзацев можно пользоваться также тегом раздела (division) <DIV>. Он работает точно так же, как Р, в нем можно использовать атрибут выравнивания ALIGN, но между двумя соседними разделами не оставляется пустая строка. Здесь закрывающий тег необходим — </DIV>.

Раздел считается главнее абзаца — новый абзац, для которого не указан способ выравнивания, не отменяет оформления раздела, и текст выравнивается так, как задано в теге раздела <DIV ALIGN=»…»>.

Для центровки текста есть специальный тег <CENTER>…</CENTER>. Центру­ется не только текст, а вообще все, что лежит внутри этого контейнера: рисунок, таблица, линия, текст.

Шесть стандартных тегов предусмотрено для оформления заголовков: <Н1>, <Н2>,…, <Нб>. Причем у Н1 — самый крупный шрифт, у Н6 — самый мелкий. Все они тоже могут иметь атрибут выравнивания ALIGN.

Код прописан в Блокноте

<HTML>

 <HEAD>

     <TITLE> Заголовки </TITLE>

 </HEAD>

 <BODY>

<h2 align=center> Это заголовок первого уровня </h2>

<h3> Это заголовок второго уровня </h3>

<h4> Это заголовок третьего уровня </h4>

<h5> Это заголовок четвертого уровня </h5>

<H5> Это заголовок пятого уровня </H5>

<H6> Это заголовок шестого уровня </H6>

 </BODY>

</HTML>

Результат такой разметки в браузере

Есть также особое оформление для цитат — тег <BLOCKQUOTE>. Все, что рас­положено между открывающим и закрывающим тегом, будет сдвинуто вправо и отделено от предыдущего и последующего текста пустой строкой.

А как сделать абзацный отступ? — продолжает свой допрос любитель тек­стовых редакторов.

Не думайте, что я опять вам это запрещу! Но вопрос не такой простой, как можно подумать.

В чистом HTML (без применения стилевой разметки CSS) не предусмотрено стандартной команды для создания аб­зацного отступа, а знакомые нам по текстовым редакторам способы здесь не сра­батывают. Значки табуляции, которыми принято сдвигать первую строку абзаца вправо, браузеры не воспринимают почему-то. Сделать отступ несколькими пробелами тоже не удастся, потому что в HTML любые два, три или более про­белов воспринимаются как один.

Что же делать?

Поставить вместо простых пробелов неразрывные (non breaking space), которые и создадут абзацный отступ. Неразрывный пробел в HTML записывается такой последовательностью из пяти символов: &shy — непременно строчными буквами. Ставите пять-семь таких кучерявых объектов в начале абзаца и имеете абзацный отступ. Кто спорит, это неудобно да и увеличивает объем файла. Но американцы, разрабатывавшие стандарты, к оформлению текста абзацными отступами не привыкли, а музыку заказывают они.  Ну, и кроме того, в любом хо­рошем редакторе HTML вы сможет сделать простенькую макрокомандочку, которая будет вам сразу ставить нужное число этих штуковин.

Есть и другой способ делать абзацные отступы, столь же странноватый, как и этот. Абзацный отступ может создаваться пустым рисунком, который сам не виден, но текст вытесняет.

Подробнее мы будем говорить в стилевой разметке CSS, вы увидите, как элементарно эта неразрешимая проблема решается там.

Код прописан в Блокноте

<!doctype html>

<html>

  <head>

    <style>

      p { text-indent: 25px; }

    </style>

  <head>

  <body>

      Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым <br>

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

      Однако надо понимать, что любая запятая несет в себе как эстетическую, так <br>

      и смысловую нагрузку, а не только является данью правилам грамматики – это<br>

      касается и форматирования.

  </body>

</html>

Результат такой разметки в браузере

Чтобы сдвинуть абзац от левой границы экрана, можно воспользоваться те­гами <UL> или <ОL>. Каждый такой UL или ОL сдвигает левую границу абзаца вправо. Два UL’a — вдвое больший сдвиг, три — соответственно еще больше. За­крывающие теги </UL> и </ОL> сдвигают левую границу на одну позицию назад, влево.

Вообще-то, ОL и UL предназначены для создания нумерованных и ненумеро­ванных списков. Но их можно использовать и таким вот образом. Кроме того, сдвиг левой границы текста можно сделать и с помощью одного или нескольких тегов <BLOCKQUOTE > (выделение цитат).

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

Литература:

А.Левин. Самоучитель полезных программ.Питер. 2008



[1] При работе со стилевыми таблицами CSS вам придется все-таки закрывать контейнеры Р.

[2] Кстати, обращаю ваше внимание на то, что и вручную делать переносы нельзя: вы нико­гда не знаете, на  какую ширину экрана растянется ваш текст (экраны у людей очень уж разные), а значит, не удастся угадать, на какие слова попадут концы строк. Есть, правда, в языке HTML специфический объект — выражение, состоящее из пяти символов: &shy; Если эту бяку вставить в середину слова, она будет воспринята как значок мягкого (то есть, видимого только когда попадает на конец строки) переноса. Но в ряде браузеров, включая широко распространенный Firefox, мягкий перенос не работает.


— HTML — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Подсказки
  6. На практике
    1. Дока Дог советует
    2. Алёна Батицкая советует

Кратко

Скопировано

Используйте тег <p>, чтобы превратить текст в абзац.

Пример

Скопировано

<p>Это первый абзац текста. </p><p>А это уже второй.</p><p>И между ними небольшая пропасть.</p>
          <p>Это первый абзац текста.</p>
<p>А это уже второй.</p>
<p>И между ними небольшая пропасть.</p>

Как понять

Скопировано

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

Внутри блока может находиться любой текстовый контент.

Как пишется

Скопировано

<p>Текст, хихик</p>
          <p>Текст, хихик</p>

Дефолтные стили абзаца:

p {  display: block;  margin-top: 1em;  margin-bottom: 1em;  margin-left: 0;  margin-right: 0;}
          p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

Подсказки

Скопировано

💡 Атрибут align для тега <p> устарел и больше не используется.

💡 Абзац может заканчиваться не только явно (закрывающим тегом </p>), но и неявно — перед началом следующего блочного элемента. Поэтому нельзя просто взять и вложить в абзац список, таблицу, <figure>, другой абзац и подобные элементы: браузер неявно закроет абзац перед ними и сделает эти элементы не вложенными, а соседними.

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Тег <p> по факту ведёт себя как обычный блок <div>. Нужно учесть, что у <p> по умолчанию заданы свойства margin-block-start и margin-block-end — отступы от начала и конца блока, чтобы каждый абзац отступал на 1em (примерно 16 пикселей) от предыдущего. Поэтому этот показатель отступов надо прописывать в CSS для всех тегов <p>.

Чтобы сделать заголовок, который не имеет ценности для поисковых машин, то лучше, вместо одного из тегов <h2>…<h6> использовать тег <p> с классом h2 или h3 и так далее.

Алёна Батицкая советует

Скопировано

🛠 Я часто вижу, как начинающие разработчики оборачивают словосочетания или вообще одно слово в отдельные абзацы только для переноса текста на новую строку. Так делать не нужно, поскольку абзац является логической единицей текста.

Возьмите с полки любую книгу с прозой и откройте её. Вы увидите, что чаще всего абзацы состоят из нескольких предложений. Каждый абзац визуально отделён от предыдущего и следующего. В некоторых книгах это заметный отступ. Где-то — красная строка (отступ первой строки). Редко когда абзац состоит из отдельного слова или словосочетания.

Придерживайтесь этого принципа и в вёрстке. Оборачивайте в тег <p> как минимум одно полное предложение или текст из нескольких предложений.

Если нужен текстовый тег для слова или словосочетания — обратите внимание на <span>.

Текст — пластичная конструкция. Если нужно добиться переноса строк, то ограничьте ширину текстового блока и позвольте тексту занять отведённое ему пространство естественным образом.

Оценка материала

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

<h2>…<h6>

ctrl + alt + ←

Следующий материал

→

<div>

ctrl + alt + →

Как использовать тег в HTML

В HTML абзацы определяются тегом HTML

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

и закрывающим тегом

.

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

В этом посте мы объясним, как использовать тег

в HTML, в том числе, когда вам нужно его использовать, когда вы можете его опустить и как вы можете стилизовать его по своему вкусу. Но сначала давайте начнем с примера, чтобы нас разогреть.

Тег абзаца в HTML Пример

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

Вот простой пример использования тега

 в HTML.

Как видите, после закрытия тега

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

Как использовать тег

в HTML

Теперь, когда мы предоставили пример, давайте рассмотрим, как использовать этот тег в HTML.

Что означает

в HTML?

— HTML-тег абзаца. Добавление

в документ HTML, за которым следует текст, создаст абзац на вашей странице. Добавление тега

завершит абзац.

Категория HTML

Элементы HTML сгруппированы в категории содержимого в зависимости от их назначения.

Элемент

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

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

Категория потокового контента имеет несколько подкатегорий:

  • Элементы заголовков, например

    ,

     до
  • Элементы секционирования, такие как
    ,
     и  
  • Фразовые элементы, такие как ,   и
  • Встраиваемые элементы, например