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

Разное 

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

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

Абзацы

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

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

Для создания таких структурных единиц текста, как абзацы, в 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> определяет параграф или текстовый абзац. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину. Следующие один за другим абзацы разделяются между собой отбивкой, величину которой можно задавать при помощи CSS свойства margin. Для перевода строки внутри абзаца используется тег <br>.

Пробелы между открывающим тегом <p> и его содержимым игнорируются браузером. Чтобы установить отступ (красную строку), используйте CSS свойство text-indent.

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

Тег <p> не может содержать таблицы и другие блочные элементы.

Пример

<!DOCTYPE html>
 <html>
   <head>
      <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
          <p>Это параграф</p>
   </body>
 </html>

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

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    <style>
      div.paragraph {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок окна веб-страницы</h2>
    <div>
      <p>Выравнивание текста по центру установлено при помощи CSS свойства text-align</p>
    </div>
  </body>
</html>

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

Результат

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

Как добавить стиль к тегу <label> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <label>:

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

Цвет текста внутри тега <label>:

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

Стили форматирования текста для тега <label>:

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

Другие свойства для тега <label>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Тег 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 Следующий ❯


ВЫБОР ЦВЕТА

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

900364 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


3 Top4 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

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


Пример

Установите для параметра «autoplay» значение «true», чтобы звук начинал воспроизводиться как как только страница загрузится:


 

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

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

Тег используется для определения параметров элемент <объект>.

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

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

Элемент
<параметр> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
имя имя Задает имя параметра
значение значение Задает значение параметра

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

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

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

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

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

Ссылка HTML DOM: Parameter Object

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

param {
;
}

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


ВЫБОР ЦВЕТА

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

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *