HTML <h1> to <h6> Tags
Concept
The <h1> to <h6> tags in HTML are used for defining headings, with <h1> being the highest (or most important) level and <h6> the lowest. These tags help in structuring the content and making it accessible and SEO-friendly. They play a crucial role in helping both users and search engines understand the hierarchy and organization of the content.
Implementation
Example 1: Basic Headings
Here’s a simple example to show how these tags can be used to structure a document:
<h1>The Evolution of Programming Languages</h1>
<h2>Introduction</h2>
<h2>The First Generation</h2>
<h3>Assembly Language</h3>
<h3>FORTRAN</h3>
<h2>The Second Generation</h2>
<h3>C and C++</h3>
<h3>Java</h3>
<h4>Java Versions</h4>
<h4>Java Frameworks</h4>
<h2>Modern Languages</h2>
<h3>Python</h3>
<h3>JavaScript</h3>
<h4>Front-end Frameworks</h4>
<h5>React</h5>
<h5>Angular</h5>
<h4>Back-end Frameworks</h4>
<h5>Node.js</h5>
<h5>Express.js</h5>
<h2>Conclusion</h2>
Example 2: Headings with Classes
You can also add classes to style your headings:
<h1 class="title">Main Title</h1>
<h2 class="subtitle">Subtitle</h2>
Try it out below:
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
Attributes Table
| Attribute | Description |
|---|---|
class |
Specifies a classname for styling |
id |
Specifies a unique id for the element |
Global Attributes
All <h1> to <h6> tags support global attributes.
Event Attributes
All <h1> to <h6> tags support event attributes.
Browser Support Table
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | Yes |
Default CSS Settings
h1 { font-size: 2em; margin: 0.67em 0; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
/* ... and so on for h4, h5, h6 */
Conclusion
The <h1> to <h6> tags are not just cosmetic; they’re structural elements that help in content organization and SEO. They should be used thoughtfully to create a meaningful hierarchy in your web documents.
Whether you’re a beginner or a seasoned developer, understanding the importance of these tags is crucial for effective web development.
