Что такое p в html – Html теги (на примере p, br, hr) и их атрибуты | Создание сайтов и заработок в сети

Leave a Comment / Html / By /

Тег | HTML справочник

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

Описание

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

Для определения абзаца в HTML-документе используется тег <p> (p — сокращение от англ. слова paragraph — абзац). При отображении тега <p>, браузер автоматически вставляет до и после него отступы, отделяя его, таким образом, от других элементов, размер отступов можно изменить с помощью стилей CSS. Для разрыва строки внутри абзаца используется тег <br>.

HTML тег <p>, вместе со всем его содержимым, относится к блочным элементам, при отображении он будет занимать всю доступную ему ширину, а высота будет зависеть от содержимого.

Примечание: cтоит обратить внимание на то, что все пробелы поставленные между открывающим тегом <p> и его содержимым будут игнорироваться браузером, также как и все пробелы между содержимым и закрывающим тегом </p>. Поэтому, такую банальную вещь, как красная строка, не получится сделать лишь поставив несколько дополнительных пробелов перед текстом, но с этой проблемой легко будет справиться с помощью CSS свойства text-indent, которое позволяет не только задать красную строку, но и точно определить размер отступа для нее.

Атрибуты

Тег <p> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


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

Пример


<p>Этот текст находится в абзаце.</p>
<p>Это второй абзац на странице.</p>
<p>А это третий абзац.</p>

Результат данного примера в окне браузера:

Пример использования тега <p>

| Справочник HTML

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

Примечание: Чтобы увеличить или уменьшить расстояние между абзацами используйте CSS свойство margin (внешние отступы элемента), не используйте для этих целей HTML тег <br>, который предназначен для перевода строки внутри абзаца.

Синтаксис

<p>Текст</p>

Закрывающий тег

Не обязателен.

Атрибуты

alignУстарел в HTML5
Определяет выравнивание текста в абзаце. Используйте CSS вместо данного атрибута.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

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

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

Различия между HTML 4.01 и HTML5

Атрибут align не поддерживается в HTML5.

Пример использования:

Абзацы маркируется следующим образом:

Пример HTML:

Попробуй сам
<p>Это параграф.</p>
<p>Это тоже параграф.</p>
<p>И это тоже параграф.</p>

Спецификации

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

Элемент
<p> 1+ 1+ 1+ 1+ 1+ 1+
Элемент
<p> 1+ 1+ 6+ 1+

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

Как внутри абзаца перенести текст на новую строку:
Перевод строк

Как форматировать текст внутри абзаца:
Форматирование текста

Учебник HTML

HTML уроки: HTML Элементы

HTML Форматирование


| HTML | WebReference

Определяет текстовый абзац. Элемент <p> (от англ. paragraph — абзац, параграф) является блочным, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой

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

Закрывающий тег

Не обязателен.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>P</title>
 </head>
 <body>
  <p>Рекомендуется совершить прогулку на лодке по каналам города и Озеру Любви.</p>
  <p>Венгры страстно любят танцевать, особенно ценятся национальные танцы.</p>
  <p>Из первых блюд распространены супы-пюре и бульоны, но подают их редко.</p>
 </body>
</html>

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

Абзацы текста

Рис. 1. Абзацы текста

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег P

Определяет текстовый параграф. Тег

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

Синтаксис
<p>Текст
<p>Текст</p>

Закрывающий тег
Не обязателен.

Параметры
align — определяет выравнивание текста.

Пример 1. Использование тега P

<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Описание параметров тега P

Параметр ALIGN

Описание
Выравнивание блока текста по краю.

Синтаксис
<p align=left | center | right | justify>…</p>

Аргументы
left — выравнивание текста по левому краю.
center — выравнивание по центру.
right — выравнивание по правому краю.
justify — выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию
left

Пример 2. Выравнивание текста

<html>
<body>
<p align=justify>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

seodon.ru | Теги HTML — Тег P

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <P> применяется для разделения страницы на параграфы. Он может содержать только текст и inline-теги (теги уровня строки). При этом сам тег <P> является блочным, то есть создает перенос строки перед собой и после себя. Кроме этого, он устанавливает поля (margin) свободного пространства сверху и снизу от своих сторон до окружающего контекста, благодаря чему и происходит визуальное разбиение страницы на параграфы. Размер полей тега <P> зависит от типа браузера, но примерно он равен высоте одной строки текста на текущей странице.

Закрывающий тег </P> не является обязательным. Если он отсутствует, то концом параграфа будет считаться первый не-inline-тег расположенный ниже в HTML-коде страницы.

Атрибуты

Личные атрибуты:

  • align — Устанавливает горизонтальное выравнивание содержимого параграфа.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (блоки).

Модель тега: block (блочный, уровня блока).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: не обязателен.

Синтаксис

<p>содержимое</p>

Пример HTML: применение тега P

