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.

На этом уроке всё! До встречи в следующих уроках!

Оставить комментарий(2)

спасибо за все 10 уроков . Обязательно изучу и использую понравившиеся функции .
Одна просьба ! укажите код который остановит стоку ,при наведении курсора на неё (на бегущую строку ) И при отведении курсора от бегущей строки Запустит ее .
Спасибо !

Ответить
Опубликовано: 23.10.2025

Приятно, что понравились мои уроки.
По поводу кода:
```
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
  Це приклад бігучого рядка, який зупиняється при наведенні курсора і знову рухається при відведенні!
</marquee>
```
< marquee > — создаёт бегущую строку.
onmouseover=»this.stop();» — останавливает движение, когда наводите курсор.
onmouseout=»this.start();» — снова запускает движение, когда убираете курсор.

Опубликовано: 23.10.2025