1. 8. Использование тега br
Last updated
Last updated
Тег <br> предназначен для переноса текста.
Чтобы понять, когда стоит использовать тег <br>, давайте посмотрим на хороший пример в проекте «Техномарт». Откроем макет и посмотрим на блок с текстом.
Если скопировать этот текст и перенести в нужное место, например, в разметку, то он может отобразиться не так, как нарисовано в макете.
В этом случае может возникнуть ощущение, что вёрстка выполнена некачественно, ведь она не похожа на макет. Более того, в нашем примере вместо четырёх строк текста получилось три. Если от высоты этого текстового блока зависит соседний контент, то он не окажется на нужном уровне. Как быть в этой ситуации?
Есть много вариантов, которые могут прийти в голову начинающему верстальщику, например: обернуть каждую строку в отдельный абзац, или подогнать ширину блока так, чтобы текст переносился в нужном месте, или использовать теги <br>. У каждого способа есть свои нюансы, в этой статье мы поговорим про использование тега <br>.
Буквальное значение <br> — перенос (от англ. break). Этот тег идеально подходит для ситуаций, когда нужно сделать перенос текста в определённом месте. Например, как в нашем случае, когда есть абзац текста, который не встаёт так, как на макете. Просто добавим <br> там, где нужно перенести текст на новую строчку.
Почему нужно делать именно так? Дело в том, что наполнение сайта редко остаётся таким, как на макете. Чаще всего контент меняется из системы администрирования сайта, а текст может быть любым другим — и на пять, и на двадцать пять строчек. Поэтому подумать о том, как сайт будет наполняться в дальнейшем — это хороший подход.
Казалось бы, а что плохого в том, чтобы задать размеры блоку с текстом или добавить отступ справа? Ведь тогда получится сделать перенос как на макете и не нужно использовать дополнительные теги. Дело в том, что в этом случае вёрстка становится уязвимой, ведь переносы сработают только для этого конкретного текста, а для нового могут не подойти. Вёрстка должна быть подготовлена к добавлению других текстов, поэтому для создания переносов текста как на макете лучше всего использовать <br>. Это практически единственный хороший способ использования этого тега.
Есть ещё и плохой способ — использование <br> для создания абзацев.
Например, на вашем макете есть две строчки текста, а потом разрыв и ещё две строчки текста. Кажется, что добиться такого эффекта в вёрстке можно, вставив после второй строки два тега <br>. Так вёрстка будет выглядеть похожей на макет. Проблемы начинаются, когда нам потребуется сделать отступ между получившимися «абзацами» поменьше или побольше. Сделать это при такой разметке у нас не получится.
Чтобы получить нужный отступ, мы должны обернуть каждый абзац текста в параграф <p> и регулировать расстояние между ними с помощью внешнего отступа — margin.
Используйте тег <br> для переноса текста внутри абзаца, чтобы добиться соответствия макету. Использовать тег <br> для создания отступов между блоками — это плохая практика, потому что такой код неудобно изменять и поддерживать.
