Подчеркивание текста тег HR

Здесь мы подробно разберем тег HR и коснемся свойства CSS border-bottom. С помощью тега HR в html создается линия на всю ширину веб-страницы, которую можно использовать для подчеркивания заголовков или для выделения абзацев в тексте.

Эту тему я начал развивать в статье основы HTML работа с текстом. Сейчас хочу остановиться на ней поподробнее.

У нас есть два стандарта верстки сайта – html и xhtml. В каждом случае синтаксис тега HR несколько отличается. В html допустимо использовать в написании тегов заглавные буквы. В частности записи <hr> и <HR> равнозначны. В XHTML написание этого тега имеет только один вариант – <hr />. Обратите внимание, что по стандарту xhtml все одиночные теги должны быть закрыты.

Если мы вставим между абзацами веб-страницы запись <hr />, то получим:

Начертание линии, созданной с помощью этого тега, отдано на откуп браузерам. В каждом браузере она рисуется по-своему. Например, в Internet Explorer 9 и Google Chrome 14 чертится тонкая линия. А в Mozilla Firefox 6.0 и Opera 11.5 к этой тонкой линии добавляется эффект объемности.

Обратите внимание. Если в CSS настройках веб-страницы стоит

* {border:0; margin:0;}

то в ряде браузеров перестанет работать тег HR. Линия, которую вычерчивает этот тег, пропадет. Кстати границы у таблиц тоже пропадут.

Можно отказаться от эффекта объемности. В стандарте HTML пишем: <hr noshade>. Для XHTML требуется более детальная расшифровка: <hr noshade="noshade" />. В итоге получаем линию:

Эффекта объемности нет, но линия получилась более толстая. Методами html можно регулировать толщину линии, создаваемой тегом HR, с помощью атрибута size. Пример:

Код <hr noshade="noshade" size="1" />

<hr noshade="noshade" size="3" />

Однако по непонятной причине в IE 9 линия получается толще, чем в других браузерах.

По умолчанию линия, создаваемая тегом HR, чертится на всю ширину страницы. Это можно изменить с помощью стилей и дополнительных атрибутов этого тега. Чтобы линия плотнее прижималась к заголовку, тег HR имеет смысл поместить внутрь, например, тега заголовков H1 – H6

Заметьте, что помещение тега HR внутрь спаренного тега абзаца P не является корректным.

Первый пример ограничения длины HR:
Заголовок и HR

Код <h5 style="margin-left:30px; margin-right:30px;">Заголовок и HR<hr /></h5>

Тут мы использовали отступы, созданные с помощью свойства margin.

А если применить стили к тегу HR? Можно попытаться использовать свойство CSS color, для задания цвета вычерчиваемой линии: <hr noshade="noshade" size="2" style="color:lime" />. Однако браузеры Opera и IE 9 игнорируют CSS и не меняют цвет линии. Эта запись корректно работает только в Mozilla Firefox 6.0.

Но на наше счастье для тега HR предусмотрен атрибут color. В итоге нужный цвет линии мы все-таки получаем:

<hr noshade="noshade" size="2" color="lime" />

Это единственно правильный способ задать цвет линии тега HR, который корректно отображается во всех браузерах.

Второй пример ограничения длины линии тега HR заключается в применении атрибута width (ширина). Получаем:

<hr noshade="noshade" size="2" color="#cc33cc" width="200px" align="left" />

Кстати ширину линии для HR можно задать и через стили записью style="width:200px". Все браузеры этот способ также признают за корректный. В примере мы так же использовали атрибут align. С помощью него можно выровнять линию по левому краю (left), по правому краю (right) и по центру (center).

Однако если в CSS настройках веб-страницы стоит запись:

*{margin: 0}

то атрибут Align тега HR работать будет только в IE 9. В остальных браузерах линия всегда будет прижата к левому краю.

Однако если мы хотим создать подчеркивание прямо под нужным текстом и на его ширину, то разумнее ограничить этот текст тегом SPAN и применить к этому тегу свойство CSS border-bottom.

Подчеркнул нужный текст строки

<p>Подчеркнул <span style="border-bottom:2px solid green;">нужный</span> текст</p>

Мы задали толщину линии в 2 пикселя; вид линии – сплошная (solid); и цвет линии.

Подробнее о параметрах border-bottom смотрим на сайте Htmlbook.ru.

Для владельцев CMS. Мой сайт создан в CMS MODx. В нее, как и во многие другие cms, встроен редактор контента TinyMCE. Вот уж кто может попортить крови, нагло изменяя ваш html код. В частности TinyMCE по умолчанию не допускает применять к тегу HR атрибуты Color и Width, считая их не валидными.

Как это исправить? Если у вас одна из последних версий TinyMCE, то делаем так. Идем MODx Manager – Элементы – Управление элементами – Плагины - TinyMCE. В окне редактировать плагин TinyMCE открываем вкладку Конфигурация плагина. В форму Custom Parameters вставляем следующий код:

extended_valid_elements:"noindex, hr[color|width|size|noshade|style|align]"

Этой строкой я разрешил запрещенный тег <noindex> (пригодится он) и массу атрибутов для тега HR. Теперь TinyMCE мешать нам не будет.

Вывод. Тег HR по-разному трактуется разными браузерами. Поэтому он не подходит для использования там, где требуется жесткое соблюдение разметки веб-страницы. Плюс Google Chrome игнорирует атрибут этого тега Color.

Все, что знал о теге HR, написал. Надеюсь, эта статья вам поможет.