HTML з нуля: Як зробити горизонтальну лінію в HTML. Урок №10 Overcod.net

HTML з нуля: Як зробити горизонтальну лінію в HTML. Урок №10

Продовжуємо вивчати основи HTML. У цьому уроці я розповім вам, як створити горизонтальну лінію в HTML і де її можна ефективно використовувати.

Горизонтальна лінія допомагає візуально розділяти контент, роблячи сторінку більш структурованою та привабливою. Вона чудово підходить для виділення заголовків, меню або просто візуального поділу інформаційних блоків.

Як створити горизонтальну лінію в HTML

У HTML для створення горизонтальної лінії використовується спеціальний тег:

<hr>

Цей тег самозакриваючийся, тому не потребує закриваючого тегу.

Приклад коду:

<html>
<head>
    <title>Горизонтальна лінія</title>
</head>
<body>
    <h1>Приклад горизонтальної лінії</h1>
    <hr>
    <p>Текст під лінією.</p>
</body>
</html>

Атрибути горизонтальної лінії `<hr>`

1. Ширина горизонтальної лінії

Ви можете змінювати ширину лінії за допомогою атрибута width, вказуючи значення в пікселях (px) або у відсотках (%):

<hr width="300px">
<hr width="50%">

2. Товщина горизонтальної лінії

Встановлюється атрибутом size:

<hr size="8">

3. Вирівнювання горизонтальної лінії

Щоб змінити положення лінії, використовуйте атрибут align:

<hr width="300px" align="right"> <!-- Вирівнювання вправо -->
<hr width="300px" align="center"> <!-- По центру -->
<hr width="300px" align="left"> <!-- Вирівнювання вліво (за замовчуванням) -->

4. Відключення об’ємності

Щоб зробити лінію плоскою, використовуйте атрибут noshade:

<hr noshade>

5. Колір горизонтальної лінії

Для зміни кольору використовується атрибут color:

<hr color="#cc0000"> <!-- Червона лінія -->

Проте атрибут color застарів, тому сучасний спосіб задання кольору — використання CSS:

<hr style="border: 2px solid blue;">

Підсумок

Тег <hr> — простий, але корисний інструмент для розділення контенту. Ви можете змінювати його параметри за допомогою атрибутів або стилізувати за допомогою CSS.

На цьому уроці все! До зустрічі в наступних уроках!