Html тег br: Тег | HTML справочник

Содержание

— Веб-технологии для разработчиков

HTML-элемент <br> устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

Примечание: Не используйте <br> для увеличения разрыва между строками в тексте; используйте CSS-свойство margin элемента <p>.

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

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

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

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

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

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

Примеры

Простой br

В следующем примере мы используем элемент <br>

для разрыва линий в почтовом адресе:

Mozilla<br>
331 E. Evelyn Avenue<br>
Mountain View, CA<br>
94041<br>
USA<br>

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

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

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

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

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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
brChrome Полная поддержка 1Edge Полная поддержка 12Firefox
Полная поддержка
1
IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android
Полная поддержка
4
Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
clear Chrome Полная поддержка 1Edge Полная поддержка
12
Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах

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

HTML тег

onafterprint Скрипт виконується тільки після як документ надрукований.
onbeforeprint Скрипт виконується перед тим, як документ надрукований.
onbeforeunload Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload Викликається після того як завантаження елемента завершене.
onmessage Скрипт виконується коли викликане повідомлення.
onoffline Спрацьовує коли браузер починає працювати в автономному режимі
ononline Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow Скрипт виконується коли користувач заходить на сторінку.
onpopstate Скрипт виконується коли змінено історію одного вікна.
onresize Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage Скрипт виконується, коли вміст Web Storage оновлюється.
onunload Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur Скрипт виконується, коли елемент втрачає фокус.
onchange Викликається в той момент, коли значення елемента змінюється.
oncontextmenu Скрипт виконується коли викликається контекстне меню.
onfocus Викликається в той момент, коли елемент отримує фокус.
oninput Скрипт викликається коли користувач вводить дані поле.
oninvalid Скрипт виконується, коли елемент недійсний.
onreset Викликається, коли натискається у формі кнопка типу Reset.
onsearch Викликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselect Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit Викликається при відправленні форми.
onkeydown Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress Викликається коли корисрувач натиснув на клавішу.
onkeyup Викликається коли користувач відпускає клавішу.
onclick Подія викликається коли користувач клацає ЛКМ по елементу.
ondblclick Виникає при подвійному клацанні ЛКМ на елементі.
ondrag Періодично викликається при операції перетягування.
ondragend Викликається коли користувач відпускає перелягуваний елемент.
ondragenter Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove Викликається, коли курсор миші переміщається над елементом.
onmouseout Викликається, коли курсор виходить за межі елемента.
onmouseover Виконується, коли курсор наводиться на елемент.
onmouseup Викликається, коли користувач відпускає кнопку миші.
onscroll Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel Викликається, коли користувач прокручує коліщатко миші.
oncopy Викликається, коли користувач копіює вміст елемента.
oncut Викликається, коли користувач вирізає вміст елемента.
onpaste Викликається, коли користувач вставляє вміст в елемент.
onabort Виконується при перериванні якоїсь події.
oncanplay Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange Скрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchange Викликається коли змінюється довжина медіа файлу.
onemptied Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended Викликається коли медіа елемент повністю відтворив свій зміст.
onshow Викликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadata Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata Викликається коли медіа данні завантажено.
onloadstart Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause Викликається коли відтворення медіа даних призупинено.
onplay Скрипт викликається коли медіа дані готові почати відтворення.
onplaying Викликається коли розпочато відтворення медіа даних.
onprogress Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange Викликається коли змінюється швидкість відтворення медіа даних.
onseeked Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate Викликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
onvolumechange Викликається коли змінюється гучність звуку.
onwaiting Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle Викликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
onerror Викликається якщо при завантаженні елемента сталася помилка.

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 и выше
Поддержка:ДаДаДаДаДа

Тэг 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/>, стоит лишь воспользоваться знаниями тэгов и использовать каждый из них по назначению.

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

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

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

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 2.0+ 1.3+ 3.0+ 1.0+ 1.0+ 1.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <abbr> указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.

Браузеры никак не выделяют текст внутри <abbr>, за исключением Opera до версии 15, которая добавляет к тексту пунктирное подчёркивание.

Синтаксис

<abbr>Текст</abbr>

Атрибуты

title
Добавляет всплывающую подсказку к тексту, в которой можно дать расшифровку аббревиатуры.

