Когда дело доходит до изучения HTML, два тега, которые большинство людей изучают на ранних этапах, это теги абзаца и разрыва строки, которые являются <p> и <br /> соответственно. Эти теги создают естественный разрыв в вашем тексте, что облегчает чтение содержимого вашей веб-страницы. Хотя эти теги довольно просты в использовании, они также могут вызвать некоторую путаницу и могут быть использованы неправильно.
Правильное использование элемента абзаца HTML
Элемент абзаца <p> используется как пара тегов: тег <p> открывает элемент, а тег </ p> закрывает его. При написании HTML4 или HTML5 конечный тег технически не требуется, но рекомендуется закрывать этот тег. В XHTML закрытие </ p> обязательно.
Вы используете элемент абзаца на веб-сайте так же, как и при написании контента для вне-веб-нужд — когда вы хотите начать новую идею или точку. Большинство браузеров отображают абзацы с одной пустой строкой между ними. Вот пример абзаца в HTML:
<p> Теперь настало время всем добрым людям прийти на помощь своей стране. Быстрая коричневая лиса перепрыгнула через ленивую спящую собаку. </ P>
Многие другие теги могут появляться между открывающим и закрывающим тегами абзаца.
Правильное использование элемента разрыва строки HTML
Тег элемента разрыва строки <br> является одиночным тегом — он не имеет конечного тега. В XHTML вы должны использовать тег с окончательной косой чертой (<br />), но в HTML (включая HTML5) он не обязателен.
Элемент разрыва — это принудительный разрыв строки в текстовом потоке веб-страницы. Вы используете его, когда хотите, чтобы текст продолжался на следующей строке, но содержание не является отдельной идеей или точкой, что сделало бы его другим абзацем. Примером этого является поэзия, где разрывы строк обычно фиксируются.
Вот пример разрыва строки внутри абзаца:
<p> Теперь настало время всем добрым людям прийти на помощь своей стране. <br/>
Быстрая коричневая лиса перепрыгнула через ленивую спящую собаку. </ p>
Поскольку тег разрыва строки является одноэлементным тегом, другие теги нельзя использовать внутри него.
Распространенные злоупотребления тегами <p> и <br>
Люди, плохо знакомые с кодированием, допускают некоторые распространенные ошибки с элементами абзаца и разрыва строки при разметке веб-страницы.
- Использование <br> для изменения длины текстовой строки : Использование тега разрыва в попытке заставить текст появляться или разрываться особым образом гарантирует, что ваши страницы будут отлично выглядеть в вашем браузере, но не обязательно в другом браузере и, конечно, не на всех устройствах. Если ваш сайт адаптивный , он меняет свой макет в зависимости от размера экрана. Браузер автоматически вставляет перенос слов, а затем, когда дело доходит до тега <br>, он снова переносит текст, в результате чего появляются короткие и длинные строки и прерывистый текст. Вы должны использовать таблицы стилей CSS для определения визуальных стилей, вместо того, чтобы пытаться форсировать макет, добавляя определенные элементы HTML.
- Использование <p> & nbsp; </ p> для добавления пробела между элементами : еще раз, это превращается в HTML для создания визуальной разметки, в данном случае с пробелами, вместо использования CSS. Это обычная практика некоторых редакторов HTML, и хотя это не является технически неправильным, это приводит к неловкому HTML и может привести к путанице при редактировании позже. Это также не соответствует веб-стандартам и разделению структуры и стиля. В некоторых случаях использование неразрывных пробелов внутри в противном случае пустых тегов абзаца может привести к неожиданному интервалу в разных браузерах, поскольку все они, похоже, интерпретируют это по-разному. Наилучшее решение для достижения требуемых интервалов между элементами — использование таблиц стилей.