Перевод строк и горизонтальные линии
В первых версиях 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>
Результат
| Пробелы | Семантическая разметка |