HTML Tutorial: Complete HTML Tutorial
About Lesson

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:

Loading

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.