HTML <h5> Tag
The <h5> tag in HTML represents a fifth-level heading. It is used to create subheadings within sections of a webpage, further organizing and structuring content beneath the <h1>, <h2>, <h3>, and <h4> tags. Headings are crucial for both user experience and search engine optimization (SEO) as they help define the structure and hierarchy of your content.
Syntax
<h5>Heading text here</h5>
Attributes
The <h5> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|———–|——–|————-|
| class | classnames | Specifies one or more classnames for an element (often used to point to a class in a style sheet) |
| id | id | Specifies a unique ID for an element |
| style | CSS properties | Specifies an inline CSS style for an element |
| title | text | Specifies extra information about an element |
| lang | language_code | Specifies the language of the element's content |
| tabindex | number | Specifies the tab order of an element |
| accesskey | character | Specifies a keyboard shortcut to access an element |
| data-* | value | Used to store custom data private to the page or application |
Example
<!DOCTYPE html>
<html>
<head>
<title>Example of h5 Tag</title>
</head>
<body>
<h1>Main Article Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h4>Sub-subsection 1.1.1</h4>
<h5>Sub-sub-subsection 1.1.1.1</h5>
<p>This is some content under the fifth level heading.</p>
</body>
</html>
More Examples
Example 1: Using id for anchor links:
<!DOCTYPE html>
<html>
<head>
<title>h5 with anchor links</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Section 1</h2>
<a href="#subpoint1">Jump to Sub-subsection 1.1.1.1</a>
<h3>Subsection 1.1</h3>
<h4>Sub-subsection 1.1.1</h4>
<h5 id="subpoint1">Sub-sub-subsection 1.1.1.1</h5>
<p>This is some content related to subpoint 1.</p>
</body>
</html>
In this example, using an id makes it easy to link directly to specific parts of your page.
Example 2: Styling h5 using CSS classes:
<!DOCTYPE html>
<html>
<head>
<title>Styling h5 tag with CSS</title>
<style>
.my-h5-style {
color: navy;
font-style: italic;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h4>Sub-subsection 1.1.1</h4>
<h5 class="my-h5-style">Styled fifth level heading</h5>
<p>This is some text under styled h5</p>
</body>
</html>
Here, the h5 tag has a custom style applied using CSS.
Example 3: Using data-* attributes:
<!DOCTYPE html>
<html>
<head>
<title>h5 tag with data-* attribute</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h4>Sub-subsection 1.1.1</h4>
<h5 data-info="This is a sub-heading info">Sub-sub-subsection 1.1.1.1</h5>
<p>This is some related paragraph content.</p>
<script>
const heading = document.querySelector('h5');
console.log(heading.dataset.info);
</script>
</body>
</html>
This example shows how custom data attributes can be used. The data can be accessed via javascript.
Browser Support
The <h5> tag is supported by all modern browsers.
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Use
<h5>to maintain a clear hierarchy in your content structure. - Don't skip heading levels. Start with
<h1>, then proceed to<h2>, then<h3>and so on. This will maintain proper structure and good SEO practice. - Use CSS to control the visual appearance of your headings.
- Avoid using heading tags purely for styling purposes; use them for logical structure.
- Be consistent with the hierarchy throughout your webpage.
- Use appropriate headings to improve your website accessibility for screen readers.
- When nesting headings, ensure that the heading levels are consistent with their logical place in the document's structure.
- The
h5tag is most commonly used for minor headings within complex or detailed sections of a webpage.
