HTML5 tag for horizontal line break

Question

I did already find a post about using the  lt hr gt  tag to insert a line break  but when I looked up the tag on the w3 website  http   www w3schools com tags tag hr asp  it says that all attributes of the tag are not supported in HTML5  Obviously I want to make my website HTML5 compatible  so what would be the best way to insert a visible horizontal line   Thanks

User · Answer

You can make a div that has the same attributes as the <hr> tag. This way it is fully able to be customized. Here is some sample code:

The 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>

The 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 see how the project turns out, here is a JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/

User · Answer

Simply use  hr tag in HTML file and add below code in 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 perfectly

User · Answer

You can still use  lt hr gt  as a horizontal line  and you probably should  In HTML5 it defines a thematic break in content  without making any promises about how it is displayed  The attributes that aren t supported in the HTML5 spec are all related to the tag s appearance  The appearance should be set in CSS  not in the HTML itself    So use the  lt hr gt  tag without attributes  then style it in CSS to appear the way you want

User · Answer

I am answering this old question just because it still shows up in google queries and I think one optimal answer is missing  Try this code  use   before or   after  See Align  lt hr gt  to the left in an HTML5-compliant way

User · Answer

Instead of using  lt hr gt   you can one of the border of the enclosing block and display it as a horizontal line   Here is a sample code   The HTML    lt div class  title block  gt       lt h3 gt This is a header  lt  h3 gt   lt  div gt   lt p gt Here is some sample paragraph text  lt br gt  This demonstrates that a horizontal line goes between the title and the paragraph  lt  p gt    The CSS    title block       border-bottom  1px solid  ddd      padding-bottom  5px      margin-bottom  5px

[css] HTML5 tag for horizontal line break

The HTML:

The CSS:

Examples related to css

Examples related to html

Examples related to line-breaks