Чтобы текст на мониторе выглядел читабельно и структурировано, применяется верстка с помощью 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-верстальщика.

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

Навигация по записям