HTML тег - hr - определение и примеры использования
Меню
Веб-разработка
Мои услуги на Kwork
Тег hr HTML

HTML - тег <hr> — это элемент уровня блока, переносящий все элементы после него в другую строку. Внешний вид горизонтальной линии, определяемой тегом, зависит от типа браузера. Чаще всего отображается с рамкой, создающей 3D-эффект.


Тег <hr> - синтаксис и код

<hr> — пустой тег, что означает, что закрывающий тег не требуется, в отличие от XHTML, где тег (<hr>) должен закрываться <hr />.

Пример разметки тега <hr> для определения тематических изменений в контенте:

<h1>Основные языки Интернета</h1>

<p>HTML ( The HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц. 
С HTML вы можете создать свой собственный веб-сайт, для любых целей.</p>

<hr>

<p>CSS - "Cascading Style Sheets" что в переводе означает каскадные таблицы стилей.
CSS может управлять макетом нескольких веб-страниц одновременно.</p>

<hr>

<p>JavaScript — самый популярный в мире язык программирования.
JavaScript делает HTML-страницы более динамичными и интерактивными.</p>


Определение и использование

  • Тег <hr> определяет тематический разрыв на HTML-странице (например, смену темы);
  • Элемент hr чаще всего отображается как горизонтальная линия, которая используется для разделения содержимого (или определения изменения) на HTML-странице.
Примечание: в HTML5 тег <hr> определяет тематическое изменение между элементами уровня абзаца на HTML-странице. В предыдущих версиях HTML он использовался для рисования на странице горизонтальной линии, визуально разделяющей контент. В HTML5 он имеет семантическое значение.

Поддержка <hr> браузерами

Crome Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Глобальные атрибуты

Тег <hr> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <hr> также поддерживает атрибуты событий в HTML


Дополнительные примеры

Выравнивание элемента hr (с помощью CSS):

<hr style="width:50%;text-align:left;margin-left:0">

Затененный hr (с помощью CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

Установите высоту элемента hr (с помощью CSS):

<hr style="height:30px">

Установите ширину элемента hr (с помощью CSS):

<hr style="width:50%">

ПРИМЕР


Связанные страницы

Руководство по HTML: HTML параграфы


Настройки CSS по умолчанию

Большинство браузеров отображают элемент hr со следующими значениями по умолчанию:

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой