Добавить горизонтальную линию 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

При верстке страницы, иногда, возникает необходимость выделения заголовка или какого-то блока на странице горизонтальной линией. Например, вот так:

Навигация по статье:

Такую черту можно сделать несколькими способами. Сегодня мы рассмотрим вариант с добавлением горизонтальной линии HTML-тегом.

Специальный HTML-тег для задания горизонтальной линии

Итак, какой из тегов HTML рисует горизонтальную линию? Как это ни странно, в HTML для этой цели предусмотрен специальный тег

. Внешний вид такой линии зависит от заданных параметров.

В примере для

не задано никаких параметров визуализации и результат выглядит вот так:

Горизонтальная линия HTML

В данном случае для тега были применены параметры, прописанные в теме WordPress моего сайта. В вашем случае горизонтальная линия HTML может выглядеть по-другому.

Визуализация горизонтальной линия HTML с помощью атрибутов

Для тега

можно использовать специальные атрибуты, которые позволят задать необходимые параметры внешнего вида. Вот перечень доступных для использования атрибутов:

• align — выравнивание по горизонтали. Доступные значения: center, left, right. По умолчанию задано выравнивание по центру.
• color – цвет. Задается шестнадцатеричным числом или названием цвета.
• noshade — линия без трехмерных эффектов. Трехмерный эффект работает только в том случае если для линии не был задан цвет.
• size – толщина. Задается любым целым положительным числом. 0 задает толщину равную 1 пикселю.
• width – ширина. Можно задавать в пикселях или процентах.

Пример использования данных атрибутов:

Горизонтальная линия HTML

Стилизация горизонтальной линии HTML с помощью CSS

Так же для стилизации тега

вы можете использовать CSS-стили. Задавать визуальное оформление с помощью стилей целесообразно в том случае если у вас достаточно часто на странице используется тег

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

Задать стили для тега

вы можете двумя способами:

1. 1. В теле HTML-страницы перед закрытием тега при помощи тега
2. 2. Прописать стили оформления в файле style.css

Для стилизации горизонтальной линии HTML вы можете использовать следующие CSS-стили:

• width – задание ширины в пикселях или процентах
• height – высота в пикселях
• background-color – цвет линий
• border – при помощи данного стиля можно задать обводку для линии
• border-radius – задает скругление углов
• margin – отступ элемента по верхнему, правому, нижнему и левому краю. Для выравнивания по центу необходимо задать значение auto.
• float – стиль задающий обтекание элемента. В данном случае можно использовать для выравнивания по левому или по правому краю.

Так как линия сделанная с помощью тега

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

Если вам нужно задать одинаковый стиль для всех тегов

на вашем сайте, то необходимо использовать следующий селектор:

Источник

Как добавить горизонтальную линию в HTML

В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 26 242.

Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS. [1] X Источник информации

Работа в HTML 4.01

• Откройте Блокнот или другой текстовый редактор/редактор кода.
• Откройте меню Файл.
• Нажмите Открыть.
• Выберите файл HTML.
• Нажмите Открыть

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

Добавьте пустую строку. Дважды нажмите ↵ Enter , чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.

Добавьте тег

. Введите

в пустое место в начале строки. Тег позволяет нарисовать горизонтальную линию через всю страницу.

 html> body> h1>Заголовокh1> hr size="6" width="50%" align="left" color="green"> p1>Данная строка должна быть отделена от заголовка линией.p1> body> html> 

 html> head> style type="text/css"> hr  width: 50%; height: 20px; background-color: red; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border-width: 2px; border-color: green; > style> head> body> h1>Заголовокh1> hr> p1>Данная строка должна быть отделена от заголовка горизонтальной линией p1> body> html> 

p> Это первый параграф текста Это первый параграф текста Это первый параграф текста Это первый параграф текста p> hr /> p> Это второй параграф текста Это второй параграф текста Это второй параграф текста Это второй параграф текста p>