Тег html абзац: : Элемент текстового абзаца — HTML

Leave a Comment / Html / By /

Абзацы | htmlbook.ru

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

<p>Абзац 1</p>
<p>Абзац 2</p>

Каждый абзац начинается с тега <p> и заканчивается необязательным закрывающим тегом </p>.

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

В примере 7.1 показано применение абзацев для создания отступов между строками.

Пример 7.1. Использование абзацев

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Применение абзацев</title>
 </head>
 <body>
   <p>В одних садах цветёт миндаль, в других метёт метель.
 
 </p>
   <p>В одних краях ещё февраль, в других - уже апрель.</p>
   <p>Проходит время, вечный счёт: год за год, век за век...</p>
   <p>Во всём - его неспешный ход, его кромешный бег.</p>
   <p>В году на радость и печаль по двадцать пять недель.</p>
   <p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p>
   <p>По двадцать пять недель в туман уходит счёт векам.</p>
   <p>Летит мой звонкий балаган куда-то к облакам.</p>
   <p><i>М. Щербаков</i></p>
 </body>
</html>

Результат данного примера показан на рис. 7.1.

Рис. 7.1. Отступы на веб-странице при использовании абзацев

Как видно из рисунка, при использовании тега <p> между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег <br>. В отличие от абзаца, тег переноса строки <br> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.

Так, текст примера 7.1 с учетом переноса строк будет преобразован следующим образом (пример 7.2).

Пример 7.2. Тег <br>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Переносы в тексте</title>
 </head>
 <body>
   <p>В одних садах цветёт миндаль, в других метёт метель.<br>
   В одних краях ещё февраль, в других - уже апрель.<br>
   Проходит время, вечный счёт: год за год, век за век...<br>
   Во всём - его неспешный ход, его кромешный бег.<br>
   В году на радость и печаль по двадцать пять недель.<br>
   Мне двадцать пять недель февраль, и двадцать пять - апрель.<br>
   По двадцать пять недель в туман уходит счёт векам.<br>
   Летит мой звонкий балаган куда-то к облакам.</p>
   <p><i>М. Щербаков</i></p>
 </body>
</html>

Результат примера продемонстрирован на рис.  7.2. Видно, что расстояние между строками текста уменьшилось и он приобрел более компактный вид.

Рис. 7.2. Вид текста с учетом переносов

  • Тег <p>

Абзац, абзацный отступ (красная строка)

  • Абзацы
  • Красная строка

Абзацы

Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.

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

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p>, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).


<p>Абзац</p>

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

Не забывайте про закрывающий тег

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


<p>Абзац
<p>Другой абзац</p>

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

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

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

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:


<html>
  <head>
    <style>
	  p { text-indent: 25px; }
	</style>
  <head>
  <body>

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

  </body>
</html>

Попробовать »

В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.


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

Попробовать »

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

С этой темой смотрят:

  • HTML заголовки, линии и комментарии
  • HTML перенос строки
  • HTML теги для текста
  • Выравнивание текста
  • Как изменить шрифт
  • Стиль и размер шрифта

Тег HTML p

❮ Назад Полный справочник HTML Далее ❯


Пример

Абзац размечен следующим образом:

Это какой-то текст в абзаце.

Попробуйте сами »

Ниже приведены дополнительные примеры «Попробуйте сами».

Определение и использование

Тег

определяет абзац.

Браузеры автоматически добавляют одну пустую строку до и после каждого

элемент.

Совет: Используйте CSS для оформления абзацев.

Поддержка браузера

Элемент

 Да Да Да Да Да

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Выровнять текст в абзаце (с помощью CSS):

Это текст в абзаце.

Попробуйте сами »

Пример

6 9 абзацы с CSS:





Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna Аликва. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia удостовериться, что анимация id est Laborum.


Попробуйте сами »

Пример

 Подробнее о абзацах:


Этот абзац
содержит много строк
в исходном коде, но браузер

игнорирует его.

Попробуйте сами »

Пример

Проблемы со стихотворением в HTML:


Моя Бонни лежит над океаном.
Моя Бонни лежит над морем.
Мой Бонни лежит над океаном.
О, верни мне мою Бонни.

Попробуйте сами »

Связанные страницы

Учебник HTML: HTML Paragraphs

Ссылка HTML DOM: Paragraph Object со следующими значениями по умолчанию:

Пример

p {
  display: block;
  Верхнее поле: 1em;
 нижнее поле: 1em;
  левое поле: 0;
  правое поле: 0;
}

Попробуйте сами »

❮ Предыдущая Полный справочник HTML Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


7 Top1 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег HTML p — Изучите HTML

❮ Пред. Следующий ❯

Тег

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

Если вам нужно просто переместить текст на новую строку, используйте тег
.

Тег

идет парами. Содержимое записывается между открывающим (

) и закрывающим (

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

Пробелы между открывающим тегом

и его содержимым игнорируются браузером. Чтобы задать отступ, используйте свойство CSS text-indent.

Тег

не может содержать таблицы и другие элементы блочного уровня.

Пример тега HTML

:

 

  <голова>
    Название документа
  
  <тело>
    
Это абзац

Попробуй сам »

Результат

Чтобы выровнять текст в абзаце, вместо устаревшего атрибута align используйте свойство CSS text-align.

Пример тега HTML

, используемого со свойством text-align CSS:

 

  <голова>
    Название документа
    <стиль>
      раздел.параграф {
        выравнивание текста: по центру;
      }
    
  
  <тело>
     
Название документа
 
    <дел>
      
Выравнивание текста по центру задается свойством CSS text-align

Попробуй сам »

Пример HTML-тега

, используемого с тегом
:

 

  <голова>
    Название документа
  
  <тело>
    
 Внутри абзаца можно поставить тег <br />, 
 для переноса части текста на другую строку при необходимости. 

    
Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. 
 Этот отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона «О Finibus Bonorum et Malorum» для использования в книге образцов шрифтов.

Попробуй сам »

Тег

также поддерживает глобальные атрибуты и атрибуты событий.

Как оформить тег

?

Общие свойства для изменения визуального веса/выделения/размера текста в теге

:

  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
  • Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
  • Свойство CSS font-size устанавливает размер шрифта.
  • Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
  • Свойство CSS text-transform управляет регистром и регистром текста.
  • Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цветной текст в теге

:

  • Свойство CSS color описывает цвет текстового содержимого и оформления текста.
  • Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:

  • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
  • Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
  • Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
  • Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства тега

, на которые стоит обратить внимание:

  • Свойство CSS text-shadow добавляет тень к тексту.