Браузер игнорирует концы строкНа этой странице:
Браузер игнорирует концы строкВ коде стихотворение записано, как ему и полагается, — на 4 строчках:
Браузер выводит стихи как единый абзац
).
Результат показан на иллюстрации:
Проверьте сами: Первый HTML-документ (вариант 2)
Получилось! Однако пустые строки в начале каждого абзаца смотрятся не очень красиво. Но HTML позволяет задать принудительный переход на новую строку внутри абзаца.
Принудительный разрыв строкиСтрочный элемент BR заставляет браузер продолжить вывод абзаца с новой строки. Тег <BR> не имеет парного тега.
Посмотрите теперь на стихи. К ним добавлены заголовок и имя автора. Стихи смотрятся, как в книге:
Красиво! Это потому, что вывод стихов записан так:
Элемент BR — строчный. Он задаёт принудительный перевод строки, но перед ним и после него дополнительного перевода строки не делается.
“Строчность” этого элемента кажется немного странной, но дело в том, что BR кодирует собой непечатаемый символ перевода строки. Как и любой другой символ, этот символ выводится в текущее место строки, но его действие отличается от действия обычного печатаемого символа — этот символ заставляет браузер переводить строку.
Элемент BR оказался полезен для разметки стихотворных строчек. Но не используйте BR для вывода обычного текста.
Типичная ошибка новичка: размечать элементом BR концы строк внутри абзаца. Разработчик ориентируется при этом на ширину своего окна и текущий размер шрифта. В окнах другого размера и при другом кегле это будет приводить к “гребёнке” на экране.
Чтобы продемонстрировать эту ошибку, Вася написал такой код:
В конце каждой строки Вася поставил BR, чтобы текст выглядел на экране так же, как в коде (жёлтыми квадратиками на рисунке условно обозначены места расположения элемента BR):
Когда Вася уменьшил окно браузера, то увидел на экране изломы строк, возникшие в местах расположения элемента BR:
Элементы BR помешали браузеру нормально отформатировать строки на экране. Если бы их не было, гребенки бы не получилось:
Не используйте тег <BR> вместо тега <P> для отделения абзацев. Тег <P> вставляет перед абзацем пустую строку: она выделяет абзац на экране и помогает чтению.
Не записывайте длинные абзацы. Длинные абзацы всегда читать сложно, особенно, если это не художественное, а техническое изложение. Читать с экрана труднее, чем со страниц бумажной книги. Поэтому экранные абзацы должны быть очень короткими.
Не рекомендуется записывать абзацы длиннее 4–5 строк в расчёте на 80-символьные строки. Ниже представлен абзац именно такой длины (Г. Х. Андерсен, “Дюймовочка”).
А старая жаба сидела внизу, в тине, и убирала свое жилище тростником и жёлтыми кувшинками — надо же было приукрасить всё для молодой невестки! Потом она поплыла со своим безобразным сынком к листу, где сидела Дюймовочка, чтобы взять прежде всего её хорошенькую кроватку и поставить в спальне невесты.