How to create horizontal line in HTML Page

17 Aug How to create horizontal line in HTML Page

Posted at 22:37h in HTML5 by Studyopedia Editorial Staff 0 Comments

If you want to set a content separate from another, then use the horizontal rule. For example, you may have the following horizontal line on some website:

Horizontal Tag Example

Above, a line separating the content from the Read More articles. This is what we call horizontal rule.

To implement horizontal rule on a website, use the <hr> element. Add the element to the <body> … </body>. Unlike other HTML elements, <hr> do not have an end tag.

Let us now see how to set horizontal rule on a web page and implement the <hr> tag:

Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Example</title>
   </head>
   <body>
     <h2>World Cup Cricket</h2>
      <p>Below is the information about the World cricket series:</p>
       <ul>
          <li>Begins on 19th September</li>
          <li>Match Timings: 10AM to 5PM</li>
          <li>Sponsor: ABCD Group</li>
       </ul>
      <hr>
      <p><strong>Note:</strong></p>
      <p>All details will be revealed on 10th September</p>
   </body>
</html>