Hr тег html – Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01

Содержание

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 3.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

Атрибуты

align
Определяет выравнивание линии.
color
Цвет линии.
noshade
Рисует линию без трехмерных эффектов.
size
Толщина линии.
width
Ширина линии.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег HR</title>
 </head>
 <body>

 <hr>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p>
 <hr> 

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид горизонтальной линии в браузере

Тег | HTML справочник

HTML теги

Значение и применение

Тэг <hr> создает горизонтальную линию на HTML-странице. Элемент <hr> может использоваться в роли тематического разрыва. Элемент используется без закрывающего тега.

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

Атрибуты

АтрибутЗначениеОписание
alignleft
center
right
Не поддерживается в HTML5
.
Определяет выравнивание элемента. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).
noshadenoshadeНе поддерживается в HTML5.
Указывает, что горизонтальная линия должна отображаться в одном цвете, вместо затененного цвета. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).
sizepixelsНе поддерживается в HTML5.
Определяет высоту элемента. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).
widthpixels
%
Не поддерживается в HTML5.
Определяет ширину элемента. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <hr><title>
	</head>
	<body>
		<p>Первый параграф</p>
		<hr>
		<p>Второй параграф</p>
		<hr>
		<p>Третий параграф</p>
		<hr>
	</body>
</html>

Результат нашего примера:

Пример использования тегов <p> и <hr> в HTML документе.

Отличия HTML 4.01 от HTML 5

В HTML5 элемент <hr> определяет тематический разрыв, а в HTML 4.01 представляет собой горизонтальную линию. Ранее используемые атрибуты удалены в HTML5, вместо них используйте CSS .

Значение CSS по умолчанию

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 тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок (<section>, <article>), так как эти элементы по умолчанию подразумевают тематические изменения.

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:


<p>Разделительная линия:</p>

<hr>

<p>Изменяем цвет линии:</p>

<hr>

<p>Изменяем толщину линии:</p>

<hr>

<p>Пунктирная линия html:</p>

<hr>
Попробовать »

Атрибуты

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

Стиль по умолчанию


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

Пример


<h2>HTML</h2>
<p>HTML это язык разметки гипертекста...</p>

<hr>

<h2>CSS</h2>
<p>CSS определяет то, как будут отображаться элементы...</p> 

Результат данного примера в окне браузера:

Пример использования тега <hr>

| HTML | WebReference

<hr> (от англ. horizontal rule — горизонтальная линейка) рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера.

Закрывающий тег

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>HR</title>
 </head>
 <body>
 <hr>
  <p>Асимптота, конечно, поддерживает нормальный 
  расходящийся ряд, при этом, вместо 13 можно 
  взять любую другую константу.</p>
 <hr> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид горизонтальной линии в браузере

Рис. 1. Вид горизонтальной линии в браузере

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

HTML тег hr

Тег <hr> определяет тематический разрыв контента на HTML странице (например, изменение темы). Также, элемент <hr> может использоваться для визуального разделения контента на странице.

Разница между HTML 4.01 и HTML5

В HTML 4.01 тег <hr> представляет горизонтальную линию.

В HTML5 тег <hr> определяет тематический разрыв. Тем не менее, тег <hr> в визуальных браузерах все еще может отображаться как горизонтальная линия, однако в настоящее время он определяется в семантическом, а не презентативном смысле.

В HTML5 все стилевые атрибуты были удалены. Вместо них следует использовать стили CSS.

Различия между HTML и XHTML

В HTML тег <hr> - одиночный элемент без закрывающего тега. В XHTML тег <hr> должен закрываться должным образом, а именно — <hr />.

Атрибуты тега <hr>

Атрибут Описание
align Определяет горизонтальное выравнивание содержимого элемента
noshade Определяет, что горизонтальная линия не должна иметь тень
size Определяет высоту горизонтальной линии
width Определяет ширину горизонтальной линии

Общие атрибуты

Тег <hr> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Используем тег <hr> для тематического разделения контента:


<h2>HTML</h2>
<p>HTML – язык описания веб-страниц.</p>
<hr>
<h2>CSS</h2>
<p>CSS — определяет то, как будут отображаться HTML элементы.</p>

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



Элемент <hr> (от англ. "horizontal rule" ‒ «горизонтальная линия») определяет тематический разрыв контента на HTML странице (например, изменение темы). Также, элемент <hr> может использоваться для визуального разделения контента на странице.

