HTML headings are used to define different levels of titles and subtitles in a webpage. They help in organizing content hierarchically and improving readability.
✔ HTML provides six levels of headings: <h1> to <h6>.
✔ <h1> is the largest and most important heading, while <h6> is the smallest.
✔ Headings should be used in a logical order for SEO and accessibility.
✔ They are block-level elements, meaning each heading starts on a new line.
<h1> to <h6>| Heading | Size & Purpose |
|---|---|
<h1> |
Largest heading, usually for the main title of a page. |
<h2> |
Subheading, used for major sections. |
<h3> |
Sub-subheading, for subsections of <h2>. |
<h4> |
Smaller subheadings, for more specific topics. |
<h5> |
Less important subheading, rarely used. |
<h6> |
Smallest heading, used for minor details. |
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>Main Title of the Page</h1>
<h2>Section 1: Introduction</h2>
<h3>Subsection 1.1: What is HTML?</h3>
<h4>Sub-subsection: History of HTML</h4>
<h5>Smaller Heading Example</h5>
<h6>Least Important Heading</h6>
</body>
</html>
✔ Explanation:
<h1> defines the main title of the webpage.<h2> is used for major sections of the content.<h3> and lower headings help organize subtopics.<h6> is the smallest heading and is rarely used.
✔ Use headings to structure content logically for screen readers.
✔ Avoid using headings for styling only (use CSS instead).
✔ Ensure clear and descriptive text in headings for better readability.
| Heading | Size | Common Use |
|---|---|---|
<h1> |
Largest | Main title of the page. |
<h2> |
Large | Major sections of content. |
<h3> |
Medium | Subsections under <h2>. |
<h4> |
Small | Further subdivisions. |
<h5> |
Smaller | Less important headings. |
<h6> |
Smallest | Rarely used for minor topics. |
✔ HTML provides six levels of headings (<h1> to <h6>).
✔ <h1> is the most important and should only be used once per page.