HTML Heading Details
In HTML, headings are defined using the <h1> to <h6> tags. Headings are used to structure the content of a page, with <h1> being the highest level (most important) and <h6> being the lowest. Here’s a detailed explanation and an example of HTML headings, along with a simple block article structure:
HTML Headings:
1. <h1> – Heading Level 1:
- Explanation: Represents the main heading of the document. It is the most significant and should be used for the primary topic of the page.
- Example:
<h1>This is the Main Heading</h1>
2. <h2> – Heading Level 2:
- Explanation: Represents a subheading. It is used for section titles or topics related to the main heading.
- Example:
<h2>Subheading</h2>
3. <h3> – Heading Level 3:
- Explanation: Represents a sub-subheading. It is used for subsection titles or topics related to the <h2> heading.
- Example:
<h3>Sub-Subheading</h3>
4. <h4> to <h6> – Heading Levels 4 to 6:
- Explanation: Represent progressively lower levels of headings. They are used for subsections or less significant titles.
- Example:
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
Example: Block Article Structure:
Now, let’s combine headings to create a simple block article structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Article</title>
</head>
<body>
<header>
<h1>Main Article Title</h1>
<p>Published on <time datetime="2024-01-05">January 5, 2024</time></p>
</header>
<section>
<h2>Section 1: Introduction</h2>
<p>This is the introduction of the article...</p>
</section>
<section>
<h2>Section 2: Main Content</h2>
<p>More detailed information goes here...</p>
<h3>Subsection 2.1: Details</h3>
<p>Additional details within the main content section...</p>
</section>
<section>
<h2>Section 3: Conclusion</h2>
<p>Summing up the key points...</p>
</section>
<footer>
<p>© 2024 Your Website Name. All rights reserved.</p>
</footer>
</body>
</html>
This example includes the main article title, publication date, multiple sections with different headings, and a footer. The structure helps organize the content and makes it more readable for both users and search engines.
