HTML <h3> Tag
The <h3> tag defines a third-level heading in HTML documents. Headings are crucial for structuring content, providing a clear hierarchy, and improving both user experience and search engine optimization (SEO). The <h3> tag is typically used for sub-sections within sections defined by <h2> tags or for less prominent headings.
Syntax
<h3 align="left|right|center|justify">Heading text</h3>
Attributes
| Attribute | Value | Description |
|---|---|---|
align |
left |
Aligns the heading text to the left. |
right |
Aligns the heading text to the right. | |
center |
Aligns the heading text to the center. | |
justify |
Justifies the heading text. | |
class |
classnames | Specifies one or more class names for the element, often used with CSS. |
id |
unique_id | Specifies a unique ID for the element. |
style |
CSS_properties | Specifies inline CSS styling for the element. |
title |
text | Specifies extra information about the element. |
Note: The align attribute is deprecated in HTML5 and should be replaced with CSS properties.
Example
<h3>This is a Level 3 Heading</h3>
More Examples
Basic Structure with <h1>, <h2>, and <h3>
<!DOCTYPE html>
<html>
<head>
<title>Heading Hierarchy Example</title>
</head>
<body>
<h1>Main Title of the Page</h1>
<h2>Section Title</h2>
<h3>Sub-section 1</h3>
<p>Content for sub-section 1.</p>
<h3>Sub-section 2</h3>
<p>Content for sub-section 2.</p>
<h2>Another Section Title</h2>
<h3>Sub-section 3</h3>
<p>Content for sub-section 3.</p>
</body>
</html>
Using CSS for Alignment
<!DOCTYPE html>
<html>
<head>
<title>Styled Headings</title>
<style>
.center-heading {
text-align: center;
}
.right-heading {
text-align: right;
}
</style>
</head>
<body>
<h3 class="center-heading">Centered Heading</h3>
<h3 style="text-align:left;">Left aligned Heading</h3>
<h3 class="right-heading">Right aligned Heading</h3>
</body>
</html>
Using ID and Styling
<!DOCTYPE html>
<html>
<head>
<title>Styled Headings</title>
<style>
#unique-heading {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h3 id="unique-heading">Stylized Heading with ID</h3>
<h3>Another Heading</h3>
</body>
</html>
Heading with Title Attribute
<!DOCTYPE html>
<html>
<head>
<title>Heading with Title</title>
</head>
<body>
<h3 title="Additional information about this heading">Heading with title</h3>
</body>
</html>
Browser Support
The <h3> tag is supported in all major browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Use headings in a proper hierarchical order. Start with
<h1>for the most important heading and continue with<h2>,<h3>, etc. - Do not skip heading levels (e.g., jump from
<h1>to<h3>). This can confuse both users and search engines. - Use headings to provide a clear structure to your content, making it easier to scan and understand.
- Avoid using headings solely for styling purposes. Use CSS for visual adjustments.
- For accessibility, ensure that headings are descriptive and provide context about the content they introduce.
- The
alignattribute is deprecated. Use CSStext-alignproperty for alignment purposes. - Always prefer using meaningful class or id names that describes the purpose or content instead of a random name.
- The
titleattribute provides a tooltip when you hover over the<h3>element. Use this for additional context if necessary.