Также для этого тега доступны глобальные атрибуты и события.

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

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег ABBR</title>
  <meta charset="utf-8">
  <style>
   abbr {
    border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста */
    color: #000080; /* Темно-синий цвет текста */
   }
  </style>
 </head>
 <body> 
  <p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr> 
  обозначается протокол, с помощью которого любые внешние программы взаимодействуют 
  с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом 
  языке программирования и результат их действия выводить в виде веб-страницы.</p>
</body> 
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки при наведении курсора мыши на текст аббревиатуры

Браузеры

Браузер Internet Explorer до 6 версии включительно не поддерживает тег <abbr>, взамен рекомендуется использовать тег <acronym>.

HTML-тег

Тег HTML
используется для создания элемента ‘br’, который представляет разрыв строки в документе HTML.

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

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

.

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

Синтаксис

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

Нравится:

Строка 1
Линия 2

Примеры

адресов

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

<Адрес> Африканский фонд дикой природы
Нгонг Роуд, Карен
П.O. Box 310, 00502
Найроби, Кения

Поэзия / Лирика

Другой пример использования - — стихи или тексты песен.

Любовь — это не то, что нужно понимать.
Любовь — это не то, что нужно чувствовать.
Любовь не вещь, чтобы давать и получать.
Любовь — вещь только для того, чтобы стать
И вечно быть. Шри Чинмой

разрывов строк и CSS

Несмотря на то, что он используется для создания разрыва строки, спецификация HTML5 допускает стилизацию элемента - таким образом, чтобы браузер не отображал разрывы строки.В частности, оно гласит:

Хотя разрывы строк обычно представляются на визуальном носителе путем физического перемещения последующего текста на новую строку, таблица стилей или пользовательский агент были бы одинаково оправданы, если бы разрывы строк отображались другим способом, например в виде зеленых точек или в виде дополнительных Расстояние между. — HTML5 Спецификация

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

Атрибуты

Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.

Элемент
принимает следующие атрибуты.

Атрибут Описание
Нет

Глобальные атрибуты

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

  • accesskey
  • автокапитализировать
  • класс
  • contenteditable
  • data- *
  • dir
  • Draggable
  • скрыто
  • id
  • режим ввода
  • -
  • itemid
  • itemprop
  • itemref
  • itemscope
  • тип товара
  • lang
  • часть
  • слот
  • проверка орфографии
  • стиль
  • tabindex
  • название
  • перевод

Полное объяснение этих атрибутов см. В разделе Глобальные атрибуты HTML 5.

Обработчики событий

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

  • онаборт
  • onauxclick
  • onblur
  • oncancel
  • oncanplay
  • на сайте
  • onchange
  • onclick
  • onclose
  • oncontextmenu
  • онкопия
  • oncuechange
  • oncut
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • пустые
  • onended
  • ошибка
  • onfocus
  • onformdata
  • на входе
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onlanguagechange
  • , нагрузка
  • загруженных данных
  • загруженных метаданных
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • паста
  • на паузе
  • onplay
  • при игре
  • onprogress
  • onratechange
  • на месте
  • onresize
  • onscroll
  • по безопасностиполициолииоляции
  • искомых
  • в поисках
  • onselect
  • onslotchange
  • установлено
  • на подачу
  • onsuspend
  • своевременное обновление
  • пуговица
  • onvolumechange
  • в ожидании
  • на колесе

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

Подробнее см. В разделе Атрибуты содержимого обработчика событий HTML.

,
: элемент Line Break — веб-технологии для разработчиков

HTML
элемент
создает разрыв строки в тексте (возврат каретки). Это полезно для написания стихотворения или адреса, где разделение строк является значительным.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

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

Примечание : не используйте
для создания полей между абзацами; оберните их в

элементов и используйте свойство CSS margin для управления их размером.

атрибутов

Атрибуты этого элемента включают глобальные атрибуты.

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

очистить
Указывает, где начинать следующую строку после перерыва.

Стилизация с помощью CSS

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

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

Примеры

Простой br

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

 Mozilla 
Эвелин Авеню, 331
Маунтин-Вью, Калифорния
94041
США Singles

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

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

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

Используйте

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

Техническое резюме

Технические характеристики

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

Обновление данных о совместимости GitHub
Настольный ПК Мобильный
Chrome Edge Firefox Internet Explorer Opera Safari Веб-просмотр Android Chrome для Android Firefox для Android Opera для Android Safari на iOS Интернет Samsung
br Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Опера Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да
ясно Хром Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Опера Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да

Легенда

