Теги html разрыв строки

Атрибуты

Устаревшие атрибуты

Определяет, где начинается следующая строка после перевода строки.

Стилизация с CSS

Элемент
имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.

Вы можете установить значение margin на
чтобы увеличить расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство line-height для этой цели.

Примеры

Простой br

В следующем примере мы используем элемент
для разрыва линий в почтовом адресе:

br> 331 E. Evelyn Avenuebr> Mountain View, CAbr> 94041br> USAbr> 

Результат будет выглядеть так:

Проблемы доступности

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

Техническая сводка

• Категории контентаОсновной поток, текстовый контент.
• Разрешённое содержимое Отсутствует, это пустой элемент.
• Пропуск теговДолжен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как
  .
• Допустимые родительские элементы Любой элемент, который поддерживает текстовый контент.
• Интерфейс DOMHTMLBRElement

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

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

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 5 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Теги html разрыв строки

Брутальный способ перенести текст или элемент на новую строку.

Время чтения: меньше 5 мин

Обновлено 7 сентября 2022

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

Правильное применение тега

Скопировать ссылку «Правильное применение тега» Скопировано

Стандарт однозначно описывает назначение этого тега и ситуации, в которых уместно его применение: этот тег указывает на место разрыва строки и принудительного переноса текста на новую строку. И только для этих целей он должен применяться. Яркий пример — деление стихотворения по строкам:

   Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.  p> Мой дядя самых честных правил,br> Когда не в шутку занемог,br> Он уважать себя заставилbr> И лучше выдумать не мог. p>    Скопировать Скопировано Не удалось скопировать   

Ещё одним примером может служить вёрстка почтового адреса, когда принципиально разнести части адреса по разным строкам:

   432000 г. Ульяновск ул. Ленина, д. 34  address> 432000br> г. Ульяновскbr> ул. Ленина, д. 34 address>    Скопировать Скопировано Не удалось скопировать   

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

Случаи неправильного применения тега

Скопировать ссылку «Случаи неправильного применения тега» Скопировано

Неправильное объединение элементов в группу

Скопировать ссылку «Неправильное объединение элементов в группу» Скопировано

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

   Имя: Адрес:  p> label>Имя: input name="name">label>br> label>Адрес: input name="address">label> p>    Скопировать Скопировано Не удалось скопировать   

 
Имя:
 
Адрес:
  p>label>Имя: input name="name">label>p> p>label>Адрес: input name="address">label>p>    Скопировать Скопировано Не удалось скопировать   

Вертикальные отступы

Скопировать ссылку «Вертикальные отступы» Скопировано

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

   
Контейнеровоз сел на мель в Суэцком канале 
.
      
Во всём мире наблюдается дефицит чипов 
.
   article> h2>Контейнеровоз сел на мель в Суэцком каналеh2> p>. p> article> br> br> article> h2>Во всём мире наблюдается дефицит чиповh2> p>. p> article>    Скопировать Скопировано Не удалось скопировать   

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

   
Контейнеровоз сел на мель в Суэцком канале 
.
    
Во всём мире наблюдается дефицит чипов 
.
   article> h2>Контейнеровоз сел на мель в Суэцком каналеh2> p>. p> article> article> h2>Во всём мире наблюдается дефицит чиповh2> p>. p> article>    Скопировать Скопировано Не удалось скопировать   

 article  margin-bottom: 2em;> article  margin-bottom: 2em; >    Скопировать Скопировано Не удалось скопировать   

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

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

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

Источник

HTML
Tag

To force
line breaks
in a text,
use the br
element.

More «Try it Yourself» examples below.

Definition and Usage

The
tag inserts a single line break.

The
tag is useful for writing addresses or poems.

The
tag is an empty tag which means that it has no end tag.

Tips and Notes

Note: Use the
tag to enter line breaks, not to add space between paragraphs.

Browser Support

Global Attributes

Event Attributes

More Examples

Example

Be not afraid of greatness.

Some are born great,

some achieve greatness,

and others have greatness thrust upon them.

Related Pages

Default CSS Settings

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник