Table of contents

HTML <hr> Tag

What is HTML <hr> Tag?

The HTML hr tag is used to insert a horizontal line (or horizontal rule) in a webpage. It visually separates sections of content, making web pages easier to read and better organized. The hr tag represents a thematic break between paragraphs or sections of content.

It is a self-closing tag, meaning it does not require a closing tag. The HTML hr tag is often used to divide content, such as between different topics, articles, or footer and body content on a page.

Syntax of the HTML <hr> Tag

plaintext
<hr>

The hr tag starts and ends with the same tag name. It does not have a closing tag and can be styled using CSS to adjust its color, size, or width.

Examples of HTML <hr> Tag

Example 1: Basic HTML hr Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<h1>Welcome to Scholar247</h1>
<p>HTML is the standard language for creating web pages.</p>

<hr>

<p>This line separates two sections of content for better readability.</p>

</body>
</html>

In this example, the hr tag creates a simple horizontal line dividing two paragraphs. It improves readability and separates topics visually.

Example 2: Styled HTML hr Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<h2>About Scholar247</h2>
<p>We provide educational content, tutorials, and SEO tips for learners.</p>

<hr style="border: 2px solid blue; width: 60%;">

<p>Stay tuned for more web development resources and free guides.</p>

</body>
</html>

This example shows a customized hr tag using inline CSS styling. The line is blue, thicker, and shorter than the full width, making it more visually appealing.

Attributes of the HTML <hr> Tag

The HTML hr tag does not have any specific attributes, but it can be styled using global HTML attributes and CSS properties.

Common global attributes used with the hr tag include:

• class – Used to assign a CSS class for styling.
• id – Used to uniquely identify the hr element.
• style – Used for inline CSS styling.
• title – Provides additional information as a tooltip.

Best Practices for HTML <hr> Tag

• Use the hr tag to separate logical sections, not just for decoration.
• Avoid overusing the hr tag; too many lines can make pages cluttered.
• Use CSS for styling instead of deprecated attributes like size or color.
• Maintain consistent spacing and alignment with surrounding content.
• Test responsiveness to ensure the line looks good on all devices.

FAQs About HTML <hr> Tag

Q1: What is the purpose of the HTML hr tag?

The hr tag creates a horizontal line to visually separate content sections on a webpage.

Q2: Is the hr tag self-closing?

Yes. The hr tag is self-closing, meaning it does not need a separate closing tag like other HTML elements.

Q3: Can I style the hr tag with CSS?

Yes. You can change its color, height, width, or style using CSS properties such as border, background-color, and width.

Q4: Does the hr tag affect SEO?

No. The hr tag is purely visual and does not impact SEO directly, but it can improve readability, which indirectly helps user experience.

Q5: What is the default appearance of the hr tag?

By default, the hr tag displays a thin, gray, horizontal line across the full width of the page or container.

HTML

Related Articles