Чтобы текст на мониторе выглядел читабельно и структурировано, применяется верстка с помощью HTML-тегов. Их применение разбивает текст на абзацы и столбцы, списки и заголовки, ссылки и аббревиатуры, цитаты и многое другое.
Выполнить html перенос строки можно несколькими способами:
- тег <p> — применяется для отделения абзацев друг от друга и создания нового абзаца;
- тег <pre> — для предформатированного текста;
- теги <ul>, <ol>, <li> — создают строки меню и пункты списков;
- теги <div> и <span> — разделение строк, например, столбец из номеров телефонов;
- тег <br> — разделение и перенос цельного куска текста с незаконченной мыслью, например, построчное деление стихотворения.
То есть, для каждого случая есть своя html-метка, и пользоваться ею нужно по назначению.
Как не стоит применять <br />
Часто можно встретить сайт, напичканный <br />, как кекс изюмом. Особенно впечатляет такая прелесть:
<div>Текст о чем-то интересном
<br />
<br />
<br />
Резюме абзаца</div>
Визуально это выглядит, как отделение двух абзацев интервалом из 3 строк, и кажется, что все правильно, и нужный эффект достигнут. На самом деле, это говорит о том, что сайт сверстан начинающим и ленивым верстальщиком. Переносить строки и абзацы тегом <br />, когда для этого есть отдельные специальные метки, все равно, что мешать сахар в чашке миксером. Можно, размешается, но зачем?
Деление абзацев с различными интервалами отлично оформляется таким образом:
<p>Содержимое информативного абзаца</p>
<p>Резюме основного текста</p>
И выглядит это так:
Содержимое основного абзаца
Резюме основного текста
Формирование столбца из данных, например, номеров телефонов, выполняется с помощью <span> вот так:
<div class=»phoneNumbers»>
<i>Контактные номера</i>
<span>(785) <b>670-55-39</b></span>
<span>(785) <b>697-92-33</b></span>
<span>(789) <b>925-08-70</b></span>
</div>
На странице будет отражена такая картинка:
Контактные номера
(785) 670-55-39
(785) 697-92-33
(789) 925-08-70
Конечно же, в этом случае потребуются некоторые дополнительные CSS правила.
Точно так же создаются элементы списков без повсеместного употребления тега <br /> для переноса строки с помощью html.
Где уместен <br />
В описаниях спецификаций об этом элементе говорится, что он создан для перехода на новую строчку. Но ни слова не говорится об абзацах, списках и прочих структурных составляющих.
Употребление <br /> рекомендовано там, где другие варианты меток не подходят – разрыв и перенос предложения, фрагмента, выражающего единую мысль и не разделенного знаками препинания. Чаще всего так обозначают строки в стихах. Тогда в конце каждой строки стоит <br />, обозначая переход к новой строчке посередине предложения, несмотря на то, что это не абзац и не конец фразы.
Следует заметить, что тег не вошел в список семантических, что еще раз говорит о недопустимости его повсеместного злоупотребления. Уместное применение тегов по их прямому назначению – признак и визитка грамотного html-верстальщика.