HTML
Hr tag
The <hr>
tag in HTML is used to create a horizontal rule or line that visually separates content within a webpage. It is a self-closing tag, meaning it does not require a closing tag.
Syntax:
<hr>
Key Characteristics:
Purpose:
- The
<hr>
tag is primarily used to divide content into distinct sections, helping to create visual breaks in the content. It can be useful for separating different parts of a page, such as between sections, articles, or other content.
- The
Visual Representation:
- By default, the
<hr>
tag renders as a horizontal line that spans the width of its containing element. The appearance can be customized using CSS, including its color, width, height, and style.
- By default, the
Attributes:
- In HTML5, the
<hr>
tag does not have any attributes specific to its visual presentation. However, you can style it using CSS. Some attributes used in earlier HTML versions include:width
: Sets the width of the horizontal rule (e.g.,width="50%"
).size
: Defines the height of the horizontal rule (e.g.,size="2"
).noshade
: Creates a solid line without a shading effect (not used in HTML5).
- In HTML5, the
Example Usage:
Basic Example:
<p>Section 1 content.</p>
<hr>
<p>Section 2 content.</p>
In this example:
- The
<hr>
tag is used to visually separate two paragraphs of content.
Styled Example:
<hr style="border: 0; height: 2px; background: #333;">
In this example:
- The
<hr>
tag is styled with inline CSS to create a dark, 2-pixel high horizontal line.
Accessibility and Semantic Meaning:
Accessibility: The
<hr>
tag is a purely visual element and does not carry semantic meaning beyond its visual presentation. For users relying on screen readers, the<hr>
tag does not provide specific information or context. It is generally used for visual separation rather than conveying structural or semantic meaning.Semantic Meaning: In terms of HTML semantics, the
<hr>
tag represents a thematic break or change in the content, but it is more commonly used for visual separation. For conveying a thematic shift or separation in content more semantically, consider using structural elements like<section>
,<article>
, or<div>
with appropriate headings.