Полная поддержка
Полная поддержка
Устаревший.Не для использования на новых сайтах.
Устаревший. Не для использования на новых сайтах.

См. Также

,

HTML: тег

totn HTML

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

Описание

Тег HTML
определяет разрыв строки внутри текста в документе HTML. Этот тег также обычно называют элементом
.

Синтаксис

В HTML синтаксис тега
:

  <корпус>

Абзац начинается здесь
и заканчивается на следующей строке.

или в XHTML, синтаксис для тега
:

  <голова>

Здесь начинается абзац
и заканчивается на следующей строке.

Пример вывода

 

атрибутов

Помимо глобальных атрибутов, ниже приведен список атрибутов, относящихся к тегу
:

Атрибут Описание HTML-совместимость
очистить Указывает, где начинать линию после перерыва. Устаревший в HTML 4.01, Устаревший в HTML5

Примечание

  • Элемент HTML
    находится внутри тега .
  • Тег
    просто сбрасывает текст на следующую строку, создавая меньше вертикальных пробелов, чем если бы тег

    был закрыт в этой точке с помощью .

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

Тег
имеет базовую поддержку следующих браузеров:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Опера
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Пример

Мы обсудим тег

ниже и рассмотрим примеры использования тега
в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

HTML5 Документ

Если вы создали новую веб-страницу в HTML5, ваш тег
может выглядеть следующим образом:

  


<Голова>

 Пример HTML5 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<div> Заголовок 1 </ h2>
<p> Абзац начинается здесь <br>
и заканчивается на следующей строке.</ Р>
</ html> </code> </pre>
   <p> В этом примере документа HTML5 мы создали тег <p> с разрывом строки <br> после слова «здесь», который перетаскивает последующий текст на следующую строку. </p>


    <h4><span class="ez-toc-section" id="HTML_401"> HTML 4.01 Переходный документ </span></h4> 
   <p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <br> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.ОТД ">
<HTML>

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8">
<title> HTML 4.01 Переходный пример от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<div> Заголовок 1 </ h2>
<p> Абзац начинается здесь <br>
и заканчивается на следующей строке. </ p>
</ Body>

</ html> </code> </pre>
   <p> В этом примере переходного документа HTML 4.01 мы создали тег <p> с разрывом строки <br> после слова «здесь», в результате чего последующий текст будет перенесен на следующую строку.</p>


    <h4><span class="ez-toc-section" id="XHTML_10"> XHTML 1.0 Переходный документ </span></h4> 
   <p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег <br> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> XHMTL 1.0 Переходный пример от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<div> Заголовок 1 </ h2>
<p> Здесь начинается абзац <br />
и заканчивается на следующей строке. </ p>
</ Body>

</ html> </code> </pre>
   <p> В этом примере переходного документа XHTML 1.0 мы создали тег <p>, у которого есть разрыв строки <br> после слова «здесь», в результате чего последующий текст будет перенесен на следующую строку. </p>
    <h4><span class="ez-toc-section" id="XHTML_10-2"> XHTML 1.0 Строгий документ </span></h4> 
   <p> Если вы создали новую веб-страницу в XHTML 1.0 Строгое, твой тэг может выглядеть так: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Строгий пример XHTML 1.0 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<div> Заголовок 1 </ h2>
<p> Здесь начинается абзац <br />
и заканчивается на следующей строке.</ Р>
</ Body>

</ html> </code> </pre>
   <p> В этом примере строгого документа XHTML 1.0 мы создали тег <p>, который имеет разрыв строки <br> после слова «здесь», что приведет к перетаскиванию последующего текста на следующую строку. </p>
    <h4><span class="ez-toc-section" id="XHTML_11"> XHTML 1.1 Документ </span></h4> 
   <p> Если вы создали новую веб-страницу в XHTML 1.1, ваш тег <br> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.ОТД ">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Пример XHTML 1.1 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<div> Заголовок 1 </ h2>
<p> Здесь начинается абзац <br />
и заканчивается на следующей строке. </ p>
</ Body>

</ html> </code> </pre>
   <p> В этом примере документа XHTML 1.1 мы создали тег <p>, у которого есть разрыв строки <br> после слова «здесь», который перетаскивает последующий текст на следующую строку.</p>





                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<div> учебников по веб-разработке | w3resource </h2>




Фронтенд учебники


