Html тег абзац – Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01

Как сделать красную строку в html или отступ первой строки в абзаце : WEBCodius

Добрый день уважаемые читатели. Сегодня короткая заметка о том как сделать красную строку для каждого абзаца на html — странице. Если кто не знает, то красная строка это отступ первой строки в блоке текста. Такой отступ в абзацах можно встретить практически в любом печатном тексте, но при создании веб-сайтов оформление красной строки встречается довольно редко, несмотря на то, что она позволяет гораздо удобнее воспринимать текст. На случай если вдруг заказчик потребует, чтобы абзацы на его сайте начинались с красной строки, то привожу для вас простой рецепт решения этой задачи.

Решить задачу можно многими способами, например можно в начале каждого абзаца вставлять подряд несколько специальных символов &nbsp;, но это может занять достаточно большое количество времени. Поэтому я рекомендую для создания красной строки использовать свойство CSS <strong>text-indent</strong>, которое задает отступ первой строки блока текста. При этом никакого воздействия на остальные строки не производиться.

Свойство

text-indent имеет простой синтаксис:

text-indent: <значение> | <проценты> | inherit

В качестве значений можно указывать пиксели (px), пункты (pt) другие единицы принятые в CSS. Значение определяет на сколько сдвинуть текст первой строки в право от исходного положения. Допустимо указывать отрицательные значения, тогда текст сдвинется влево. При указании процентных значений, отступ первой строки вычисляется в зависимости от ширины блока текста.

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

<style>
p {
text-indent: 25px; /* Отступ первой строки в пикселах */
}
</style>

Например:

<html>
   <head>
     <meta charset="utf-8">
     <title>Красная строка</title>
     <style>
       p {
         text-indent: 25px; /* Отступ первой строки в пикселах */
       }
     </style>
   </head>
   <body>
     <p>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.

     </p>
     <p>
Этот дуб как будто говорил: «Весна, и любовь, и счастье! И как не надоест вам все один и тот же глупый, бессмысленный обман! Все одно и то же, и все обман! Нет ни весны, ни солнца, ни счастья. Вон смотрите, сидят задавленные мертвые ели, всегда одинокие, и вон я растопырил свои обломанные, ободранные пальцы, выросшие из спины, из боков — где попало. Как выросли — так и стою, и не верю вашим надеждам и обманам».
     </p>
     <p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
     </p>
   </body>
</html>

Результат:

text-ident

Посмотреть в браузере

Если красную строку необходимо добавить только в один абзац, то можно сделать так:

<p>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.</p>

Результат:

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

Либо к абзацам, которые должны начинаться с красной строки добавляем атрибут class и добавляем нужный стиль:

<style>
   p.indent {
     text-indent: 25px;
   }
</style>
<p>
 Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>

Результат:

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

Теперь вы запросто сможете сделать красную строку на своих html страницах. До новых встреч!

HTML теги внутри абзаца

Чтобы охватить основные вопросы, связанные с действительностью вашего HTML или, в частности, с действительностью вашего HTML:

  1. элемент <p> не может содержать другой элемент блока, он может содержать только, "phrasing content," и его:

конечный тег может быть опущен, если за элементом

p сразу следует address , article , aside , blockquote , div , dl , fieldset , footer , form , h2 , h3 , h4 , h5 , h5 , h6 , header , hgroup , hr , main , nav , ol , p , pre , section , table , или ul, element…

Поэтому, если браузер встречает вложенный <p> , то вложенный <p> немедленно интерпретируется как родственный элемент текущего открытого элемента <p> (посторонние конечные теги просто отбрасываются как ошибочная разметка). Поскольку содержимое этих вложенных элементов не является синтаксически или семантически – абзацем , я преобразовал их в элементы <span> , которые являются контейнерами 'neutral' (они не подразумевают ничего из содержимого), которые могут содержаться в элементе <p>

и содержать содержимое фразы.

  1. Атрибут units является нестандартным, пользовательским, созданным пользователем атрибутом и поэтому недействительным; однако пользовательские атрибуты разрешены, если им предшествует префикс data- ; поэтому, чтобы сделать ваши атрибуты действительными, я просто преобразовал их из units в data-units .

