Все или почти все используют в верстке . Много ли из нас, поставив в коде
задумывается: а действительно ли нужен он тут? Среди неискушенных верстальщиков часто можно увидеть верстку такого характера: верстка меню
А еще можно встретить вот такие замечательные абзацы:
Может возникнуть вопрос: если на сайте отображается все по дизайну, что тут не так? А не так тут — этот кошмарный, кривой, ламерский код, который говорит об очень низкой квалификации верстальщика, который не удосужился даже разобраться в назначениях .
Применять
для формирования абзацев — это все равно, что забивать гвозди шуруповертом (это тоже инструмент, почему бы и не забить гвоздь, другой).
Для чего предназначен тег
?
update 23.02.10 — с "фокусами" с white-space: pre нужно быть внимательными, т.к. при таком форматировании строки, которые не вмещаются в блок, автоматически не переносятся на новую строку. Особенно это актуально для резиновых дизайнов. В таких случаях все же приходится применять
.
P { white-space: pre; }
Заметка
Сообщество фанатов семантической верстки вообще не включили
в .
Где не должно быть
?
- использовать теги по назначению: для абзацев — это < >, для списков и — < >, < >, < > и т.д.;
- для форматирования текста и задания отступов использовать , такие как , ;
- использовать отдельные элементы для создания строк (для этого лучше всего подходят нейтральные элементы разметки < > и < >).
Рассмотрим несколько практических примеров. Абзацы:
Высокопроизводительное решение обладает большой пропускной способностью — до 6.2 Gbps, и идеально подходит не только для передачи голоса и видео, но так же и для новых приложений, требовательных к полосе пропускания, таких как on-line игры.
SGSN способен поддерживать до 1,5 миллионов активных PDP сессий.
P { margin-bottom: 12px; }
Несколько строк номеров телефонов:
| Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Тег
устанавливает перевод строки в том
месте, где этот тег находится. В отличие от тега параграфа
Использование тега BR
не добавляет пустой отступ перед
строкой. Если текст, в котором используется перевод строки, обтекает плавающий
элемент, то с помощью параметра clear
тега
можно сделать так, чтобы следующая строка начиналась ниже элемента.
Синтаксис
Текст
текст
Параметры
clear Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.Закрывающий тег
Не требуется.
Пример 1. Использование тега
Р.Л. Стивенсон
Лето в стране настало,
Вереск опять цветет.
Но некому готовить
Вересковый мед.
Результат данного примера показан ни рис. 1.
Рис. 1. Вид текста при использовании тега
Описание параметров тега
Параметр CLEAR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float .
Результат использования параметра clear
зависит
от края, по которому выравнивается элемент и значения аргумента clear
.
Так, если изображение выравнивается по левому краю, а значение параметра clear
тега
установлено как all
или left
, то текст после тега
будет отображаться ниже рисунка. Любые другие значения параметра clear
заставят текст располагаться справа от изображения и обтекать его.
Синтаксис
Аргументы
all Отменяет обтекание элемента одновременно с правого и левого края. left Отменяет обтекание с левой стороны элемента, расположенного после тега. right Отменяет обтекание с правой стороны элемента. none Отменяет действие данного свойства.
Значение по умолчанию
Аналог CSS
Пример 2. Отмена обтекания текста
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Результат примера показан на рис. 2.
Рис. 2. Отмена обтекания блока текстом
Примечание
Использование параметра clear в спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS clear - BR { clear: both | left | none | right }.
Тег
устанавливает перевод строки в том
месте, где этот тег находится. В отличие от тега параграфа
Использование тега BR
не добавляет пустой отступ перед
строкой. Если текст, в котором используется перевод строки, обтекает плавающий
элемент, то с помощью параметра clear
тега
можно сделать так, чтобы следующая строка начиналась ниже элемента.
Синтаксис
Текст
текст
Параметры
clear Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.Закрывающий тег
Не требуется.
Пример 1. Использование тега
Р.Л. Стивенсон
Лето в стране настало,
Вереск опять цветет.
Но некому готовить
Вересковый мед.
Описание параметров тега
Параметр CLEAR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float .
Результат использования параметра clear
зависит
от края, по которому выравнивается элемент и значения аргумента clear
.
Так, если изображение выравнивается по левому краю, а значение параметра clear
тега
установлено как all
или left
, то текст после тега
будет отображаться ниже рисунка. Любые другие значения параметра clear
заставят текст располагаться справа от изображения и обтекать его.
Синтаксис
Аргументы
all Отменяет обтекание элемента одновременно с правого и левого края. left Отменяет обтекание с левой стороны элемента, расположенного после тега. right Отменяет обтекание с правой стороны элемента. none Отменяет действие данного свойства.
Значение по умолчанию
Аналог CSS
Пример 2. Отмена обтекания текста
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Примечание
Использование параметра clear в спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS clear — BR { clear: both | left | none | right }.
Теги форматирования
Урок 5.
В этом уроке мы:
1. Узнаем как сделать чтобы html код был для нас более удобен и легко читаем.
2. Разберем как правильно делать перенос текстовой строки.
Делаем html код удобным.
Сейчас наш код понятен и легко читаем, так как в нем мало текста и практически нет тегов. Когда мы создадим более сложную страницу, то там будет много тегов, соответственно найти нужный будет сложно.
Чтобы не было каши из тегов, нужно изначально расставлять теги и строки так, чтобы они визуально воспринимались легче. Когда браузер считывает информацию с html страницы, ему без разницы сколько пробелов и сколько пустых строк в коде.
Я изменил текст в коде страницы относительно той, которую мы создавали, но это не важно. На левом и на правом рисунке изображен один и тот же код. Оба варианта будут отображаться браузером на экране монитора абсолютно одинаково. Согласитесь, работать с кодом изображенным справа будет гораздо легче, чем с тем, что слева.
Рассматриваемый нами код очень простой, но даже сейчас заметна разница в визуальном восприятии. Каких-либо определенных правил "наведения порядка" нет, каждый мастер сам решает как ему удобнее работать.
Перенос строки html. Тег <br>.
Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.
Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:
Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу (как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.
Тег <br>
Когда мы в третьем уроке знакомились с тегами, я упомянул, что бывают теги которые не требуют закрытия. Тег <br>
один из них, служит он для переноса строки.
Давайте применим его в коде:
Мы вставили тег <br>
в наш html код и теперь при запуске файла через браузер часть текста будет перенесена на следующую стоку.
* Не забываем сохранять изменения в Notepad (Ctrl + S) и обнавлять страницу в браузере (F5).
The HTML
element
produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
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.
As you can see from the above example, a
element is included at each point where we want the text to break. The text after the
begins again at the start of the next line of the text block.
Attributes
Deprecated attributes
clear Indicates where to begin the next line after the break.Styling with CSS
The
element has a single, well-defined purpose - to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.
You can set a margin on
elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice - you should use the line-height property that was designed for that purpose.
Examples
Simple br
In the following example we use
elements to create line breaks between the different lines of a postal address:
Mozilla
331 E. Evelyn Avenue
Mountain View, CA
94041
USA
The result looks like so:
Accessibility concerns
Creating separate paragraphs of text using
is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within
s. This can be a confusing and frustrating experience for the person using the screen reader.
Use
Elements, and use CSS properties like margin to control their spacing.
Technical summary
| Content categories | Flow content , phrasing content . |
|---|---|
| Permitted content | None, it is an empty element . |
| Tag omission | Must have a start tag, and must not have an end tag. In XHTML documents, write this element as . |
| Permitted parents | Any element that accepts phrasing content . |
| Permitted ARIA roles | Any |
| DOM interface | ). It inherits from HTMLElement."> HTMLBRElement |
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of " " in that specification. |
Living Standard | |
| HTML5 The definition of " " in that specification. |
Recommendation | |
| HTML 4.01 Specification The definition of " " in that specification. |
Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
| br | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | ||||||
| clear Deprecated | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |