HTML <h6> Tag
The <h6> tag represents the sixth and lowest level heading in HTML. It is used to structure content by indicating a heading of the least importance compared to <h1> to <h5>. While less commonly used than higher-level headings, the <h6> tag can be useful for very granular content organization.
Syntax
<h6 align="left|center|right|justify" style="styles" class="classes" id="elementID">Heading text</h6>
Attributes
| Attribute | Value | Description |
|---|---|---|
align |
left, center, right, justify |
Specifies the alignment of the heading text. Note: This attribute is deprecated in HTML5. Use CSS instead. |
class |
class names | Specifies one or more class names for the element, often used with CSS. |
id |
element id | Specifies a unique id for the element, often used by CSS or JavaScript |
style |
CSS styles | Adds inline styles to the heading (e.g., style="color:red;") |
Example
<h6>This is a level 6 heading</h6>
More Examples
Basic Usage
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Sub Section Heading</h4>
<h5>Minor Heading</h5>
<h6>Very Minor Heading</h6>
This example shows how headings can be nested to provide a clear document structure. In this case, the
tag is the lowest on the hierarchy.
Styling with CSS
<h6 style="color: blue; font-style: italic;">A styled level 6 heading</h6>
<h6 style="color: blue; font-style: italic;">A styled level 6 heading</h6>
Here, inline CSS is used to change the color and style of the <h6> tag.
Applying a Class Name
<h6 class="small-heading">A level 6 heading with a class</h6>
You can add class to add styles using CSS
<style>
.small-heading{
font-size: 0.9em;
}
</style>
Using an ID
<h6 id="minor-details">Details here</h6>
<a href="#minor-details">Go to Details</a>
This code shows the usage of id to scroll to this heading using an anchor tag.
Practical Example – Nested Content
<!DOCTYPE html>
<html>
<head>
<title>Example with h6</title>
</head>
<body>
<h1>Main Document Title</h1>
<section>
<h2>Section 1</h2>
<article>
<h3>Article 1</h3>
<p>Some Content Here ...</p>
<h4>Subtopic 1</h4>
<p>More content...</p>
<h5>Further Details</h5>
<h6>Very specific detail</h6>
<p>Detail explanation...</p>
</article>
</section>
</body>
</html>
This example shows a real-world scenario where the <h6> tag is used for a highly specific detail within an article. This demonstrates how headings create a clear hierarchy of information.
Browser Support
The <h6> tag is supported by all modern browsers.
| Browser | Version |
|---|---|
| Chrome | All |
| Edge | All |
| Firefox | All |
| Safari | All |
| Opera | All |
Notes and Tips
- Semantic Structure: Use
<h6>to structure your content, creating logical hierarchy in your document. - Visual Styling: Use CSS to control the visual appearance of your headings, including font size, color, and margins rather than using the
alignattribute. - Accessibility: Proper heading structure improves accessibility for screen readers and helps users navigate content.
- SEO: Headings are important for SEO. Search engines use headings to understand the structure and topic of your content. While
<h6>has less weight, it is still beneficial when used correctly. - Avoid skipping heading levels: Don't skip heading levels (e.g., going directly from
<h2>to<h4>). Maintain a logical flow like in examples. - Content Over Styling: Avoid using
<h6>just to make text appear smaller. Instead use CSS and use the tag where you want to mark a minor heading.
By understanding and correctly using the <h6> tag, you can enhance both the structure and the clarity of your web content.
