HTML: <p> tag
This HTML tutorial explains how to use the HTML element called the <p> tag with syntax and examples.
Description
The HTML <p> tag defines a paragraph in the HTML document. This tag is also commonly referred to as the <p> element.
Syntax
In HTML, the syntax for the <p> tag is:
Sample Output
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <p> tag:
| Attribute | Description | HTML Compatibility |
|---|---|---|
| align | Alignment of the text | Obsolete in HTML5, use CSS |
- The HTML <p> element is found within the <body> tag.
- It is the most commonly used block-level element.
- Paragraphs defined with the <p> tag have extra spacing before and after the <p> tag.
Browser Compatibility
The <p> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <p> tag below, exploring examples of how to use the <p> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
- HTML5
- HTML4
- XHTML
HTML5 Document
If you created a new web page in HTML5, your <p> tag might look like this:
In this HTML5 Document example, we have created two <p> tags that appear under the <h1> tag.
HTML 4.01 Transitional Document
If you created a new web page in HTML 4.01 Transitional, your <p> tag might look like this:
In this HTML 4.01 Transitional Document example, we have created two <p> tags that appear under the <h1> tag.
XHTML 1.0 Transitional Document
If you created a new web page in XHTML 1.0 Transitional, your <p> tag might look like this:
In this XHTML 1.0 Transitional Document example, we have created two <p> tags that appear under the <h1> tag.
XHTML 1.0 Strict Document
If you created a new web page in XHTML 1.0 Strict, your <p> tag might look like this:
In this XHTML 1.0 Strict Document example, we have created two <p> tags that appear under the <h1> tag.
XHTML 1.1 Document
If you created a new web page in XHTML 1.1, your <p> tag might look like this:
In this XHTML 1.1 Document example, we have created two <p> tags that appear under the <h1> tag.
How to Use the < p > Tag in HTML
In HTML, paragraphs are defined with the HTML tag <p>. A paragraph element in an HTML document is made up of content — text, images, or other content like form fields — that appears between an opening <p> tag and closing </p> tag.
Paragraphs belong to the class of elements called block-level elements. A block-level element starts on a fresh line and may take up the entire width of either the page or its container, depending on its width and what’s defined in the CSS.
In this post, we’ll explain how to use the
tag in HTML, including when you need to use it, when you can omit it, and how you can style it to your liking. But first, let’s start with an example to get us warmed up.
HTML <p> Tag
The HTML <p> tag is a block-level element that is used to define a paragraph of text in a web page. It creates a new line before and after the element, taking up the full width of its parent container.
This semantic tag is commonly used to structure text content on a web page, such as articles, blog posts, or product descriptions. You can add other HTML tags, such as <strong> or <em> , within the <p> tag to add emphasis or formatting to specific words or phrases within the paragraph.
Properly structuring your text content with the <p> tag is important, as it can help improve the accessibility and usability of your web page. Screen readers and other assistive technologies rely on semantic tags like <p> to accurately interpret and present the content to users.
Syntax
The <p> tag comes in pairs. The content is written between the opening (<p>) and closing (</p>) tags. If the closing tag is omitted, it is considered that the end of the paragraph matches with the start of the next block-level element.
Разметка текста с помощью HTML
Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое.
Абзацы [1/17]
В курсе «Структура HTML-документа» вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, и с некоторыми служебными тегами, которые не отображаются в браузере.
В этом курсе мы будем изучать теги для логической разметки текста. Использовать их можно только внутри тега <body> .
Начнём с простейшего тега <p> , с помощью которого создаются абзацы. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы, которыми можно управлять с помощью стилей.
Заголовки и подзаголовки [2/17]
Для создания структуры больших текстов обычно используются заголовки. В текстовых редакторах есть возможность выделить часть текста, найти пункт «Заголовок» нужного уровня в меню, и применить его.
В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от <h1> до <h6> . Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.
На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h1> , <h2> и <h3> .
Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.
Неупорядоченный список [3/17]
Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста. Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список».
В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений. В последующих заданиях мы будем тренироваться работать с ними.
Неупорядоченные (или маркированные) списки создаются с помощью тега <ul> (Unordered List — неупорядоченный список), который может содержать внутри себя теги <li> (List Item, элемент списка), обозначающие «элемент списка».
Упорядоченный список [4/17]
Упорядоченный список создаётся с помощью тега <ol> , который может содержать внутри себя теги <li> .
Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.
Для упорядоченного списка можно задать атрибут start , который изменяет начало нумерации. Например, код:
Приведёт к такому результату:
- раз
- два
Многоуровневый список [5/17]
Создать многоуровневый список достаточно просто.
Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li> , добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.
В примере с ошибкой вложенный список вставлен не внутрь элемента списка, а между элементами, что недопустимо.
Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.
В этом задании мы потренируемся работать с многоуровневыми списками.
Ещё более многоуровневый [6/17]
Хорошо. Вы создали двухуровневый список. Теперь задание посложнее.
В этом задании вам нужно будет создать четырёхуровневый список, наподобие этого:
- Разметка
- Основы HTML
- HTML-теги
- парные
- одиночные
- Селекторы
- по типу
- по классу
- вложенные
Список определений [7/17]
Список определений создаётся с помощью трёх тегов:
- <dl> (Definition List) обозначает сам список определений;
- <dt> (Definition Term) обозначает термин;
- <dd> (Definition Definition) обозначает определение термина.
Теги <dt> и <dd> пишутся парами внутри <dl> .
Важность. Теги strong и b [8/17]
Ещё раз отметим, что этот курс посвящён логической разметке текста, поэтому уделяется особое внимание смыслу элементов, их предназначению, а не визуальному форматированию.
В предыдущих заданиях вы познакомились с элементами, которые предназначены для разметки крупных блоков текста: заголовков, абзацев и списков. В этом и последующих заданиях мы познакомимся с элементами, предназначенными для разметки небольших фраз и отдельных слов.
Первые два тега предназначены, чтобы указать на важность слова или фразы.
Тег <strong> определяет важность отмеченного текста.
Тег <b> предназначен для выделения текста без придания ему особой важности.
Визуально оба тега одинаковы, они выделяют текст полужирным.
Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong> . То же самое касается и тегов <em> и <i> . Тег <em> «говорилка» будет выделять интонацией.
Акцентируем внимание. Теги em и i [9/17]
Следующие два тега предназначены для акцентирования внимания на слово или фразу.
Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Например, если мы хотим подчеркнуть, что Кекс не любит питаться укропом (он больше за тунца), а любит только гонять его по полу, то разметим текст так:
Тег <i> обозначает текст, который отличается от окружающего текста, но не является более важным. Обычно так выделяют названия, термины, иностранные слова.
Например, если мы хотим указать, что инспектор — это какой-то специальный термин, то разметим текст так:
Визуально оба тега одинаковы, они выделяют текст курсивом.
Переносы и разделители. Теги br и hr [10/17]
Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.
Для этого в HTML предусмотрен одиночный тег <br> .
Одиночный тег <hr> используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS (это будет изучаться в последующих курсах).
- HTML-теги
- Основы HTML