You can do a lot in HTML. You can create line breaks. You can embed images. You can bold or italicize text. You can even create a thematic break using the HTML horizontal rule element.
In this post, weâ€™ll walk through how to make a horizontal line and customize its color, width, and alignment on page.
Why Make a Horizontal Line in HTML
Letâ€™s say you want to mark a change of scene in a play, a new section of an essay, or the conclusion of an article. In any of these cases, you could create a horizontal line to visually mark that change.
Check out this example on The Atlantic that marks the end of the article and beginning of the authorâ€™s bio.
Now that we understand the benefit of a horizontal line, let’s look at how to create one in HTML.
How to Make a Horizontal Line in HTML
To make a horizontal line in HTML, use the <hr> element. You can place the <hr> element â€” which stands for â€œhorizontal ruleâ€ â€” wherever you want to create a horizontal line across a web page. Like the img element, the <hr> element is an â€œempty elementâ€ because it does not have a closing tag.
To create a default horizontal line, Iâ€™m going to add the <hr> tag in between two paragraph elements. Hereâ€™s the code and the result:
The <hr> element used to be non-semantic so you could style it using the following attributes.
|color=â€œ…â€||Sets the color of the horizontal line.|
|width=â€œ…â€||Sets the width of the horizontal line.|
|size=â€œ…â€||Sets the height of the horizontal line.|
|align=â€œ…â€||Sets the alignment of the horizontal line.|
|noshade||Sets the horizontal line to be solid, with no shading.|
However, in HTML5, the <hr> element became semantic. Semantic HTML is basically HTML code that says what it does. This is better for web accessibility since browsers, assistive reading technology, and other automated systems will be able to tell there is a thematic break. It also means the attributes above have been deprecated.
To style the <hr> element now, you need to use CSS. Letâ€™s look at how to change the color, width, and position of a horizontal line using CSS below.
HTML Horizontal Line Color
You can use the CSS background-color property to set the color of the horizontal line element. But first, you have to specify the height of the <hr> element. You also have to set the border-width property to 0. Otherwise, the default gray horizontal line will appear stacked on top of the thicker, colored line you create.
Hereâ€™s an example:
HTML Horizontal Line Width
You can use the CSS width property to set the width of the horizontal line element. You can define this property with percentages or length values (px, pt, em, and rem are just a few).
Hereâ€™s an example:
HTML Horizontal Line Alignment
You can use the CSS margin property to change the position of the horizontal line element. For example, if I want to make the line look left-aligned instead of centered, then I could set the margin-left property to 0. Iâ€™d also have to define the width of the <hr> element.
Hereâ€™s an example of a horizontal line styled with the width and margin properties:
An Easy HTML Trick
Knowing the basics of HTML can be extremely helpful for digital marketers. It can free you from relying on a webmaster or freelance web developer for simple updates to your website or email newsletter â€” like creating a horizontal line across the page.
Editor’s note: This post was originally published in July 2011 and has been updated for comprehensiveness.