The 2-Minute Guide to the HTML Horizontal Line Element

Download Now: 25 Free HTML & CSS Hacks
Anna Fitzgerald
Anna Fitzgerald

Published:

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.

Marketer creating horizontal line in HTML to mark end of one section in an article

In this post, we’ll walk through how to make a horizontal line and customize its color, width, and alignment on page.

Download Now: 50 Code Templates [Free Snippets]

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.

The Atlantic magazine uses a horizontal line to mark the end of an article before the author's bio

Image Source

Now that we understand the benefit of a horizontal line, let's look at how to create one in HTML. 

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

  • Navigation Menus & Breadcrumbs Templates
  • Button Transition Templates
  • CSS Effects Templates
  • And more!
Learn more

    Download Free

    All fields are required.

    You're all set!

    Click this link to access this resource at any time.

    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:

    See the Pen eYvVRWQ by Christina Perricone (@hubspot) on CodePen.

    The <hr> element used to be non-semantic so you could style it using the following attributes.

    Deprecated Attributes Purpose
    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:

    See the Pen oNZEeJE by Christina Perricone (@hubspot) on CodePen.

    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:

    See the Pen HTML Horizontal Line Width by Christina Perricone (@hubspot) on CodePen.

    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:

    See the Pen abJqLQa by Christina Perricone (@hubspot) on CodePen.

    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.

    New Call-to-action

    Topics: HTML

    Related Articles

    Tangible tips and coding templates from experts to help you code better and faster.

      CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

      START FREE OR GET A DEMO