Hr html тег: Тег hr | Справочник HTML CSS – Html теги (на примере p, br, hr) и их атрибуты | Создание сайтов и заработок в сети

HTML тег hr | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 23.01.2011

Тег <hr> (англ. horizontal rule — горизонтальная линия) отображается в виде горизонтальной линии.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<hr/>

Атрибуты

Основные Вспомогательные События

align выраванивание линии в родительском контейнере
  • left — по левому краю
  • center — по центру (по умолчанию)
  • right — по правому краю

Не рекомендуется в спецификации HTML 4.01!
class определяет имя используемого класса
color задает цвет линии.
Отсутствует в спецификации HTML 4.01!
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет язык отображаемого документа
noshade флаг. Отменяет трехмерный эффект отображения линии.
Не рекомендуется в спецификации HTML 4.01!
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
size
толщина линии.
Не рекомендуется в спецификации HTML 4.01!
style задает встроенную таблицу стилей
title всплывающая подсказка
width ширина линии.
Не рекомендуется в спецификации HTML 4.01!

Пример

Различные варианты применения параметров тега:

<hr/>
<hr noshade="noshade"/>
<hr/>
<hr size="5"/>
<hr color="#ff0000" size="5"/>
<hr align="left"/>

Рекомендации по использованию

  • должен быть закрыт слешем: (<hr/>)
  • обязательных атрибутов нет
  • элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
  • для оформления не рекомендуем использовать атрибуты, вместо них использовать таблицы стилей
  • каждый браузер отображает тег <hr /> по разному, rак заставить все браузеры отображать <hr/> одинаково можно прочитать в статье Кроссбраузерный <hr />

Твой код:
<html> <head> <title></title> </head> <body> <hr/> <hr noshade="noshade"/> <hr/> <hr size="5"/> <hr color="#ff0000" size="5"/> <hr align="left"/> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

seodon.ru | Теги HTML - Тег HR

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

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

Атрибуты

Личные атрибуты:

  • align — Устанавливает горизонтальное положение линии относительно окружающего контекста.
  • color — Задает цвет линии.
  • noshade — Линия становится «плоской», а не объемной.
  • size — Высота линии.
  • width — Ширина линии.

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

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (блоки).

Модель тега: block (блочный, уровня блока).

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

<hr>

Пример HTML: применение тега HR

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега HR</title>
 </head>
 <body>
  <h4>«Битые» ссылки.</h4>
  <hr>
  <p>Одной из часто встречающихся ошибок начинающих сайтостроителей
     является наличие на сайте «битых» ссылок. То есть ссылок, которые
     никуда не ведут. Это может случиться из-за ошибки в адресе или из-за
     того, что человек решил переместить страницу в другую папку и забыл
     удалить/переписать ссылку и т.д.</p> 
 </body>
</html>

Результат примера

Результат. Применение тега HR.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа


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

Пример

HTML
HTML - язык для описания веб-страниц.....

<hr>

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

Попробуйте сами »

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

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

Tег <hr> используется для разделения содержимого (или определения изменения) на HTML странице.


Поддержка браузеров

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

Элемент
<hr> Да Да Да Да Да

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

В HTML5, тег <hr> определяет тематический перерыв.

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

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

Все атрибуты макета удаляются в HTML5. Используйте в CSS.


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

В HTML, тег <hr> не имеет закрывающего тега.

В XHTML, тег <hr> тег должен быть закрыт, как: <hr />.


Атрибуты

Атрибут Значение Описание
align left
center
right
Не поддерживается в HTML5.
Задает выравнивание элемент <hr>
noshade noshade Не поддерживается в HTML5.
Указывает, что элемент <hr> должен отображать один сплошной цвет (noshaded), вместо закрашенным цветом
size pixels Не поддерживается в HTML5.
Задает высоту элемента <hr>
width pixels
%
Не поддерживается в HTML5.
Задает ширину элемента <hr>

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

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


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

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


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

Справочник HTML DOM: Объект HR


Настройки 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;
}

Попробуйте сами »

Как с помощью стилей задать цвет линии, созданной с помощью тега

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

Задача

Кроссбраузерно вывести горизонтальную одноцветную линию с помощью тега <hr>.

Решение

Цвет линии, добавленной на веб-страницу через тег <hr>, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color, а браузеры Firefox и Opera — background-color. Но это еще не все, при этом обязательно следует указать толщину линии (свойство height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border. Собирая все параметры воедино для селектора HR, получим универсальное решение для популярных браузеров.

Пример 1. Цвет горизонтальной линии

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет горизонтальной линии</title>
  <style>
   hr {
    border: none; /* Убираем границу для браузера Firefox */
    color: red; /* Цвет линии для остальных браузеров */
    background-color: red; /* Цвет линии для браузера Firefox и Opera */
    height: 2px; /* Толщина линии */
   }
  </style>
 </head>
 <body>
  <hr>
  <hr>
 </body>
</html>

В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).

Рис. 1. Цветная горизонтальная линия в браузере Safari

Атрибут align | 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="center | left | right">

Значения

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

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

center

Аналог CSS

text-align

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег HR, атрибут align</title>
 </head>
 <body>

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

 </body>
</html>

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

Рис. 1. Выравнивание линии по правому краю

Добавить комментарий

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