br в HTML


в HTML

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

. А при помощи атрибута clear можно запретить обтекание текстом плавающего объекта.

Атрибуты

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

Тип тега

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

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

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

в HTML

Тег
вставляет один разрыв строки.

Тег
является пустым тегом, что означает, что он не имеет конечного тега.

Browser Support

Элемент
Да Да Да Да Да

Советы и примечания


Совет: Тег
полезен для написания адресов или стихотворений.

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

Различия между HTML 4,01 и HTML5

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

В HTML тег
не имеет конечного тега.

В XHTML тег
должен быть правильно закрыт, например:

HTML тег br

Тег
вставляет разрыв или перенос строки. Тег
является одиночным элементом, что означает — у него нет закрывающего тега.

Примечание: Используйте тег
только для переноса строки, но не для разделения параграфов.

Разница между HTML 4.01 и HTML5

В HTML тег
— одиночный элемент без закрывающего тега. В XHTML тег
необходимо закрывать должным образом, а именно —
.

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

HTML пример

Разрыв строки оформляется следующим образом:

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

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

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


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

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

Для чего предназначен тег
?

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

Илон Маск рекомендует:  Что такое код swf_getfontinfo

update 17.02.10 — если воспользоваться серым веществом то и тут можно и даже нужно избавиться от
. Для таких случаев предназначен тег

Заметка

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

Где не должно быть
?

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

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

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

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

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

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

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

в HTML


Перенос строки необходимо прописывать вот так:

Описание и использование

Тег
вставляет одинарный перенос строки.

Тег
является пустым тегом. Это означает, что он не требует закрывающего тега.

Разница между HTML и XHTML

В HTML тег
не имеет закрывающего тега.

В XHTML тег
должен быть правильно закрыт; вот так:
.

Советы и примечания

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

Разрыв строки в HTML: используем тег br

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

. Кроме того, иногда нужно в точности сохранить форматирование предыдущего текста, которое тег

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

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

Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row — «разорвать ряд, строку»). Тег
языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.

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

Пример использования тега разрыва


Тег br в действии

Прогул на службе

Еще нигде и никогда

Я не был столь плохим

Начальства алчная орда

Грызет меня живым

Прогул на службе

Еще нигде и никогда
Я не был столь плохим.
Начальства алчная орда
Грызет меня живым.

Атрибут тега

Единственный атрибут, которым обладает html тег
, называется Clear («очистить»). Он указывает браузеру, как поступить с переносимой строкой, если тексту придется обтекать так называемый плавающий элемент, каковым может быть, например, изображение с атрибутом выравнивания align, использующим значения right/left, или блок в CSS, которому прописано свойство float.

В спецификациях по XHTML 1.0 / HTML 4.01 атрибут clear можно использовать только с Transitional, Frameset и , иначе код будет нерабочим.

Свойства атрибута тега

Эффект от применения атрибута clear зависит от его значения и расположения обтекаемого текстом плавающего элемента. Атрибут может принимать 4 значения:

Илон Маск рекомендует:  Что такое код cal_from_jd

Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, «споткнувшись» о тег
, расположится ниже изображения или иного плавающего элемента.

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

Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега
тексту не останется ничего другого, как обойти изображение, обтекая его справа.

Значение none («ни вашим, ни нашим») вообще снимает все полномочия с атрибута clear, и тег
молча переносит строку вниз.


Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.

Тег
— это мягкий перенос

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

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

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

Как разместить каждую фразу в HTML с новой строки?

Приветствую вас, на сайте Impuls-Web!

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

Тег
для начала фразы HTML с новой строки

Для размещения текста в HTML с новой строки мы можем использовать специализированный HTML-тег
, который имеет следующий синтаксис:

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

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

Результат:

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

То есть, по сути, хоть мы и имеем несколько отдельных строк, но все они являются элементами одного тега

, и соответственно, верхний и нижний отступы применяются один раз.


Использование тега
совместно с плавающими элементами

Если вам нужно разделить фрагмент текста, который обтекает, например, изображение, то вы можете воспользоваться специальным параметром clear. Использование
с параметром clear, имеющим значение all или left, отменит обтекание для фрагмента текста HTML начинающегося с новой строки. В данном случае фраза будет начинаться под изображением.

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

Как убрать тег
?

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

при отображении на различных мобильных устройствах.

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

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

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

. Другими словами, мы принудительно убираем все, ранее расстановленные, разрывы.

Что ужасного в использование тэга br?

Добрый день, укажите на ошибки сайта.

Например, один «программист» сказал, что br нельзя использовать в таком количестве, а почему так и не объяснил.
Сайт: oooidea.ru

Илон Маск рекомендует:  Что такое код atoi

PS; Дизайн от заказчика. в обсуждение даже не нуждается. (знаем).

  • Вопрос задан более трёх лет назад
  • 3519 просмотров

для этого есть css

p.s ваш сайт говно редкое, если что:)

*** Ответил не читая ***

Посмотрел на исходники страницы и теперь понимаю к чему вам это сказали.


это что? Для кого придумали отступы, не надо их между дивов пихать, это делается простыми отступами.

Его использовать нужно для переноса текстовых строк, а для отступов, у блоков, использовать margin и padding.

Например, когда будете писать адаптивные стили, вы сможете изменять размер отступов так, как вам захочется, а теги br нет. Либо скрыть их, либо показать!

) и, тем более, не для задания отступов между блоками (для этого есть padding и margin).

что страшного — то может быть, если использовать

Страшно смотреть на такой код, ладно если вы от и до сами занимаетесь сайтом, но если над ним будут работать другие люди, у них будут в голове только такие мысли: «За что мне это? Что это вообще такое?? Какой ламер это писал? Неужели так трудно выучить назначение тегов? и т.д.». Плюс верстку на br-ах не так просто редактировать, если отступы в css мы можем контролировать и делать с ними все, что угодно, то br верстальщика такой возможности лишают.

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

в HTML

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

. А при помощи атрибута clear можно запретить обтекание текстом плавающего объекта.

Атрибуты

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


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

Тип тега

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

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

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

в HTML

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

Грубо говоря, работает как клавиша «Enter» в текстовом редакторе. Основным отличием от тега

является отсутствие вертикального отступа перед следующей строкой.

При обтекании текстом какого-либо плавающего объекта, можно использовать атрибут тега clear – это позволит перейти на пустую строку, следующую после этого объекта.

Синтаксис

Атрибуты

  • clear — переносит строку на следующую под плавающим элементом

Примеры

Пример 1.

  1. Перемен требуют наши сердца, br > Перемен требуют наши глаза, br > В нашем смехе и в наших слезах, br > И в пульсации вен. br > br > Слова: Виктор Цой
результат:

Перемен требуют наши сердца,
Перемен требуют наши глаза,
В нашем смехе и в наших слезах,
И в пульсации вен.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL