Hr что это в html

Тег hr

Тег hr задает разделительную горизонтальную линию. Преимущество тега в том, что для того, чтобы провести одиночную линию, не требуется создавать лишних блоков. Не требует закрывающего тега.

Пример

Давайте посмотрим, как работает тег hr :

Пример

Давайте попробуем поменять цвет линии с помощью CSS свойства border-color :

Пример

Цвет линии также можно сменить и свойством color (при этом, если одновременно заданы свойства color и border-color — второе имеет приоритет):

Пример

Давайте теперь поменяем цвет линии с помощью CSS свойства border . Обратите внимание на то, что при этом линия станет двойной толщины (так как мы задали границу и сверху, и снизу):

Пример

Попробуем поменять цвет линии с помощью CSS свойства border-top , и зададим только верхнюю границу. Теперь двойной линии не будет:

Пример

Давайте сделаем линию в виде точек с помощью CSS свойства border-top , зададим значение dotted вместо solid :

Пример

Давайте увеличим толщину линии с помощью CSS свойства border-width :

Пример

А теперь давайте линии добавим высоту height и границу через border . Граница при этом распадется на верхнюю и нижнюю:

: The Thematic Break (Horizontal Rule) element

The HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Try it

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

Attributes

This element’s attributes include the global attributes.

Sets the alignment of the rule on the page. If no value is specified, the default value is left .

Sets the color of the rule through color name or hexadecimal value.

Sets the rule to have no shading.

Sets the height, in pixels, of the rule.

Sets the length of the rule on the page through a pixel or percentage value.

Example

HTML

p> This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. p> hr /> p> This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text. p>

Result

Technical summary

Content categories	Flow content.
Permitted content	None; it is a void element.
Tag omission	It must have start tag, but must not have an end tag.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	separator
Permitted ARIA roles	presentation or none
DOM interface	HTMLHRElement

Specifications

Specification
HTML Standard # the-hr-element

Browser compatibility

BCD tables only load in the browser

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Hr что это в html

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Та самая горизонтальная черта, которая разделяет смысловые блоки на странице.

Пример

Скопировать ссылку «Пример» Скопировано

Разделим два абзаца горизонтальной чертой и немного стилизуем её.

 Слово «динозавр» означает.
  Среди палеонтологов.
  p>Слово «динозавр» означает. p> hr> p>Среди палеонтологов. p>

 hr  width: 50px; margin: 30px auto; border: 1px solid black;> hr  width: 50px; margin: 30px auto; border: 1px solid black; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Тег

помогает отделить независимые друг от друга блоки — например, подразделы в статье. Это блочный элемент, поэтому он встаёт в отдельном ряду, визуально разделяя информацию на странице.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Одиночный тег, который не нужно закрывать — просто ставим

в том месте, где нужен разделитель.

На практике

Скопировать ссылку «На практике» Скопировано

Лена Райан советует

Скопировать ссылку «Лена Райан советует» Скопировано

�� Конечно же, перед заголовком не стоит ставить

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

�� Внешний вид тега

по умолчанию обусловлен именно наличием рамки, поэтому для изменения, например, цвета линии достаточно изменить border — color .

Светлана Коробцева советует

Скопировать ссылку «Светлана Коробцева советует» Скопировано

�� Дизайнеры любят пользоваться линией как средством выразительности. Почти никогда такая линия не является смысловым разделителем, и поэтому не стоит верстать её как

. Пользуйтесь этим тегом в том случае, когда без разделителя информация теряет смысл или в ней становится трудно разобраться.

В демо ниже все линии декоративные и потому свёрстаны как псевдоэлемент : : after , а разделяющий визуально одинаковые, но разные по смыслу абзацы

представлен в виде звёздочек.

 ТипографикаАстеризмАстеризм это типографский символ.
  Одиночная звёздочка.
  span class="tag">Типографикаspan> h1 class="title">Астеризмh1> p class="paragraph">Астеризм это типографский символ. p> hr> p class="paragraph">Одиночная звёздочка. p>

 .tag, .title  position: relative;> .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black;> .tag::after  height: 1px;> .title::after  height: 2px;> hr  border: none; text-align: center;> hr::before  content: "***";> .tag, .title  position: relative; > .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black; > .tag::after  height: 1px; > .title::after  height: 2px; > hr  border: none; text-align: center; > hr::before  content: "***"; >

HTML

Tag

Use the

tag to define thematic changes in the content:

The Main Languages of the Web

HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.

CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.

JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.

More «Try it Yourself» examples below.

Definition and Usage

The

tag defines a thematic break in an HTML page (e.g. a shift of topic).

The

element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Browser Support

Element
	Yes	Yes	Yes	Yes	Yes

Global Attributes

The

tag also supports the Global Attributes in HTML.

Event Attributes

The

tag also supports the Event Attributes in HTML.

Читать:

Как сделать ссылку на свой сайт в html

Тег hr

Пример

Пример

Пример

Пример

Пример

Пример

Пример

Пример

: The Thematic Break (Horizontal Rule) element

Try it

Attributes

Example

HTML

Result

Technical summary

Specifications

Browser compatibility

See also

Found a content problem with this page?

MDN

Support

Our communities

Developers

Hr что это в html

Кратко

Пример

Как понять

Как пишется

На практике

Лена Райан советует

Светлана Коробцева советует

Астеризм

HTML Tag

The Main Languages of the Web

Definition and Usage

Browser Support

Global Attributes

Event Attributes

Похожие записи

HTML

Tag