HTML Headings, represented by <h1> to <h6>, provide hierarchical structure to content. They range from most important (<h1>) to least (<h6>), aiding accessibility and SEO. Each conveys different levels of emphasis, guiding readers through the document's organization.
HTML provides six levels of heading elements, ranging from <h1> (highest level) to <h6> (lowest level).
Purpose and Usage of Heading Tags:
1. <h1> - Main Heading (Largest):
- Represents the primary topic of the page.
- Use it sparingly to maintain clarity.
2. <h2> - Subheadings:
- Ideal for dividing content into sections.
- If further subsections exist, employ
<h3>elements.
3. <h3> to <h6> - Smaller Headings:
- Gradually decrease in size.
- Use them for finer subdivisions.
Syntax:
// the 'h' inside the tag should be in small case only.
<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
.
<h6>Heading6</h6>
Why Do Headings are Important?
1. SEO Impact:
- Search engines index headings to understand content structure.
- Well-organized headings enhance visibility and ranking.
2. Highlighting Key Topics:
- Headings emphasize essential information.
- Readers quickly grasp the document’s structure.
Example: In this example illustrates the HTML heading tags.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<h3>This is heading h3</h3>
<h4>This is heading h4</h4>
<h5>This is heading h5</h5>
<h6>This is heading h6</h6>
</body>
</html>
Output:
Customization in HTML Heading Tags
The default size of HTML headings can be changed, using the style attribute.
Example: In this example explains the HTML heading tags by specifying the size of the font.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>H1 Heading</h1>
<!-- With the help of Style attribute you can customize
the size of the heading, As done below-->
<h1 style="font-size: 50px">H1 with new size.</h1>
<!-- Here font-size is the property by which we can
modify the heading. Here we kept it 50px i.e. 50 pixels -->
</body>
</html>
Output:
HTML Headings Example Output