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: "***"; >    Скопировать Скопировано Не удалось скопировать   

Источник

---

: The Thematic Break (Horizontal Rule) element

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.

Задаёт правило выравнивания.По умолчанию значение выставлено как left

Sets the rule to have no shading.

Устанавливает высоту в px

Задаёт длину линии в px либо в %

Example

HTML

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

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 8 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

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.

Источник

HTML Horizontal Line – HR Tag Example

Kolade Chris

You can use the HTML

tag to separate out different topics on a page.

We often use this tag when we want to create a thematic break or separate items on an HTML page.

In this article, you’ll learn how to use this tag in your HTML code.

Table of Contents

• Basic Syntax
• Attributes of
  

  ---

  Tag

• The Width Attribute
• The Color Attribute
• The Size Attribute
• The Align Attribute
• Conclusion

Basic Syntax

The

tag is an empty element. This means that it only has an opening tag,

.

Starting in HTML5, we now need to attach a slash to the tag of an empty element. So, instead of having just

, you should make it

.

In browsers, the

tag is displayed as a horizontal rule or line, like this:

Attributes of

---

Tag

The

tag accepts attributes such as width , color , size , and align .

Before showing you how the individual attributes look and work, I will be setting everything in the body to center with this CSS code:

The Width Attribute

The width attribute is used for specifying a width for the

tag. It takes pixels or percentage as a value.

The Color Attribute

The color attribute is used to specify a color for the

tag.

Here is how it would look if we set a green color for the

tag:

The Size Attribute

You can define a height for the

tag with the size attribute. The value must be set in pixels.

A height of 50px looks like the screenshot below:

The Align Attribute

The align attribute is used to set an alignment for the

tag. It takes left , center and right values.

The default is left – meaning if an alignment is not set, the

tag automatically aligns to the left.

Setting an alignment of right for the

tag looks like this:

Conclusion

This article shows you what the

tag looks like, what it is used for, and the attributes it accepts.

Since the

tag appears as a horizontal rule in browsers, you might be thinking of using it to draw a line.

But you shouldn’t do this because the horizontal rule appears as is only presentationally, not semantically. Instead, you should draw a line with a div or span as the case may be.

If you find this article helpful, share it with your friends and family.

Kolade Chris

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

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

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

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

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

Из этой статьи вы узнаете, как добавить горизонтальную линию в 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>