Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Тэг br, а так ли он нужен?

Дата:2.04.15 в 21:46
Раздел: 

Часто можно встретить, что начинающий верстальщик для реализации некоторых своих дизайнерских решений использует тэг <br/>. Однако остаётся актуальным вопрос «правильное ли это решение?».

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

<ul> 
   <li>Строка Списка первая</li>
   <li>Строка Списка вторая</li>
   <li>Строка Списка третья</li>
</ul>

Встречается код разряда:

Строка Списка первая<br/>
Строка Списка вторая<br/>
Строка Списка третья<br/ >

И таких неверных примеров большое количество.

Где не нужен br

Однако, если визуально можно достичь необходимого результата при помощи этого тэга, то почему бы его не использовать?

Ответ прост- этот тэг предназначен для переноса строки, а ни как не для создания списков и абзацев.

Верстка сайта, в котором часто встречается тэг <br/>, показывает низкую квалификацию «мастера». Для формирования правильной структуры документов искушённый верстальщик может использовать значительное количество специализированных тэгов, среди которых <li>, <p> и так далее. А для добавления необходимых визуальных эффектов используют стили css.

Ранее этот тэг использовался, к примеру, при написании стихов, где требовался перенос строки при незаконченной мысли. Однако при желании можно обойтись без него и здесь. Для этого есть даже несколько вариантов, первый это задать с помощью CSS ширину блока, а второй это вместо тэга <p> использовать тэг <pre>.

Для тех кто не знает что такое тэг <pre>- это тег, добавляющий на страницу предформатированный текст. Это значит, что пробелы, переносы строки и т.д. внутри его сохраняются.

При желании мы можем использовать полезные свойства <pre> у самых рядовых абзацев воспользовавшись кодом:

p {
    white-space: 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:

    span {
       display: block;
    }

Следовательно, при верстке качественного проекта, можно прекрасно обойтись и без <br/>, стоит лишь воспользоваться знаниями тэгов и использовать каждый из них по назначению.

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

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям: