Создание разрывов строк и абзацев с помощью тегов P и BR

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

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

Правильное использование элемента абзаца HTML

Элемент абзаца

используется как пара тегов с 

 тег, открывающий элемент и 

 закрывающий его тег. При написании HTML4 или HTML5, конечный тег технически не требуется, но рекомендуется закрыть этот тег. В XHTML закрывающий требуется.

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

Пришло время всем хорошим людям прийти на помощь своей стране. Быстрая коричневая лисица перепрыгнула через ленивого спящего пса.

instagram viewer

Между открывающим и закрывающим тегами абзаца может быть много других тегов.

Правильное использование элемента разрыва строки HTML

Элемент разрыва строки
тег - это одноэлементный тег - у него нет конечного тега. В XHTML вы должны использовать тег с последней косой чертой (
), но в HTML (включая HTML5) это не обязательно.

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

Вот пример разрыва строки внутри абзаца:

Пришло время всем хорошим людям прийти на помощь своей стране.

Быстрая коричневая лисица перепрыгнула через ленивого спящего пса.


Поскольку тег разрыва строки является одноэлементным тегом, в нем нельзя использовать другие теги.

Распространенные злоупотребления

а также
Теги

Люди, плохо знакомые с кодированием, делают некоторые типичные ошибки с элементами абзаца и разрыва строки при разметке веб-страницы.

  • С использованием
    изменить длину текстовой строки
    : Использование тега break в попытке заставить текст отображаться или разрываться определенным образом гарантирует, что ваши страницы отлично смотрятся в вашем браузере, но не обязательно в другом браузере и, конечно, не во всех устройств. Если ваш сайт отзывчивый веб-сайт, он меняет свой макет в зависимости от размеров экрана. Браузер автоматически переносит слова, а затем, когда дело доходит до
    тег, он снова обертывает текст, в результате чего появляются короткие и длинные строки, а также прерывистый текст. Вы должны использовать Таблицы стилей CSS чтобы диктовать визуальные стили вместо того, чтобы пытаться принудительно создавать макет, добавляя определенные элементы HTML.
  • С использованием чтобы добавить пространство между элементами: И снова мы обращаемся к HTML для создания визуального макета, в данном случае с интервалом, вместо использования CSS. Это обычная практика некоторых редакторов HTML, и, хотя это не является технически неправильным, это приводит к неуклюжему виду HTML и может сбивать с толку при последующем редактировании. Это также не соответствует веб-стандартам и разделению структуры и стиля. В некоторых случаях использование неразрывного пробелы внутри тегов абзаца, которые в противном случае были бы пустыми, в разных браузерах может появиться неожиданный интервал, поскольку все они интерпретируют это по-разному. Лучшее решение для достижения необходимого расстояния между элементами в вашем дизайне - использование таблиц стилей.
instagram story viewer