HTML
CSS
JavaScript
HTML5
Schema.org
php.js
Twitter Bootstrap
Учебник по адаптивному веб-дизайну
Zurb Foundation 3 учебника
Чистый CSS
HTML5 Canvas
Курс JavaScript
Значок
угловатый
реагировать
Вью
Шутка
кофе мокко
НПМ
пряжа
кипарис






Бэкенд учебники


PHP
питон
Python-NumPy
Python-панда
Ява
Node.js
Рубин
C программирование
Композитор
PHPUnit
Laravel
asp.net






Учебные пособия по базам данных


SQL (стандарт 2003 ANSI)
MySQL
PostgreSQL
SQLite
NoSQL
MongoDBOracle
Redis
Apollo GraphQL









Упражнения с онлайн-редактором


HTML CSS
JavaScript
JQuery
JQuery-UICoffeeScript
PHP
питон
NumPy
Панды
Машинное обучение
Рубин
Matplotlib
Программирование на С
C # Sharp
C ++
Ява
R программирование
стриж
SQL
оракул
PL / SQL
MySQL
SQLite
PostgreSQL
MongoDB
Twitter Bootstrap Примеры
Эйлер проект






Учебники по Linux, обмену данными и API


Linux Home
Команды Linux
Администрирование Linux-сервера
XML
JSON
Ajax
API Google Plus
API YouTube
Google Maps API
Flickr API
Последний.FM API
API REST Twitter






Разные учебники


Python Projects
Учебник по Excel
Учебник по Firebug
Полезные инструменты
Шаблон Google Docs Forms
Google Docs Slides Презентация
Преобразование чисел
Викторины
статьи






 <hr/>

 <p> <strong> Учебники, Упражнения, опубликованные недавно </strong> </p>
 <p> Pandas Styling: упражнения, практика, решение </p>
 <p> Упражнения по стайлингу Pandas: Напишите программу Pandas для выделения отрицательных чисел красным и положительных чисел черным </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas, которая выделит значения nan </p>
 <p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделить максимальное значение в каждом столбце </p>
 <p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделить минимальное значение в каждом столбце </p>
 <p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделить максимальное значение в двух последних столбцах </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas для установки фона данных. Цвет черный и цвет шрифта желтый </p>
 <p> Упражнения по стайлингу Pandas: Напишите программу Pandas, чтобы выделить специфические столбцы датафрейма </p>
 <p> Упражнения по стилю Pandas: напишите программу Pandas, чтобы выделять отдельные столбцы датафрейма разными цветами </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения кадра данных в табличном стиле </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas, чтобы выделить желтую всю строку, где значение конкретного столбца больше 0.5 </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения кадра данных в стиле Heatmap </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas для создания градиентного цветового отображения в указанном столбце </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas, чтобы сделать цвет градиента для всех значений указанного кадра данных </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения кадра данных в стиле таблицы с рамкой вокруг таблицы, а не вокруг строк </p>
 <p> Упражнения по стилю Pandas: Напишите программу Pandas для отображения гистограмм в кадре данных в указанных столбцах </p>
 <p> Введение в Мокко </p>
 <p> Обзор цикла выполнения и обнаружение нескольких вызовов To Done () </p>
 <p> АСПЕРТЫ И АСИНХРОННЫЙ КОД </p>
 <p> СИНХРОННЫЙ КОД, ФУНКЦИИ СТРЕЛКИ И КРЮЧКИ </p>
 <p> ЗАДЕРЖАННЫЕ ИСПЫТАНИЯ ROOT SUITE В ОЖИДАНИИ ИСКЛЮЧИТЕЛЬНЫХ И ИСКЛЮЧИТЕЛЬНЫХ ИСПЫТАНИЙ </p>
 <p> повторных испытаний и динамически генерирующих тестов </p>
 <p> ТАЙМ-АУТЫ И ДИФФЫ </p>
 <p> КОМАНДА-ЛИНИИ ИСПОЛЬЗОВАНИЯ </p>
 <p> Интерфейсы </p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<div class='yarpp-related yarpp-related-none'>
<p>No related posts.</p>
</div>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span>	</footer><!-- .entry-footer -->
	</div>
