Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 tag for horizontal line break

I did already find a post about using the <hr> 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

like image 326
Willman Avatar asked Nov 30 '14 16:11

Willman


People also ask

How do I draw a horizontal line in HTML5?

Adding the Horizontal Line using <hr> tag: The Horizontal Rule tag (<hr>) is used for the purpose of inserting horizontal lines in the HTML document in order to separate sections of the document. It is an empty or unpaired tag that means there is no need for the closing tag.

How do I put a horizontal line between text in HTML?

While working on web pages, you may want to add a horizontal line to indicate a thematic change between different sections. To create a horizontal line in HTML, you will need to use the HTML hr tag. HR is a block-level element that moves all the elements after it to another line.

What is the correct way to insert a line break in HTML5?

To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag.

How do you make a line break in HTML?

The <br> tag inserts a single line break. The <br> tag is useful for writing addresses or poems. The <br> tag is an empty tag which means that it has no end tag.


2 Answers

You can still use <hr> 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 <hr> tag without attributes, then style it in CSS to appear the way you want.

like image 151
Thaum Rystra Avatar answered Sep 20 '22 21:09

Thaum Rystra


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 .

like image 26
shuboy2014 Avatar answered Sep 19 '22 21:09

shuboy2014