HR (тег в HTML)
Что такое hr в html:
Создаёт видимую горизонтальную линию, разделяющую содержимое веб-страницы. Это самозакрывающийся тег.Атрибуты:
- align -Определяет выравнивание линии.
- color - Цвет линии.
- noshade -Рисует линию без трехмерных эффектов.
- size -Толщина линии.
- width -Ширина линии.
Как прописать hr в html:
<! -- Какой-то текст или элемент--><hr>
<! -- Какой-то текст или элемент-->
Примеры использования
Простой разделитель:
<h2>Раздел 1</h2>
<p>Это первый раздел веб-страницы.</p>
<hr>
<h2>Раздел 2</h2>
<p>Это второй раздел веб-страницы.</p>
<hr>
<h2>Раздел 3</h2>
<p>Это третий раздел веб-страницы.</p>
Стилизованный разделитель:
<style>
hr {
height: 5px;
background-color: blue;
border: none;
}
</style>
<h2>Раздел 1</h2>
<p>Это первый раздел веб-страницы.</p>
<hr>
<h2>Раздел 2</h2>
<p>Это второй раздел веб-страницы.</p>
<hr>
<h2>Раздел 3</h2>
<p>Это третий раздел веб-страницы.</p>
Разделитель в навигационном меню:
<nav>
<ul>
<li><a href="#">Дома</a></li>
<hr>
<li><a href="#">О нас</a></li>
<hr>
<li><a href="#">Контакты</a></li>
<hr>
</ul>
</nav>
Можно улучшить доступность веб-страницы, если добавить тегу атрибут aria-hidden="true":
<h2>Раздел 1</h2>
<p>Это первый раздел веб-страницы.</p>
<hr aria-hidden="true">
<h2>Раздел 2</h2>
<p>Это второй раздел веб-страницы.</p>
<hr aria-hidden="true">
<h2>Раздел 3</h2>
<p>Это третий раздел веб-страницы.</p>