</article><!-- #post-6533 -->

	<nav class="navigation post-navigation" aria-label="Записи">
		<h2 class="screen-reader-text">Навигация по записям</h2>
		<div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/plyusy-professii-zhurnalista-opisanie-professii-gde-uchitsya-rabotat-plyusy-i-minusy-professii.html" rel="prev">Плюсы профессии журналиста: описание профессии, где учиться, работать, плюсы и минусы профессии</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/kak-krasivo-ukrasit-rabochij-stol-v-komnate-gde-organizovat-i-kak-ukrasit-svoimi-rukami.html" rel="next">Как красиво украсить рабочий стол в комнате: где организовать и как украсить своими руками</a></div></div>
	</nav>
<div id="comments" class="comments-area">

		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/html-teg-br-teg-html-spravochnik.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p>
<p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p>
<p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='6533' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form>	</div><!-- #respond -->
	
</div><!-- #comments -->

		</main><!-- #main -->
	</div><!-- #primary -->

        </div>
    </section>
   <footer class="wrapper wrap-footer">
 
         <section class="wrapper footer-widget">
            <div class="container">
                <div class="row">                    
                                        
                </div>
            </div>
        </section>
   
    <!-- footer site info -->
<section id="colophon" class="wrapper site-footer" >
    <div class="container">
        <div class="row">
            <div class="xs-12 col-sm-6 col-md-6">
                <div class="site-info">
                <p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong>
         Использование материалов сайта разрешено и
         <br>всячески приветствуется при одном условии:<br>
         <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс!
         </p>
                  </div><!-- .site-info -->
                </div>
                <div class="xs-12 col-sm-6 col-md-6">
                    <div class="footer-menu">
                        <nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu">
                            <div class="menu-footer-menu-container"> 
                                                            
                            </div> 
                        </nav><!-- #site-navigation --> 
                        </div>
                    </div>
                </div>
            </div>
        </section><!-- #colophon -->    
   
   </footer><!-- #colophon -->
<!-- *****************************************
Footer section ends
****************************************** -->
<a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a>
</div><!-- #page -->
<div style="display:none">
</div>
		<style type="text/css">
							.pgntn-page-pagination {
					text-align: left !important;
				}
				.pgntn-page-pagination-block {
					width: 60% !important;
					padding: 0 0 0 0;
									}
				.pgntn-page-pagination a {
					color: #1e14ca !important;
					background-color: #ffffff !important;
					text-decoration: none !important;
					border: 1px solid #cccccc !important;
									}
				.pgntn-page-pagination a:hover {
					color: #000 !important;
				}
				.pgntn-page-pagination-intro,
				.pgntn-page-pagination .current {
					background-color: #efefef !important;
					color: #000 !important;
					border: 1px solid #cccccc !important;
									}
			.archive #nav-above,
					.archive #nav-below,
					.search #nav-above,
					.search #nav-below,
					.blog #nav-below,
					.blog #nav-above,
					.navigation.paging-navigation,
					.navigation.pagination,
					.pagination.paging-pagination,
					.pagination.pagination,
					.pagination.loop-pagination,
					.bicubic-nav-link,
					#page-nav,
					.camp-paging,
					#reposter_nav-pages,
					.unity-post-pagination,
					.wordpost_content .nav_post_link,.page-link,
					.page-links,#comments .navigation,
					#comment-nav-above,
					#comment-nav-below,
					#nav-single,
					.navigation.comment-navigation,
					comment-pagination {
						display: none !important;
					}
					.single-gallery .pagination.gllrpr_pagination {
						display: block !important;
					}		</style>
	<link rel='stylesheet' id='yarppRelatedCss-css'  href='https://forjobathome.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=6.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='pgntn_stylesheet-css'  href='https://forjobathome.ru/wp-content/plugins/pagination/css/nav-style.css?ver=6.0.2' type='text/css' media='all' />
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/modernizr.js?ver=2.8.3' id='greenturtle-mag-jquery-modernizr-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.easing.js?ver=0.3.6' id='greenturtle-mag-jquery-easing-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.waypoints.js?ver=4.0.0' id='greenturtle-mag-jquery-waypoints-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.cycle.js?ver=2.1.6' id='greenturtle-mag-jquery-cycle-script-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/greenturtle-mag-custom.js?ver=6.0.2' id='greenturtle-mag-custom-js-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/navigation.js?ver=20151215' id='greenturtle-mag-navigation-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/skip-link-focus-fix.js?ver=20151215' id='greenturtle-mag-skip-link-focus-fix-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/comment-reply.min.js?ver=6.0.2' id='comment-reply-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script>
<script type='text/javascript' id='ez-toc-js-js-extra'>
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
/* ]]> */
</script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script>
</body>
</html>