Как правило, при разметке документа следует избегать использования элементов, выполняющих чисто визуальные функции, такие как горизонтальная линия (hr). Документ, структура которого описывает назначение его элементов, легче поддерживать; он быстрее загружается и более понятен для поисковых систем. Эффекта, аналогичного использованию горизонтальной линии, можно добиться с помощью рамок существующих элементов.

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

Решение
С помощью CSS можно изменить цвет, высоту и ширину горизонтальной линии. Однако это следует делать с осторожностью, поскольку один и тот же эффект может по-разному выглядеть в различных браузерах. К примеру, в следующем примере используются два свойства, color и background-color, с одним и тем же значением, поскольку браузеры, основанные на движке Gecko, например Firefox, изменяют цвет линии с помощью свойства background-color, а Internet Explorer – с помощью color:

hr {
border: none;
background-color: #256579;
color: #256579;
height: 2px;
width: 90%;
}

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

Рис. 2.19. Изменение цвета, высоты и ширины горизонтальной линии