# How to create a horizontal line in HTML with the hr tag The HTML horizontal line is a line that divides content on a website into two sections. The corresponding HTML `
` tag does not require a closing element. ## What is an HTML horizontal line? An HTML horizontal line is used to draw a **visible and continuous dividing line** between two paragraphs or other meaningful sections in an [HTML](https://www.ionos.com/digitalguide/websites/web-development/what-is-html/) document. It is defined with the HTML `
` tag and is used to improve the structure and readability of a web page. `
` is not only a visual dividing line, but also has semantic significance because the element indicates that there is a change of topic or a thematic break. The [HTML tag](https://www.ionos.com/digitalguide/websites/web-development/html-tags/) can theoretically be used anywhere within the [body](https://www.ionos.com/digitalguide/websites/web-development/html-body/) element and does not require a closing tag. The abbreviation “hr” stands for “horizontal ruler”. HTML `
` supports all [HTML attributes](https://www.ionos.com/digitalguide/websites/web-development/html-attributes/) and is supported by all common browsers. ## What is the syntax of HTML `
` and how is it used? You don’t need any attributes or parameters to implement the horizontal line element in HTML, making the syntax for HTML `
` simple: ```html
``` We’ll illustrate how this element works with a simple example. Below, we’re going to take a paragraph (`

`) and a quoted text (`

`) and separate them in our HTML document using a horizontal line. The corresponding code looks like this: ```html

HTML horizontal line

HTML is the standard markup language used to create documents for display on the web. It outlines the structure of a web page and enables the definition of text, images, links and various other elements.

“HTML is easy to learn and provides a solid foundation for creating websites.”
``` [![Image: Example of an HTML horizontal line](https://www.ionos.com/digitalguide/fileadmin/_processed_/f/c/csm_html-horizontal-line-example_24f0c103a4.webp "Example of an HTML horizontal line")](https://www.ionos.com/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-horizontal-line-example.png) The horizontal line visually separates the text passage from the quote. ## How to customize horizontal lines in HTML Before [HTML5](https://www.ionos.com/digitalguide/websites/web-development/what-is-html5/) was introduced, the attributes `align`, `color`, `noshade`, `size` and `width` were used to customize horizontal lines in HTML. Since, however, they are no longer supported, you can use the [CSS](https://www.ionos.com/digitalguide/websites/web-design/css-coding-made-easy/) attribute [style](https://www.ionos.com/digitalguide/websites/web-development/html-tag-style/) to make changes to horizontal lines in HTML. Use this code instead of `align`: ```html

HTML horizontal line

HTML is the standard markup language for documents that are to be displayed on the web. It describes the structure of a website and makes it possible to define text, images, links and other elements.

“HTML is easy to learn and provides a solid foundation for creating websites.”
``` You can change the **color** of a horizontal HTML line with the `color` property: ```html

HTML horizontal line

HTML is the standard markup language for documents that are to be displayed on the web. It describes the structure of a website and makes it possible to define text, images, links and other elements.

“HTML is easy to learn and provides a solid foundation for creating websites.”
``` Instead of `noshade`, use the following code to include a horizontal line without a shadow: ```html

A normal horizontal line:

With CSS:

``` You can change the **height** with `height`: ```html

A normal horizontal line:

A horizontal line with a height of 50 pixels:

``` You can set the **width** of an HTML horizontal line with the `width` parameter: ```html

A normal horizontal line:

A horizontal line with a width of 30 percent:

``` This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-development/html-horizontal-line/](https://www.ionos.com/digitalguide/websites/web-development/html-horizontal-line/) for AI/LLM consumption.