Тем не менее, это результат HTML (этой части), обратите внимание, что я также переместил период закрытия предложения в абзац для синтаксической правильности:

<p>This is the start of the article and this shoe is only available in
  <span data-units="US">11.5</span>
  <span data-units="EU">45</span>.</p>

Теперь ваш вопрос состоял в том, как использовать кнопку для отображения/скрытия информации о размерах, чтобы показать либо размер US, либо размер EU; сделать это проще с помощью JavaScript, но есть (немного грязный) хак, позволяющий native HTML и CSS реализовать это поведение с использованием элементов <label> и <input>

.

Элемент <label> связан с элементом <input> элемента type="radio", и соответствующие радиовходы имеют одно и то же имя, так что только один может быть выбран одновременно.

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

На практике это дает:

label {
  /* irrelevant, and merely for aesthetics: */
  box-sizing: border-box;
  width: 3em;
  height: 2em;
  background-color: #999;
  color: #fff;
  font-weight: 900;
  border-radius: 0.5em;
  padding: 0.25em;
}
/* the :checked pseudo-class allows us to select
   the selected/'checked' input, and the adjacent
   sibling combinator ('+') traverses from the
   checked input to the adjacent label element: */

input:checked + label {
  background-color: limegreen;
}
/* visually moving the inputs of 'type=radio' (using
   a CSS attribute-selector) off the page, so it's
   not visible to the user; choose any suitably large
   value according to your preference: */

input[type=radio] {
  position: absolute;
  left: -10000px;
}
/* hiding all span elements with a 'data-units'
   attribute: */

span[data-units] {
  display: none;
}
/* if the element with the id of 'us' is checked
   we traverse to the later paragraph siblings
   (using the general-sibling combinator ('~')
   and from those paragraphs we find the descendant
   span elements with a data-unit attribute-value of
   'US' and display them as 'inline-block': */

#us:checked ~ p span[data-units=US] {
  display: inline-block;
}
/* as above, but we use the id of 'eu' to ultimately
   find the spans with the data-attribute of 'EU': */

#eu:checked ~ p span[data-units=EU] {
  display: inline-block;
}
/* this selects the spans with the data-units attribute
   and creates some generated content to show the sizing
   (in case the selected sizing is off-screen, perhaps;
   here we generate the string of ' (US)' or ' (EU)'
   although the US and EU can be replaced by whatever is held
   in the data-units attribute: */

span[data-units]::after {
  content: ' (' attr(data-units)')';
  color: #999;
  font-size: smaller;
}
<!-- the input here precedes the associated label (note the shared
     id of the input and the 'for' of the label) in order to allow
     the label to have a 'selected' state; the inputs also precede
     the paragraph containing the elements to toggle, in order for
     the CSS cascade to work -->
<input type="radio" name="sizing" checked />
<label for="us">US</label>
<input type="radio" name="sizing" />
<label for="eu">EU</label>

<p>This is the start of the article and this shoe is only available in <span data-units="US">11.5</span>  <span data-units="EU">45</span>.</p>

Яш Fiddle демо .

Рекомендации:

  • HTML технические характеристики:
  • CSS:

Как сделать в HTML красную строку?

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

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

Давайте рассмотрим с вами, как делается в HTML красная строка.

Стилевое свойство в HTML для красной строки

Итак, для расстановки красной строки при верстке станицы в HTML предусмотрено специальное свойство text-indent, которое задается внутри тега с указанием величины отступа с начала строки.

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

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

<p > Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел «&nbsp;» </p>

<p >

Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел «&nbsp;»

</p>

Вот как это выглядит:

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

Как задать красную строку для всего сайта?

Конечно же, способ задания в HTML красной строки удобен в использовании только в том случае, если перед вами стоит задача задать отступ только для определенных абзацев, в каком-то конкретном случае.

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

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

Например:

#content p{ text-indent: 20px; }

#content  p{

text-indent: 20px;

}

В данном случае все абзацы

находящиеся в блоке с идентификатором #content будут начинаться с красной строки.

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

