Перевод строк и горизонтальные линии
В первых версиях HTML некоторые теги можно было не закрывать, но сейчас, если хотите следовать стандарту вам всё-таки придётся писать HTML-код правильно и закрывать все теги. Но некоторые теги не закрываются по правилам html. Например теги <br> и <hr> которые мы сейчас изучим. Для того, чтобы они «заработали» достаточно написать всего один тег без парного закрывающего. В новых стандартах такие теги называются самозакрывающимися. У них перед второй угловой скобкой стоит слэш <br/>. Ставить или не ставить слэш в одиночном теге, вы вольны решать сами. Но мы, все же, советуем вам пользоваться именно самозакрывающимися тегами. Это приучит вас к порядку, который пригодится при изучении других языков программирования (особенно при изучении XML).
Тег <br/>
Как вы уже видели раньше, браузер автоматически начинает каждый абзац с новой строки, однако если вы хотите добавить перевод строки в пределах какого-либо абзаца, то вам понадобится вставить специальный тег — <br/> (от английского «break» - разрыв) .
HTML
<html>
<head>
<title>Перевод строки</title>
</head>
<body>
<p>Земля<br>
становится тяжелее день ото дня<br>
из-за падающей на нее космической пыли.</p>
</body>
</html>
Результат
Тег <hr/>
Чтобы визуально разделить темы книги или сцены пьесы, с помощью тега <hr/> (от английского «horizontal rule» - горизонтальная линия) вы можете добавить в текст горизонтальную линию. В языке HTML существует несколько элементов, не содержащих текста между открывающим и закрывающим тегами. Их принято называть пустыми элементами. Написание таких тегов отличается от стандартного. Обычно пустой элемент состоит только из одного тега, перед правой, закрывающей скобкой которого вставляется слеш. Некоторые верстальщики вебстраниц опускают слеш, хотя их указание и рекомендуется для следования спецификации.
HTML
<html>
<head>
<title>Горизонтальная линия</title>
</head>
<body>
<p>Венера ― единственная планета, вращающаяся по часовой стрелке.</p>
<hr>
<p>Юпитер больше, чем все остальные планеты вместе взятые.</p>
</body>
</html>
Результат
| Пробелы | Семантическая разметка |