Тег бр – Тег | htmlbook.ru

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

Автор: Евгений Рыжков Дата публикации: 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.

Материалы

xiper.net

Атрибут clear | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+2.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:
1.0
1.1

Описание

Атрибут clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен атрибут align или элемент, к которому применяется стилевое свойство float.

Результат использования clear зависит от края, по которому выравнивается элемент и значения clear. Так, если изображение выравнивается по левому краю, а значение атрибута clear тега <br> установлено как all или left, то текст после тега <br> будет отображаться ниже рисунка. Любые другие значения clear заставят текст располагаться справа от изображения и обтекать его.

Синтаксис

<br clear="all | left | right | none">

Значения

all
Отменяет обтекание элемента одновременно с правого и левого края.
left
Отменяет обтекание с левой стороны элемента, расположенного после тега <br>.
right
Отменяет обтекание с правой стороны элемента.
none
Отменяет действие атрибута.

Значение по умолчанию

Нет.

Аналог CSS

clear

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BR, атрибут clear</title>
 </head>
 <body> 
  <div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <br clear="left">
  <p>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.</p>
 </body>
</html>

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

Рис. 1. Отмена обтекания блока текстом

htmlbook.ru

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <nobr> уведомляет браузер отображать текст без переносов. Если этого тега в коде документа нет, а также имеются переводы строки, они игнорируются и текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование тега <nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью, чего обычно делать никто не любит.

Синтаксис

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

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

Обязателен.

Атрибуты

Нет.

Аналог CSS

white-space

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Тег NOBR</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>

  <h2><nobr>Lorem ipsum dolor sit amet, 
     consectetuer adipiscing elit</nobr></h2>

  <p><nobr>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
    sed diem nonummy nibh euismod tincidunt ut lacreet dolore 
    magna aliguam erat volutpat.</nobr> Ut wisis enim ad minim veniam, 
    quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

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

Рис. 1. Текст без переносов

htmlbook.ru

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.05.0+1.0+11.7+4.0+3.0+1.0+2.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Синтаксис

Текст<wbr>текст

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

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

Атрибуты

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег WBR</title>
  <style>
   .word { font-size: 2em; }
   wbr { display: inline-block; }
  </style>
 </head>
 <body>
  <p>Самое длинное слово из химии</p>
  <p>метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
 </body>
</html>

Результат примера показа на рисунке ниже. При изменении ширины окна текст будет переноситься в тех местах, где указан тег <wbr>.

Рис. 1. Перенос текста в браузере Safari

Браузеры

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса &shy;.

Internet Explorer 8 и Opera до версии 11.7 не делают переносы длинной строки, пока в стилях для wbr не указано свойство display со значением inline-block, как показано в примере.

htmlbook.ru

Строчные элементы | htmlbook.ru

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

<a>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.

<b>

Определяет жирное начертание шрифта.

<big>

Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу.

<br>

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой.

<em>

Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

<i>

Устанавливает курсивное начертание шрифта.

<img>

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.

<small>

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег <big>, но действует с точностью до наоборот.

<span>

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

<strong>

Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

<sub>

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H2O.

<sup>

Отображает шрифт в виде верхнего индекса. По своему действию похож на <sub>, но текст отображается выше базовой линии текста — м2.

Разница между блочными и строчными элементами следующая.

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

htmlbook.ru

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+2.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Синтаксис

<h2>Заголовок первого уровня</h2>

Атрибуты

align
Определяет выравнивание заголовка.

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

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

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег h2 и h3</title>
 </head>
 <body>

  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat.</p>

  <h3>Ut wisis enim ad minim veniam</h3>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution 
  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
  commodo consequat.</p>

 </body>
</html>

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

Рис. 1. Вид заголовков первого и второго уровня в браузере

Примечание

Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h2>…<h6>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.

htmlbook.ru

Правила применения тегов | htmlbook.ru

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

Атрибуты тегов и кавычки

Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных («пример») или одинарных кавычках (‘пример’). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 3.2).

Пример 3.2. Использование кавычек в атрибутах тегов

HTML 4.01IECrOpSaFx

<!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>Кавычки в атрибуте alt</title>
 </head>
 <body>
  <p><img src="images/arena.png" alt="Вид заголовка"></p>
  <p><img src="images/arena.png" alt=Вид заголовка></p>
 </body>
</html>

В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.

Теги можно писать как прописными, так и строчными символами

Любые теги, а также их атрибуты нечувствительны к регистру, поэтому вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.

Переносы строк

Внутри тега между его атрибутами допустимо ставить перенос строк. В примере 3.3 показана одна и та же строка, но оформленная разными способами.

Пример 3.3. Переносы строк в коде тега

<!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>Кавычки в атрибуте alt</title>
 </head>
 <body>
  <p><img src="images/arena.png" alt="Вид заголовка в IE"></p>
  <p><img src="images/arena.png"
   alt="Вид заголовка в браузере IE"
  
  ></p>
 </body>
</html>

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

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

Неизвестные теги и атрибуты

Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.

Порядок тегов

Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.

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

Закрывайте все теги

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

htmlbook.ru

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

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