Надеюсь, данная статья поможет вам оформить контент на вашем сайте, и сделать текст более приятным для чтения и восприятия пользователями.

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

До встречи в следующих статьях!

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

💣теги html абзац ✔️

теги html абзац .

#40 Абзац на html, Как сделать абзац на сайте тег p и pre
Нажми для просмотра
Абзац на html, Как сделать абзац на сайте тег p и pre. В этом видео уроке я расскажу вам как сделат...
 
 
 
Тэги:
 
#36 Перенос строки тег br, символ абзаца на html
Нажми для просмотра
Перенос строки тег br, символ абзаца на html. В этом видео я расскажу как сделать перенос строки,...
 
 
 
Тэги:
 
HTML-заголовки (h2, h3) и основной текст — тег параграфа. Курс по HTML  (6 из 20)
Нажми для просмотра
Курс по HTML — Как верстать текст, ставить заголовки и оформлять основной текст ...
 
 
 
Тэги:
 
Цвет текста html
Нажми для просмотра
Урок 3: Учимся менять цвета в HTML. Изменяем цвет текста. Изменяем цвет фона. html цвета. Фон сайта. опреде...
 
 
 
Тэги:
 
Абзацы и параграфы в HTML-документе: HTML тег P
Нажми для просмотра
В данном видео уроке мы поговорим о назначении HTML тега P и особенност ях HTML элемента P. Стоит сказать,...
 
 
 
Тэги:
 
Абзац в html, тег, код,
Нажми для просмотра
Абзац в html, тег, код, разберем как делаеися абзац в html, как обозначает ся абзац в html,...
 
 
 
Тэги:
 
Тег h2 и другие заголовки HTML 5
Нажми для просмотра
Существует шесть заголовков разного уровня, которые показывают относитель ную важность..Т еги h2, h3, h4, h5,...
 
 
 
Тэги:
 
Html теги br и p (перевод строки и абзац)
Нажми для просмотра
Html теги br и p (перевод строки и абзац) Для тех, кто хочет поддержать канал донатами. Z131934007101 R144580171997.
 
 
 
Тэги:
 
HTML для начинающих - #6 - Ссылки
Нажми для просмотра
Пройди БЕСПЛАТНО профориент ацию в IT - Настала пора воздать должное гиперссылк ам, или по ...
 
 
 
Тэги:
 
Учим HTML за 1 Час! #От Профессионала
Нажми для просмотра
Хотите выучить HTML всего за 1 Час и при этом сделать это качественн о? - Тогда смотрите от профессион ала...
 
 
 
Тэги:
 
HTML оформление текста
Нажми для просмотра
А вот и новый урок, в котором вы узнаете про спецсимвол ы в HTML, а также познакомит есь с тегами, которые...
 
 
 
Тэги:
 
Учим CSS за 1 час! #От Профессионала
Нажми для просмотра
Хотите выучить CSS всего за 1 Час и при этом сделать это качественн о? - Тогда смотрите от профессион ала как!...
 
 
 
Тэги:
 
HTML5 уроки для начинающих
Нажми для просмотра
В продолжени е предыдущег о урока мы поговорим о тегах, которые служат для форматиров ания текстов. Теги,...
 
 
 
Тэги:
 
Изучаем html блок div
Нажми для просмотра
В этом уроке мы создадим простую конструкци ю из четырех блоков div на веб странице, тем самым мы положим нача...
 
 
 
Тэги:
 
Как выровнять картинку по центру div с помощью CSS?
Нажми для просмотра
В этом видео я покажу вам три техники с помощью которых можно выровнять картинку по центру div. Заходите...
 
 
 
Тэги:
 
Формируем заголовки h2-H6 на страницах сайта
Нажми для просмотра
В данном видео как формируютс я заголовки на страницах сайта и наибольшее внимание уделю заголовку в теге...
 
 
 
Тэги:
 
Абзац и перенос строки в HTML
Нажми для просмотра
Чем отличается абзац от переноса строки и как использова ть в HTML. Больше уроков: html<...
 
 
 
Тэги:
 
