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

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



Элемент <br> (от англ. "break" ‒ «ломать, разрывать») устанавливает перевод строки в том месте, где он находится. В отличие от элемента <p>, использование <br> не добавляет пустой отступ перед строкой.

Синтаксис

Текст <br>текст

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

Не требуется.

Атрибуты

clearУстарел в HTML5
Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Используйте вместо него свойство CSS clear.

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

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

Используйте свойство CSS margin. Допускается использование от одного до четырёх значений margin, в примере ниже их 3. Первый ноль задаёт отступ от верхнего края элемента, второй — от левого и правого одновременно, третий — от нижнего. Т.е. от блока текста до нижеследующего элемента — в примере задан отступ, равный 7rem.

<style>
    element {
        font-size: 2rem;
        margin: 0 0 7rem;
    }
</style>

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

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

Нет.

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

Элемент <br>

Пример HTML:

Попробуй сам
<p>А.С. Пушкин</p>
    <p> Я помню чудное мгновенье:<br>
    Передо мной явилась ты, <br>
    Как мимолетное виденье, <br>
    Как гений чистой красоты. <p>

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

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

Элемент
<br> 3+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<br>
1+
1+ 6+ 1+


seodon.ru | Теги HTML - Тег BR

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

Тег <BR> используется для принудительного обрыва строки и перевода ее в начало. Обрыв строки считается пробелом, поэтому в месте установки тега пробелы не нужны. Он не добавляет никаких дополнительных полей (margin) тексту, как это делают многие блочные теги, например <BLOCKQUOTE> или <P>. А при помощи атрибута clear можно запретить обтекание текстом плавающего объекта.

Атрибуты

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

  • clear — Запрещает или разрешает обтекание текстом плавающих элементов.

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

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

Тип тега

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

Модель тега: inline (встроенный, уровня строки).

Может содержать: данный элемент является пустым/Empty.

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

Синтаксис

текст<br>текст

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

<!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 - Применение тега BR</title>
 </head>
 <body>
  <p>Всегда так будет, как бывало:<br>Таков издревле белый свет:<br>
     Ученых много - умных мало,<br>Знакомых тьма - а друга нет!</p>
  <p>А.С. Пушкин</p> 
 </body>
</html>

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

Результат. Применение тега BR.

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

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

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

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

должен быть в тему

Автор: Евгений Рыжков Дата публикации: 12.02.2010

Все или почти все используют в верстке тег <br />. Много ли из нас, поставив в коде <br /> задумывается: а действительно ли нужен он тут? Среди неискушенных верстальщиков часто можно увидеть верстку такого характера: верстка меню

А еще можно встретить вот такие замечательные абзацы:

Может возникнуть вопрос: если на сайте отображается все по дизайну, что тут не так? А не так тут — этот кошмарный, кривой, ламерский код, который говорит об очень низкой квалификации верстальщика, который не удосужился даже разобраться в назначениях тегов.

Применять <br/> для формирования абзацев — это все равно, что забивать гвозди шуруповертом (это тоже инструмент, почему бы и не забить гвоздь, другой).

Для чего предназначен тег <br />?

Тег <br /> (от англ. break) создает переход на новую строку (W3C Recomendation :: Controlling line breaks). Это практически все, что говорят нам спецификации. Но даже тут сказано, точнее не сказано о том, что он предназначен для создания абзацев или еще чего-либо. Потому, что для абзацев есть тег <p>, а для предформатированного текста — <pre> (см. спецификации на той же странице).

<br> следует использовать в текстовом блоке для обозначения новой строки, где предложение (фраза, мысль) не закончено, например в стихах.


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

update 17.02.10 — если воспользоваться серым веществом то и тут можно и даже нужно избавиться от <br/>. Для таких случаев предназначен тег <pre> — предформатированный текст, который отобразится в окне браузера с учетом всех пробелов, табуляций и нажатых энтеров. А если считаешь, что тегу <pre> не хватает логичности, можно оставить абзац (<p>) и ему добавить возможностей <pre>. Такой фокус позволяет сделать CSS свойство white-space.

update 23.02.10 — с "фокусами" с white-space: pre нужно быть внимательными, т.к. при таком форматировании строки, которые не вмещаются в блок, автоматически не переносятся на новую строку. Особенно это актуально для резиновых дизайнов. В таких случаях все же приходится применять <br />.

Заметка