Так как этот тег является блочным — он создает перенос строк перед собой и после себя, а также небольшие поля (margin) сверху и снизу. Внешний вид линии и размер полей зависит от типа браузера, как правило они отображают ее с рамкой, которая создает эффект трехмерности.

Синтаксис

<hr>

Закрывающий тег

Не требуется.

Атрибуты

alignУстарел в HTML5
Устанавливает горизонтальное выравнивание линии.
colorНестандартный
Цвет линии.
noshadeУстарел в HTML5
Рисует линию без трёхмерных эффектов.
sizeУстарел в HTML5
Толщина линии.
widthУстарел в HTML5
Ширина линии.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

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

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

Различия между HTML 4.01 и HTML5

В HTML 4.01 тег <hr> представляет горизонтальную линию.

В HTML5 тег <hr> определяет тематический разрыв. Тем не менее, тег <hr> в визуальных браузерах все еще может отображаться как горизонтальная линия, однако в настоящее время он определяется в семантическом, а не презентативном смысле.

В HTML5 все стилевые атрибуты были удалены. Вместо них следует использовать стили CSS.

Пример использования:

Элемент <hr>.

Используем тег <hr> для тематического разделения контента:

Пример HTML:

Попробуй сам
<h2>HTML</h2>
<p>HTML – язык описания веб-страниц.</p>
<hr>
<h2>CSS</h2>
<p>CSS — определяет то, как будут отображаться HTML элементы.</p>

Спецификации

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

Элемент
<hr> 3+ 1+ 2+ 1+ 1+ 1+
Элемент
<hr> 1+ 1+ 6+ 1+

Похожие страницы

HTML уроки: HTML Элементы

HTML Базовые теги



Тег HR

Тег HR рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег HR относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Синтаксис
<hr>

Закрывающий тег
Не требуется.

Параметры
align — определяет выравнивание линии.
color — цвет линии.
noshade — рисует линию без трехмерных эффектов.
size — толщина линии.
width — ширина линии.

Пример 1. Использование тега HR

<html>
<body>
<hr>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<hr>
</body>
</html>



Описание параметров тега HR

Параметр ALIGN

Описание
Выравнивание линии по краю родительского элемента. В качестве родителя обычно выступает окно браузера.

Синтаксис
<hr align=center | left | right>

Аргументы
center — выравнивание по центру.
left — выравнивание линии по левому краю.
right — выравнивание по пр авому краю.

Значение по умолчанию
center

Аналог CSS
text-align

Пример 2. Выравнивание линии

<html>
<body>
<hr align=right width=300>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</body>
</html>



Параметр COLOR

Описание
Задает цвет линии в браузере Internet Explorer. Одновременно, использование этого параметра запрещает трехмерные эффекты, словно был добавлен параметр noshade. В остальных браузерах параметр color игнорируется.

Синтаксис
<hr color=цвет>

Аргументы
Для задания цвета линии применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.

Значение по умолчанию
Нет.

Пример 3. Изменение цвета линии

<html>
<body>
<hr color=red width=300>
</body>
</html>



Параметр NOSHADE

Описание
Использование параметра noshade отменяет трехмерные эффекты, которые используются при рисовании линии по умолчанию.

Синтаксис
<hr noshade>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр не используется.

Пример 4. Отмена трехмерной линии

<html>
<body>
<hr noshade width=300>
</body>
</html>



Параметр SIZE

Описание
Устанавливает толщину линии в пикселах.

Синтаксис
<hr size=число>

Аргументы
Любое целое положительное число. Нулевое или отрицательное значение устанавливает толщину линии в один пиксел.

Значение по умолчанию
2

Пример 5. Толщина линии

<html>
<body>
<hr noshade size=10>
<hr noshade size=8>
<hr noshade size=6>
<hr noshade size=4>
<hr noshade size=2>
<hr noshade size=1>
</body>
</html>



Параметр WIDTH

Описание
Устанавливает ширину линии в процентах или пикселах. При использовании процентов за 100% берется ширина родительского элемента. Как правило, в качестве родителя выступает окно браузера.

Синтаксис
<hr width=число>

Аргументы
Любое допустимое значение в пикселах или процентах.

Значение по умолчанию
100%

Аналог CSS
width

Пример 6. Ширина линии

<html>
<body>
<hr noshade size=4 width=75%>
<hr noshade size=2 width=60%>
<hr noshade size=1 width=50%>
</body>
</html>

Отправить ответ

avatar
  Подписаться  
Уведомление о