HTML для начинающих. Заголовки, Абзац и атрибут Style. #3.
Нажми для просмотра
В данной серии видео уроков вы научитесь языку гипертекст овой разметки HTML. Быть Программис том в Telegram -...
 
 
 
Тэги:
 
HTML-списки: теги OL, UL и LI. Курс по HTML  (8 из 20)
Нажми для просмотра
Курс по HTML — Вёрстка списков нумерованн ых и неупорядоч енных.Очен часто в ...
 
 
 
Тэги:
 
Введение в HTML. Урок 9  Форматирование текста с помощью HTML тегов
Нажми для просмотра
В этом уроке мы познакомим ся с парой тегов, позволяющи м нам форматиров ать содержимое веб страницы,...
 
 
 
Тэги:
 
#39 Заголовок на языке HTML тег h2-h6
Нажми для просмотра
Заголовок на языке HTML тег h2-h6. В этом видео я расскажу как сделать заголовок на языке html. Мы будем...
 
 
 
Тэги:
 
#37 Выравнивание текста по центру в html тег center
Нажми для просмотра
Выравниван ие текста по центру в html тег center. В этом видео я расскажу вам про выравниван ие текста по центр...
 
 
 
Тэги:
 

HTML :: Абзац, заголовки, преформатированный текст

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

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

Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от <h2> до <h6> (от англ. headingзаголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности.

А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент 'преформатированный текст', который формируется парным тегом <pre> (от англ. preformatted textпредварительно форматированный текст). Браузеры отображают его как блочный элемент.

Рассмотрим наглядный пример использования вышеперечисленных элементов (см. пример №1).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Абзац, заголовки, преформатированный текст</title>
</head>
<body>
	<h2>Я &ndash; заголовок первого уровня.</h2>
	<p>
		Я &ndash; первый абзац.    Мои подряд идущие пробелы 	и переносы строк 
		преобразуются    браузером в     	один пробел.
	</p>
	
	<h4>Я &ndash; заголовок третьего уровня. У меня шрифт поменьше.</h4>
	
<pre>
А я &ndash; преформатированный      текст,     сколько        пробелов ,
символов табуляции 
	и переносов строк поставлено, столько и будет выведено.
Кстати, мой текст обычно выводится браузерами моноширинным шрифтом.
</pre>
	
	<h6>Я &ndash; заголовок шестого уровня. Поэтому и размер шрифта такой маленький.</h6>	
	
</body>
</html>

Пример №1. Код страницы, содержащей абзацы, заголовки и преформатированный текст

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

Абзац в веб-документе

Теперь, когда у вас есть базовая структура документа HTML, можно наконец добавить немного контента.

Вернитесь в текстовый редактор и добавьте в код вашей веб-страницы еще одну строку:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
    Это моя первая веб-страницы
    Вот здорово
</body>
</html>

Посмотрите на получившийся документ в браузере.

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


Это моя первая веб-страница Вот здорово

Это произошло потому, что браузер совершенно не обращает внимание на количество строк, на которых расположен код веб-страницы. Также ему безразлично сколько пробелов вы ввели между словами (вы получите тот же результат, если напишите " Это моя первая веб-страница Вот здорово").

Если вы хотите, чтобы текст отображался на разных строках, вы должны ясно указать это, определив абзац HTML.

Измените две строки вашего контента следующим образом:


<p>Это моя первая веб-страница</p>
<p>Вот здорово</p>

Тег <p> создает параграф или абзац HTML.

Посмотрите на получившуюся веб-страницу в браузере: теперь две строки текста в браузере отображаются также на двух строках.

Рассматривайте контент HTML документа, как текст книги – с делением на параграфы и абзацы HTML там, где это необходимо.

Выделение текста

Вы можете внутри абзаца HTML выделять текст при помощи тега <em> (акцент) и тега <strong> (усиленный акцент). Оба эти тега в принципе делают одно и то же – выделяют текст, хотя традиционно браузеры отображают текст внутри тега <em> курсивом, а внутри тега <strong> жирным шрифтом.


<p>
    Вот это <em>простой акцент</em>.
    А это <strong>усиленный акцент</strong>.
</p>

Разрыв строки

Для разделения строк также можно использовать тег разрыва строки <br>:


Это моя первая веб-страница<br />
Вот здорово!

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

Обратите внимание, что в связи с тем, что внутри элемента разрыва строки не используется контент, у него нет закрывающего тега, и он закрывает сам себя при помощи символа "/", который следует за именем тега "br".

Пустые теги абзацев - должен ли я разрешить в Редакторе HTML или нет?

Я использую CKEditor 4, который, кажется, имеет настройку по умолчанию использования <p></p> для обозначения пустой строки. До сих пор я всегда видел пустые строки в HTML, представленные <p>&nbsp;</p> - ie. не пустой тег.

Таким образом, вывод по умолчанию CKEditor представляет собой пустую строку, например:

<p>paragraph before blank line</p>
<p></p>
<p>paragraph after blank line</p>

Проблема в том, что для разнообразия IE7, 8, 9, похоже, отображают этот "correctly" как пустую строку, тогда как Firefox и Chrome этого не делают - они, похоже, игнорируют пустые теги <p> и <div> с точки зрения компоновки.

Поэтому на данный момент я должен сказать CKEditor, чтобы включить &nbsp; в пустые строки (по какой-то причине это не является настройкой по умолчанию) и в конечном итоге заменить любые вхождения пустых тегов <p> , которые могут проскочить.

Мой вопрос в том, что такое золотой стандарт для представления пустых строк в HTML? Старый добрый <p>&nbsp;</p> или что-то еще?

Кроме того, учитывая, что значение по умолчанию CKEditor-это пустой тег <p> для пустых строк, разве Chrome и Firefox не должны игнорировать их? Или IE неправильно отображать их как пустые строки, и по умолчанию CKEditor действительно должен использовать <p>&nbsp;</p> ?

html blank-line

Поделиться Источник ingredient_15939     13 февраля 2013 в 07:16

4 Ответов



27

Согласно HTML 4.01 на элементе p , <p></p> является допустимым, но не должен использоваться, и браузеры должны игнорировать его. Поведение браузера непоследовательно и, как правило, не подчиняется спецификации. Вы проверяете это с помощью <hr><hr><p></p><hr> например-на Chrome, он показывает, что хотя элемент p имеет нулевую высоту, он имеет верхние и Нижние поля, поэтому он влияет на рендеринг, т. е. не игнорируется. – Похоже, что HTML5 CR молчит об этом вопросе, т. е. он не говорит ничего конкретного об элементе p с пустым содержимым. Update: HTML5 имеет общее утверждение об элементах с содержанием фразировки в качестве режима содержимого (например, p): такой элемент должен содержать “должен иметь либо по крайней мере один текстовый узел-потомок, который не является межэлементным whitespace, либо по крайней мере один узел-потомок, который является встроенным содержимым”. Это означает, что <p></p> не следует использовать; но это рекомендация, а не требование соответствия (“should”, а не “shall”).

Эффект <p>&nbsp;</p> не определен спецификацией (рендеринг символа пробела без разрыва не был определен), но браузеры обычно рассматривают пространство без разрыва как еще один графический символ, который просто оказывается отрисованным с пустым глифом. Таким образом, на практике он генерирует линейный блок, высота которого определяется вычисленным значением line-height .

По умолчанию между элементами p имеются поля, соответствующие одной пустой строке. Таким образом, любая необходимость в пустой строке между элементами p , по-видимому, была вызвана переопределением стиля по умолчанию, чем-то вроде p { margin: 0 } в CSS. Чтобы переопределить это, следует использовать дополнительный элемент CSS, а не искусственный элемент p . То есть некоторые из элементов p должны иметь подходящее ненулевое нижнее или верхнее поле.

HTML 4.01 определяет “white space characters” как относящийся к Ascii пространству, Ascii вкладке, Ascii подаче формы и пространству нулевой ширины (таким образом, не к пространству без разрыва, например), определяет их рендеринг и добавляет: “эта спецификация не указывает поведение, рендеринг или иное, символов пробела, кроме тех, которые явно определены здесь как символы пробела. По этой причине авторы должны использовать соответствующие элементы и стили для достижения визуальных эффектов форматирования, которые включают пробелы, а не символы пробела.”

Поделиться Jukka K. Korpela     13 февраля 2013 в 09:19



2

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

От w3.org:

Мы не рекомендуем авторам использовать пустые P-элементы. Агенты пользователей должны игнорировать пустые P-элементы.

Я бы предложил, чтобы, когда вы, пользователи, создаете пустые строки, вы упаковывали их текст в абзацы.

Так что вместо того, чтобы:

before line break<p>&nbsp;</p>after line break

Вы должны генерировать

<p>before line break</p><p>after line break</p>

Это имеет смысл?

Поделиться Mikael Härsjö     13 февраля 2013 в 07:36



1

При кодировании с использованием стандартов, совместимых с кодированием HTML & CSS, ключевой фактор текстового контента веб-сайта будет помещен в обычный тег абзаца. Это записывается как <p> . Чтобы сделать SEO дружественным тексту абзаца при написании текста абзаца он платит за просмотр предыдущего подзаголовка, а затем создает содержимое веб-страницы, которое объясняет и расширяет текст этого заголовка. Да, вы должны использовать пустые теги абзацев в Редакторе HTML.

Поделиться Spook SEO     16 мая 2014 в 18:50



0

Я думаю, что для SEO нехорошо, что навигаторы отображают пустой <p> . Я заменяю его на js или php, прежде чем сохранить его на ddbb 🙂

Поделиться newpatriks     13 февраля 2013 в 08:11



Как убрать пустые теги абзацев

Я создаю приложение Rails 5. В этом приложении я получаю данные html из WYSIWYG-формы. В содержании от формы я получаю много пустого теги, как я могу удалить все эти пустые теги абзацев? Вот что я...


Пустые теги HTML

Есть ли способ иметь пустые теги HTML или, другими словами, теги, которые ничего не делают? Например, <p> превращает вложенный текст в абзац, <b> выделяет текст жирным шрифтом,...


Как проверить пустые места в Редакторе черновиков js

Как я могу проверить пустые есть пустые места в Редакторе? я не хочу отправлять форму, когда в редакторе есть пустые места. я использую эту функцию, которая обнаруживает, что редактор пуст или нет,...


wordpress визуальный редактор не генерирует теги html p для абзацев

wordpress визуальный редактор не генерирует теги html <p> для абзацев и, таким образом, не форматированный контент сохраняется в базе данных. Это приводит к отображению всех абзацев вместе на...


Удалить все пустые теги HTML?

Я представляю себе функцию, которая, как я полагаю, будет использовать Regex, и она будет рекурсивной для таких экземпляров, как <p><strong></strong></p> , чтобы удалить все...


Magento - как разрешить определенные теги (iframe, размещения) в Редакторе CMS Magento это?

Я хотел бы разрешить вводить определенные теги html, такие как iframe и вставлять в Редактор Magento CMS. Magento не позволяет использовать эти теги. Есть ли модель или контроллер, который я могу...


WordPress -- разрешить теги HTML в Редакторе wp

Я пытаюсь создать сайт wordpress, и я пытаюсь добавить следующее на страницу, используя текстовый редактор на wp-admin: <a target=divtarget id=link> <!--- ... --> </a> Проблема в...


Удалите пустые теги с помощью простого парсера HTML DOM

У меня есть вход html, который содержит много пустых сильных тегов. поэтому я хочу удалить эти пустые сильные теги из html. Я использовал простой HTML DOM, но это не работает...


Как проверить, имеет ли CKEditor некоторые теги HTML в нем?

Я хочу проверить проверку CK texteditor, является ли он пустым или нет Я применяю этот код:- if ($(.cleditorToolbar:eq(0)).next().next('iframe').contents().find('body').getInnerText().trim() == '')...


Наилучшая практика. Сохраняю ли я теги html в DB или сохраняю значение сущности html?

Мне было интересно, каким образом я должен сделать следующее. Я использую крошечный редактор MCE wysiwyg, который форматирует данные пользователей с правильными тегами html. Теперь мне нужно...


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

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