logo CBCE Skill INDIA

Welcome to CBCE Skill INDIA. An ISO 9001:2015 Certified Autonomous Body | Best Quality Computer and Skills Training Provider Organization. Established Under Indian Trust Act 1882, Govt. of India. Identity No. - IV-190200628, and registered under NITI Aayog Govt. of India. Identity No. - WB/2023/0344555. Also registered under Ministry of Micro, Small & Medium Enterprises - MSME (Govt. of India). Registration Number - UDYAM-WB-06-0031863

How to use
in HTML?


In HTML, the <hr> tag is used to create a thematic break or horizontal line, typically to visually separate content sections. The <hr> tag doesn't have a closing tag because it's a self-closing tag. You can also use the <hr> tag to indicate a thematic change in your content. Here's how you use it:

<!DOCTYPE html>
<html>
<head>
    <title>Horizontal Line Example</title>
</head>
<body>
    <h1>Section 1</h1>
    <p>This is the content of section 1.</p>

    <hr> <!-- This creates a horizontal line -->

    <h1>Section 2</h1>
    <p>This is the content of section 2.</p>
</body>
</html>

 

  • In this example, a horizontal line is used to visually separate the content of "Section 1" and "Section 2." The <hr> tag is placed between the two sections to indicate a thematic change in the content.
  • You can also add attributes to the <hr> tag to customize its appearance, such as color, size, and alignment.

For example:

<hr color="blue" size="2" align="center">

This version of the <hr> tag has the following attributes:

  • `color`: Sets the color of the horizontal line.
  • `size`: Sets the thickness or height of the line.
  • `style`: Allows you to apply inline CSS styles to further customize the appearance. In this case, it adds a margin of 20 pixels above and below the line.

 

Remember that the exact appearance of the <hr> element can vary depending on the browser and the default CSS styles applied by your website's stylesheet. If you want more precise control over the styling of your horizontal lines, you may consider using CSS.

Thank You

Popular Post:

Give us your feedback!

Your email address will not be published. Required fields are marked *
0 Comments Write Comment