<BR> или <BR />? Или всё же <BR/> ?

Идея статьи накипела, можно сказать.

В последнее время (уже не раз наталкивался на такую ситуацию) кто угодно может заявить, что он «верстает». Цена верстки обычно ниже плинтуса, зато требования «а чтоб в IE работало… и на iPad не разваливалось… Ой, что у нас на 'этом' не так как везде» могут быть совершенно разнообразными и требования к знаниям не меньше чем у полноценного разработчика фронтэнда.

Итак «преамбула»

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

Вот пример:
из тега <BR /> в местах, которые попались под руку. был удален пробел. Код достался по наследству, скажем, из мелового периода (ну или из юрского, боюсь ошибиться). Итог — конфликты при слиянии в мастер-ветку в гит для продакшна. В условиях, когда на разрешение конфликтов времени и ресурсов маловато. И это только то, что на поверхности (без тестирования в нужных браузерах).

Ну и собственно «фабула»

Немножко отвлечемся.

Клал я как-то ламинат дома. Первый раз. И перестилал. А потом еще и еще раз.
Так вот — в первый раз щели были огроменные. Не знал, что надо до «щелчка» соединять.
После третьего-четвертого раза результат был более удобоварим. Но с работой опытных мастеров он всё равно не мог тягаться.

Так и в 'любой вид деятельности'.

Для начала вернемся к заголовку

<BR> или <BR />? Или всё же <BR/>? А может <BR></BR>?

Если не интересно. то вот ответ — в современных реалиях — все варианты правильны. Актуальные браузеры правильно обработают любой вариант.

Откуда всё это взялось?

Обратимся к спецификации 

C.2. Empty Elements

Include a space before the trailing / and > of empty elements, e.g. <br />, <hr /> and <img src=«karen.jpg» alt=«Karen» />. Also, use the minimized tag syntax for empty elements, e.g. <br />, as the alternative syntax <br></br> allowed by XML gives uncertain results in many existing user agents.

Вольный перевод:

Включайте пробел перед / в «пустых» тегах (img тоже к ним относится). И используйте сокращенную запись (<BR /> а не <BR></BR>) что бы и XML угодить и чтоб разные юзерагенты, ака браузеры, не сошли с ума.

То бишь вся эта ерунда возникла из-за

1. доктайпа.
2. старых браузеров.
3. не очень старых браузеров в quirk режиме (такие конструкцию вида <br></br> могут трактовать как два разрыва строки).

Собственно многие могут задаться вопросом — для чего вообще делать автозакрытие тега, если он и так работает как надо?

А для xml-парсеров. Иначе они сломаются при обходе страницы.

https://www.w3schools.com/html/html_elements.asp

Empty HTML Elements

HTML elements with no content are called empty elements.

<BR> is an empty element without a closing tag (the <BR> tag defines a line break).

Empty elements can be «closed» in the opening tag like this: <BR />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

Вольный перевод:

br — пустой элемент без закрывающего тега.

HTML5 не требует закрытия. НО если вы желаете пройти строгую валидацию или желаете, чтобы ваш документ был читабелен для XML парсеров — вы ДОЛЖНЫ закрывать все html элементы правильно.

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

В сухом остатке:

Применение безопасных техник верстки спасает от разгребания многих локальных конфликтов в конкретном случае (это когда «везде работает» а «тут поломалось»).

Юношеский максимализм обычно пропадает после 4-5 проектов, на которых клиент скажет «надо». Это касается и flex-box, и гридов, и svg (неожиданно) и многих других нюансов. Кто сказал, что localstorage работает всегда и везде? И таких «открытий» миллионы :)

Приступая к верстке нужно обязательно иметь в виду — вы не в зоопарке, где все звери рассажены по клеткам с подписями. Вы — в саванне! И между тигром и вами нет спасительной решетки!

В принципе, br — сам по себе костыль. В верстке его использовать для оформления можно только в крайних случаях. Но понимание его работы может облегчить и так не простой труд верстака.

Немного морали — лучше себя заранее приучить писать код правильно и универсально и получить меньше граблей в дальнейшем, чем писать, опуская какие-то «никому не нужные» особенности, а в дальнейшем страдать переписывая код под «какой-то хлам» из-за «ненормального клиента».