## 04. Улучшенная HTML-страничка

На этой странице:

- Браузер игнорирует концы строк
- Принудительный разрыв строки

### Браузер игнорирует концы строк

В коде стихотворение записано, как ему и полагается, — на 4 строчках:

Браузер выводит стихи как единый абзац (). Хотелось бы показать стихотворение по-человечески. Давайте попробуем сделать каждую строку отдельным абзацем:

Результат показан на иллюстрации:

Проверьте сами: Первый HTML-документ (вариант 2)

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

### Принудительный разрыв строки

Строчный элемент `BR` заставляет браузер продолжить вывод абзаца с новой строки. Тег `<BR>` не имеет парного тега.

Посмотрите теперь на стихи. К ним добавлены заголовок и имя автора. Стихи смотрятся, как в книге:

Красиво! Это потому, что вывод стихов записан так:

Элемент `BR` — строчный. Он задаёт принудительный перевод строки, но перед ним и после него дополнительного перевода строки не делается.

“Строчность” этого элемента кажется немного странной, но дело в том, что `BR` кодирует собой непечатаемый символ перевода строки. Как и любой другой символ, этот символ выводится в текущее место строки, но его действие отличается от действия обычного печатаемого символа — этот символ заставляет браузер переводить строку.

Элемент `BR` оказался полезен для разметки стихотворных строчек. Но не используйте `BR` для вывода обычного текста.

Типичная ошибка новичка: размечать элементом `BR` концы строк внутри абзаца. Разработчик ориентируется при этом на ширину своего окна и текущий размер шрифта. В окнах другого размера и при другом кегле это будет приводить к “гребёнке” на экране.

Чтобы продемонстрировать эту ошибку, Вася написал такой код:

В конце каждой строки Вася поставил `BR`, чтобы текст выглядел на экране так же, как в коде (жёлтыми квадратиками на рисунке условно обозначены места расположения элемента `BR`):

Когда Вася уменьшил окно браузера, то увидел на экране изломы строк, возникшие в местах расположения элемента `BR`:

Элементы `BR` помешали браузеру нормально отформатировать строки на экране. Если бы их не было, гребенки бы не получилось:

> Не используйте тег `<BR>` вместо тега `<P>` для отделения абзацев. Тег `<P>` вставляет перед абзацем пустую строку: она выделяет абзац на экране и помогает чтению.

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

> Не рекомендуется записывать абзацы длиннее 4–5 строк в расчёте на 80-символьные строки. Ниже представлен абзац именно такой длины (Г. Х. Андерсен, “Дюймовочка”).

> А старая жаба сидела внизу, в тине, и убирала свое жилище тростником и жёлтыми кувшинками — надо же было приукрасить всё для молодой невестки! Потом она поплыла со своим безобразным сынком к листу, где сидела Дюймовочка, чтобы взять прежде всего её хорошенькую кроватку и поставить в спальне невесты.

вверх