Как в HTML перенести строки или разделить их горизонтальной линией?

как в html перенести строки или разделить их горизонтальной линией?

О разделителях строк в HTML

Документы, составленные с помощью HTML-разметки, имеют линейную структуру. Это означает, что при выводе в браузер, всё их содержимое отображается последовательно, одно за другим. Каждый элемент имеет свои особенности. Например, абзацы или заголовки всегда располагаются с новой строки, они занимают все доступное пространство по ширине, а также сверху и снизу отделяются отступами. Это полезно для визуального разграничения содержимого HTML-страницы. Иначе на экране вы бы видели «свалку» из текста, картинок, ссылок и т.д.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Отсутствие отступов при выравнивании изображения</title>
    </head>
    <body>
        <img style="float: left" src="https://coder-booster.ru/images/main-logo.png">
        <p>Этот текст не будет перенесен на новую строку, так как
        изображение имеет выравнивание по левому краю</p>
    </body>
</html>

В HTML есть возможность управлять переносами строк и добавлять горизонтальные линии по своему усмотрению. Для этого есть специальные элементы <br> и <hr>, о которых мы расскажем далее.

Заметка
В настоящее время для стилизации страниц используется CSS (абр. Каскадные таблицы стилей). Эта технология позволяет управлять отступами и пространствами, занимаемыми элементами. Однако она не отнимает важности переноса строк встроенными возможностями HTML. Существуют ситуации, когда их применение предпочтительнее.

Перенос строки

Для переноса строки используется элемент <br>, который не требует закрывающего тега, так как не может иметь никакого содержания. Он является основным разделителем строк в HTML. Использовать его очень просто. Добавьте <br>, в то место, где должен быть осуществлен перенос строки.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования переноса на новую строку</title>
    </head>
    <body>
        <p>Этот текст будет разделен<br>
        на несколько строк,<br>
        в местах использования<br>
        соответствующего элемента</p>
    </body>
</html>

Горизонтальная линия

Еще одним способом разделения строк является добавление между ними горизонтальной линии. Для этого необходимо использовать элемент <hr>. Он, как и элемент <br>, не имеет закрывающего тега. Горизонтальная линия является блочным элементом, она всегда располагается с новой строки, занимает все доступное пространство по ширине, а сверху и снизу отделяется отступами от остального содержания.

Для разделения содержимого HTML-страницы горизонтальной линией, необходимо просто добавить элемент <hr> в то место, где она должна быть отображена.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования горизонтальной линии</title>
    </head>
    <body>
        <h1>Заголовок первого уровня</h1>
        <hr>
        <p>Этот текст, сверху и снизу, будет отделен горизонтальными линиями
        от основного содержимого страницы.</p>
        <hr>
    </body>
</html>

Последние публикации