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

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

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

You can make a div that has the same attributes as the  lt hr gt  tag  This way it is fully able to be customized  Here is some sample code   The HTML    lt h3 gt This is a header  lt  h3 gt   lt div class  customHr  gt   lt  div gt    lt p gt Here is some sample paragraph text  lt br gt  This demonstrates what could go below a custom hr  lt  p gt    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

[css] HTML5 tag for horizontal line break

Examples related to css

Examples related to html

Examples related to line-breaks