HTML <h4> Tag
The <h4> tag in HTML is used to define a fourth-level heading. Headings are crucial for structuring content on a web page, making it easier for both users and search engines to understand the hierarchy and importance of different sections. The <h4> tag is smaller than <h1>, <h2>, and <h3> but larger than <h5> and <h6>. It is typically used for subheadings within sections already marked by higher-level headings.
Syntax
<h4 align="value">Content of the heading</h4>
Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left, right, center, justify | Specifies the alignment of the heading text. Note: This attribute is deprecated in HTML5, it's recommended to use CSS for styling. |
Example
<h4>This is a Level 4 Heading</h4>
More Examples
Basic Usage within a Structure
This example demonstrates how <h4> is used within a typical document structure:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Main Document Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Sub-subsection Title</h4>
<p>This is some content under the sub-subsection.</p>
<h4>Another Sub-subsection Title</h4>
<p>More content here.</p>
</body>
</html>
Using <h4> with Text Alignment (Deprecated)
Although deprecated, it's good to know how the align attribute works. Note: Do not use the align attribute in modern HTML. Use CSS instead.
<!DOCTYPE html>
<html>
<head>
<title>Deprecated Align Attribute</title>
<style>
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
</head>
<body>
<h4 class="left">Left-aligned Heading (CSS)</h4>
<h4 class="center">Center-aligned Heading (CSS)</h4>
<h4 class="right">Right-aligned Heading (CSS)</h4>
<h4 class="justify">Justified Heading (CSS) with some longer text to show the justification effect.</h4>
</body>
</html>
Using CSS for Styling <h4>
Here's how to style <h4> using CSS:
<!DOCTYPE html>
<html>
<head>
<title>Styling Example</title>
<style>
h4 {
color: #333; /* Dark gray color */
font-family: sans-serif;
border-bottom: 1px solid #eee; /* A subtle border */
padding-bottom: 5px;
}
h4.special {
color: #007bff;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h4>Styled Heading</h4>
<p>This is some content under the styled heading.</p>
<h4 class="special">Special Styled Heading</h4>
</body>
</html>
Browser Support
The <h4> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Use heading tags in a hierarchical order. Start with
<h1>for the most important heading and move down to<h6>. - Avoid skipping heading levels (e.g., going from
<h1>to<h3>). This can confuse both users and search engines. - Use headings to structure your content logically, making it easier to read and navigate.
- Always prefer CSS for text alignment and other styling instead of the
alignattribute which is deprecated. - Headings are important for SEO. They help search engines understand the content of your page.
- Keep heading text concise and relevant to the content.
- Don't overuse headings. Use them to break up text into logical sections.
- Make sure the heading level represents the hierarchy of information.
- Ensure that the visual style of headings aligns with your overall web design.