<!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>seodon.ru - Применение тега P</title>
 </head>
 <body>
  <p>Одной из ошибок начинающих создателей сайтов является использование неоднородных
     изображений или ярких цветов для фона текстовой информации на странице.
     Это не только затрудняет чтение, но и пагубно влияет на зрение пользователей,
     заставляя их всматриваться в каждую строчку и излишне напрягать глаза.</p>
  <p>Еще одна ошибка — это использование «где ни попадя» инвертированных цветов, когда 
     визуально цвет текста светлее фона, например черный фон — белый текст. Данная
     техника вполне применима, но только там, где это действительно к месту.</p> 
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:		HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Для чего нужен тег span в HTML?

Приветствую вас, дорогой друг!
В этой статье речь пойдет про тег span в html для чего он нужен, какие имеет особенности и почему его так часто используют в современной вёрстке.

Навигация по статье:

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

Пример использования тега span в HTML:

<p>Здесь мы пишем какой то текст, а потом меняем цвет фона у <span>этого фрагмента</span>.</p>

<p>Здесь мы пишем какой то текст, а потом меняем цвет фона у <span>этого фрагмента</span>.</p>

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

<p>Выделяем <span>фрагмент текста</span>.</p>

<p>Выделяем <span>фрагмент текста</span>.</p>

CSS

.m-span { border-bottom:1px solid red; font-family:Verdana; font-weight:bold; }

.m-span  {

border-bottom:1px solid red;

font-family:Verdana;

font-weight:bold;

}

Для чего нужен тег span в html?

Основные возможности:

  1. 1 Позволяет задать или изменить цвет, а так же тип шрифта и начертание для отдельного одного или нескольких слов или букв.

    <p><span style=”color:#ccc; font-family:Verdana;”>Пример текста</span></p>

    <p><span style=”color:#ccc; font-family:Verdana;”>Пример текста</span></p>

  2. 2 С его помощью можно задать фон для отдельного фрагмента текста.

    <p> Пример <span style=”background:red;”> выделенного цветом </span> текста </p>

    <p> Пример <span style=”background:red;”> выделенного цветом </span> текста </p>

  3. 3 Можно создать эффект заглавной буквы, обернув её в этот тег и выделить другим цветом и размером.

    <p><span>С</span>лово</p>

    <p><span>С</span>лово</p>

  4. 4 Возможность задать разное форматирование для отдельных фрагментов текста.

    <p>Благодаря этому HTML тегу мы можем <span>выделить</span> фрагмент текста дргим <span>цветом</span></p>

    <p>Благодаря этому HTML тегу мы можем <span>выделить</span> фрагмент текста дргим <span>цветом</span></p>

Основные особенности тега span в html:

  1. 1 Он является строчным элементом и с его помощью можно задать стиль написания для одного слова или даже буквы.
  2. 2 Не занимает всю ширину строки, как например div, p, h2-h6, а подстраивается под ширину слова или нескольких слов, которые в нём находятся.
  3. 3 Поддерживается всеми браузерами, включая браузеры мобильных устройств.
  4. 4 Так как это строчный элемент, то для него не работает вертикальные внешние отступы (margin), а так же выравнивание по центру с помощью margin:auto;
  5. 5 Так же для span не работает CSS свойство width. Ширина подстраивается под количества текста внутри него.

Если вам нужно чтобы для тега span срабатывали свойства width и вертикальный margin, то можно дописать ему css свойство display:inline-block;.

Чем тег span отличается от div?

  1. 1 Div является блочным элементом HTML, который используется для формирования структуры страницы, а тег span является строчным элементом и используется в основном для выделения и форматирования отдельных фрагментов текста.
  2. 2 По умолчанию текст обтекает тег span, а не переходит на другую строку как в случае с div.
  3. 3 Для span не работает вертикальный margin и margin:auto;
  4. 4 Div занимает всю ширину родительского блока, а span подстраивается под ширину вложенного в него текста.
  5. 5 Тег span размещается внутри тегов div, p, h2-h6, тег div, наоборот содержит в себе другие теги.

Надеюсь, что помогла вам разобраться с вопросом для чего нужен тег span в HTML. Если вы знаете другие его особенности, возможности и сферы применения – пишите об этом в комментариях.

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

Успехов вам и процветания!

С уважением Юлия Гусарь

| HTML | WebReference

Элемент <a> (от англ. anchor — якорь) является одним из важных в HTML и предназначен для создания ссылок. Для этого необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа, на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="<адрес>">...</a>

Закрывающий тег

Атрибуты

coords
Устанавливает координаты активной области.
download
Предлагает скачать указанный по ссылке файл.
href
Задаёт адрес документа, на который следует перейти.
hreflang
Идентифицирует язык текста по ссылке.
name
Устанавливает имя якоря внутри документа.
rel
Отношения между ссылаемым и текущим документами.
rev
Отношения между текущим и ссылаемым документами.
shape
Задаёт форму активной области ссылки для изображений.
target
Имя окна или фрейма, куда браузер будет загружать документ.
type
Указывает MIME-тип документа, на который ведёт ссылка.

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>А</title>
 </head>
 <body>
  <p><a href="image/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="page/tip.html">Как сделать такое же фото?</a></p> 
</body>
</html>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

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