The <hr> tag in HTML stands for "horizontal rule." It is used to create a thematic break or a horizontal line across the page, typically to separate content into different sections or to indicate a shift in topic or thought. The <hr> tag is an empty element, which means it does not have a closing tag.
Features of the <hr> Tag
1. Self-closing Tag: Since it's an empty element, you use it as <hr /> in XHTML or simply as <hr> in HTML5.
2. Styling: By default, the appearance of the <hr> tag is a simple, horizontal line. However, its style can be customized using CSS properties such as width, height, color, border, and more.
3. Thematic Break: It is often used to represent a shift in the content or a change in the theme, which helps improve the readability of the content.
4. Semantic Meaning: In HTML5, the <hr> tag has a semantic meaning, which means it is used to represent a thematic change in the content. It's more than just a visual separator; it provides context to the content's structure.
horizontal-line.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Heading Tags Example</title> </head> <body> <h1>Main Title of the Page</h1> <p>This is a paragraph under the main title. It gives an introduction to the content of the page.</p> <hr> <h2>Section 1: Introduction to HTML</h2> <p>This section covers the basics of HTML.</p> <h3>Subsection: What is HTML?</h3> <p>HTML stands for HyperText Markup Language.</p> <h4>Detail: History of HTML</h4> <p>HTML was created by Tim Berners-Lee in 1991.</p> <h5>Further Detail: Evolution of HTML</h5> <p>HTML has gone through many versions, including HTML4, XHTML, and HTML5.</p> <h6>Minor Note: HTML5 Features</h6> <p>HTML5 introduced new elements like <code><article></code>, <code><section></code>, and <code><nav>.</p> <hr> </body> </html>
Above snippet generate below content.
Using the <hr> tag appropriately can improve the accessibility of a webpage. Screen readers recognize the <hr> tag and can announce it to users, indicating a shift in content or topic. Additionally, it can help search engines better understand the structure and flow of the content on a webpage.
The <hr> tag is a simple yet powerful tool for visually and semantically separating content. While it may seem basic, using it effectively in conjunction with CSS customization can greatly enhance the readability and structure of a webpage.
Previous Next Home
No comments:
Post a Comment