Сообщество фанатов семантической верстки вообще не включили <br> в перечень семантических тегов.

Где не должно быть <br />?

Везде, где можно обойтись тегами и CSS правилами:

  • использовать теги по назначению: для абзацев — это <p>, для списков и меню — <ul>, <ol>, <li> и т.д.;
  • для форматирования текста и задания отступов использовать CSS правила, такие как margin, padding, width, height;
  • использовать отдельные элементы для создания строк (для этого лучше всего подходят нейтральные элементы разметки <div> и <span>).

Рассмотрим несколько практических примеров. Абзацы:


<p>Высокопроизводительное решение обладает большой пропускной способностью &mdash; до 6.2 Gbps, и идеально подходит не только для передачи голоса и видео, но так же и для новых приложений, требовательных к полосе пропускания, таких как on-line игры. </p>
<p>SGSN способен поддерживать до 1,5 миллионов активных PDP сессий.</p>

p {
	margin-bottom: 12px;
}

Несколько строк номеров телефонов:


<div>
	<i>Позвоните нам</i>
	<span>(495) <b>760-45-46</b></span>
	<span>(495) <b>795-94-63</b></span>
	<span>(499) <b>120-05-70</b></span>
</div>

.phoneNumbers {
	color: #fff;
}
.phoneNumbers i {
	display: block; /* это позволяет избавиться от br */
	margin-bottom: 5px;
	color: #494949;
}
.phoneNumbers span {
	display: block; /* и это */
}


Всего один-два CSS свойства и ты избавляешься от <br />. Вот еще пара примеров, где и как можно обойтись без переноса строки:

Надеюсь, что после всех этих примеров ты будешь использовать <br /> очень, очень…очень редко. И вообще, <br /> — это удел необразованных редакторов, а не верстальщиков.

Ах да, забыл, что еще можно использовать атрибут clear (<br clear="all" />), для очистки потока. Но и это решается некоторыми манипуляциями с CSS — прием clearfix.

Материалы

Тэг br, а так ли он нужен?

Часто можно встретить, что начинающий верстальщик для реализации некоторых своих дизайнерских решений использует тэг <br/>. Однако остаётся актуальным вопрос «правильное ли это решение?».

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

<ul> 
   <li>Строка Списка первая</li>
   <li>Строка Списка вторая</li>
   <li>Строка Списка третья</li>
</ul>

Встречается код разряда:

Строка Списка первая<br/>
Строка Списка вторая<br/>
Строка Списка третья<br/ >

И таких неверных примеров большое количество.

Где не нужен br

Однако, если визуально можно достичь необходимого результата при помощи этого тэга, то почему бы его не использовать?

Ответ прост- этот тэг предназначен для переноса строки, а ни как не для создания списков и абзацев.

Верстка сайта, в котором часто встречается тэг <br/>, показывает низкую квалификацию «мастера». Для формирования правильной структуры документов искушённый верстальщик может использовать значительное количество специализированных тэгов, среди которых <li>, <p> и так далее. А для добавления необходимых визуальных эффектов используют стили css.

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

<p> использовать тэг <pre>.

Для тех кто не знает что такое тэг <pre>- это тег, добавляющий на страницу предформатированный текст. Это значит, что пробелы, переносы строки и т.д. внутри его сохраняются.

При желании мы можем использовать полезные свойства <pre> у самых рядовых абзацев воспользовавшись кодом:

Хотелось бы отметить, что большинство верстальщиков, которые пишут семантический код, не включили тэг <br/> в перечень тэгов используемых при такой верстке.

