HTML Headings

HTML headings are essential for structuring and organizing content on a webpage. They provide a hierarchy for the text, indicating the importance of each section. In HTML, headings are defined using <h1> to <h6> tags, where <h1> represents the highest level of heading and <h6> the lowest.

Let’s break down the tutorial step by step:

Basic Structure:

  • HTML headings are enclosed in the opening <h1> and closing </h1> tags.
  • The content you want as a heading goes between these tags.


<h1>This is a Level 1 Heading</h1>

Heading Levels:

  • HTML provides six heading levels: <h1> to <h6>.
  • <h1> is the highest, and <h6> is the lowest.


<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>

Nesting Headings:

  • Headings can be nested inside other elements to create subheadings.
  • Proper indentation helps in maintaining clarity.


<h3>Main Heading</h3>
<p>This is some text under the main heading.</p>
<p>This text is nested under the subheading.</p>

Semantic Meaning:

  • Choose heading levels based on the semantic meaning of your content.
  • Use higher-level headings for main sections and lower levels for subsections.


<h1>Main Title</h1>
<p>This is the introduction.</p>
<h2>Subsection 1</h2>
<p>Content of subsection 1.</p>
<h2>Subsection 2</h2>
<p>Content of subsection 2.</p>

Styling with CSS:

  • Apply CSS styles to headings for visual consistency.
  • Customize fonts, colors, and sizes to match your webpage’s design.


   h1 {
      color: #3498db;
      font-family: 'Arial', sans-serif;
   h2 {
      color: #2ecc71;
      font-size: 1.2em;
<h1>Styled Heading 1</h1>
<h2>Styled Heading 2</h2>


  • Ensure your headings are accessible by using them in a logical order.
  • Screen readers rely on heading structure to navigate content.


<h1>Accessibility Example</h1>
<p>Main content of the page.</p>
<h2>Section 1</h2>
<p>Content of section 1.</p>
<h2>Section 2</h2>
<p>Content of section 2.</p>

By following these steps, you can effectively use HTML headings to structure your content, make it semantically meaningful, and enhance the accessibility and visual appeal of your web pages.