HTML5 horizontal line break tag

Question

I already found a message about using the <hr> tag to insert a line break, but when I looked at the tag on the w3 website ( http://www.w3schools.com/tags/tag_hr.asp ) it says that all the attributes of the tag are not supported in HTML5. Obviously, I want my site to be HTML5 compatible, so what would be the best way to insert a visible horizontal line?

thanks

Answer 1

You can use <hr> as a horizontal line, and you probably should. In HTML5, it defines a thematic gap in content, without making any promises about how it is displayed. Attributes that are not supported in the HTML5 specification are related to the appearance of the tag. Appearance should be set in CSS, and not in the HTML itself.

So, use the <hr> with no attributes, then create it in CSS to make it look the way you want.

Answer 2

You can create a div that has the same attributes as the <hr> . Thus, it can be fully customized. Here is a sample code:

HTML:

 <h3>This is a header.</h3> <div class="customHr">.</div> <p>Here is some sample paragraph text.<br> This demonstrates what could go below a custom hr.</p> 

CSS:

 .customHr { width: 95% font-size: 1px; color: rgba(0, 0, 0, 0); line-height: 1px; background-color: grey; margin-top: -6px; margin-bottom: 10px; } 

---

To find out how the project turns out, here is the JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/

Answer 3

Just use the hr tag in the HTML file and add the code below to the CSS file.

  hr { display: block; position: relative; padding: 0; margin: 8px auto; height: 0; width: 100%; max-height: 0; font-size: 1px; line-height: 0; clear: both; border: none; border-top: 1px solid #aaaaaa; border-bottom: 1px solid #ffffff; } 

It works great.

Answer 4

Instead of using <hr>, you can use one of the borders of the closing block and display it as a horizontal line.

Here is a sample code:

HTML:

 <div class="title_block"> <h3>This is a header.</h3> </div> <p>Here is some sample paragraph text.<br> This demonstrates that a horizontal line goes between the title and the paragraph.</p> 

CSS:

 .title_block { border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 5px; } 

Answer 5

I answer this old question only because it is still displayed in Google queries, and I think that one optimal answer is missing: use :: before or :: after

See Align <hr> Left in HTML5 Compatible Way