Выводы

  • Если возникает необходимость в создании списка на вашей странице, то не стоит использовать тег <br/> , для этого существуют теги <ul>, <ol>, <li>, а если вам не требуется отображение маркера списка, то не стоит возвращаться к злокачественному тегу, а просто стоит в css прописать list-style-type значение none. Например:
    <ul>
       <li> Строка первая </li>
       <li> Строка вторая </li>
       <li> Строка третья </li>
    </ul>
    <style>
       li {
         list-style-type: none;
       }
    </style>
  • При написании текста для формирования абзацев следует использовать тег <p>. Ну, а если требуется создать некоторое расстояние между конкретными абзацами нам в помощь придёт CSS, с селекторами first-child, last-child, nth-child – для определения конкретного абзаца и свойствами padding, margin для задания необходимого отступа. Например:
    Нам нужен какой-нибудь текст.
    Который имеет несколько абзацев.
     
     
    И перед последним должен быть большой отступ.

    Не стоит делать этого так:

    Нам нужен какой-нибудь текст.<br/>
    Который имеет несколько абзацев.<br/>
    <br/>
    <br/>
    И перед последним должен быть большой отступ.

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

    <p> Нам нужен какой-нибудь текст.</p>
    <p> Который имеет несколько абзацев.</p>
    <p> И перед последним должен быть большой отступ.</p>

    А для создания необходимого промежутка между последним абзацем и текстом используем сss:

    p:last-child {
       padding-top: 25px;
    }
    </li>
  • И последнее, для создания новой строки можно использовать вспомогательные элементы, к которым относятся <span> и <div>. Например:
    Контакты:
    (xx) xxx-xx-xx
    (xx) xx-xx-xxx
    bizonoff.net
    vaden-pro.ru

    Это можно сверстать:

    <div> 
    <span>Контакты:</span>
    <span>(xx) xxx-xx-xx</span>
    <span>(xx) xx-xx-xxx</span>
    <span>bizonoff.net</span>
    <span>vaden-pro.ru</span>
    </div>

    Ну а для переносов строк добавляем CSS:

Следовательно, при верстке качественного проекта, можно прекрасно обойтись и без <br/>, стоит лишь воспользоваться знаниями тэгов и использовать каждый из них по назначению.

Оценок: 8 (средняя 5 из 5)

  • 4816 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

html - Как правильно писать тег BR?

Лучше писать - <br> !!! Это экономичнее 🙂 + у меня сложилось подозрение, что Все браузеры, в будущем НЕ откажутся от поддержки <!DOCTYPE HTML> (скорее наоборот, становится стандартом - навечно) , а <... xhtml> - вроде как устаревающий тип и все по старинке полагаются на авось (аля 100% совместимость с браузерами и стандартами 2000 года).

А сейчас 2018-й год !!! И всем браузерам этот мусорный(именно так для них) слеш нахрен ненужен !!! А все генераторы мусора (хтмл редакторы), подтвержают свой статус - генераторов МУСОРА, поскольку до сих пор продолжают везде лепить этот слеш в одинарные теги - br, img, inp, и др.

Юзайте только - <!DOCTYPE html>. Вас все поймут, а процессоры скажут спасибо (нет мусорных знаков - быстрее парсинг текста)

P.S. А вот и подтверждение: Тег <br> - РЕКОМЕНДОВАН в PHP5 и взят в будущее !!! Старые варианты - <br/> и <br /> (вместе со старыми браузерами, а именно IE 6) - можно отправить на пенсию и - не МУСОРИТЬ в своих html страницах. Особенно если они полностью ваши (не паранойная СMS или полностью Ваша CMS).

Обновление

Да не надо ничего ЗУБРИТЬ !!! это как 2+2 !

<br> <hr> <input> <img> <meta>

ОДИНАРНЫЕ !!! им ненужен закрывающий тег, они не предусмотрены спецификой этих тегов. И тем более всякие мусорные слеши (в теле). Это HTLM и все популярные и современные CMS только под HTML (других не встречал)

Я это понял в первый день (10 лет назад) !!! Просто Вам лично самому не противно видеть <br /> (4+3 долба по клаве) или <br> (всего 4 долба). Далее берём парсер (обработчик текста). Если вы рубите, что ему проще обрабьать первый вид, а не два других - то печалька (за вас). Даже разработчики HTML это поняли и уже открыто рекомендуют использовать ТОЛЬКО <br>.

Терь понятно почему очень многие сайты такие мегатонные (сотни килобайт мусорного кода). Пихают всё сразу и везде, не задумываясь о том, а нужно ли всё это нам посетителям. Нам нужна моментальная загрузка страниц, ответ на вопрос или найденный товар и умеренная реклама (только на полях, а не между строк). Но как заглянешь на страницу такого мегатонника, так сразу видишь куеву тучу ненужных (мне) подгрузок (яваскрипта, шрифтов, css с внешних серверов, которые в таких раскладах - не кешируются) и их приходится обрабатывать моему браузеру на моём компе (тратятся мои ресурсы - НИЗАЧТО).

Обновление 2

Вот когда мне нужно будет, чтото перевести(портировать) в XHTML. Это мой скрипт сделает автоматически (добавит слеш). Другим на моих страницах делать нечего и под их унификацию подстраиваться не о

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

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