HTML <h2> Tag

The <h2> tag is used to define a second-level heading in HTML. It's crucial for structuring your content, creating a clear hierarchy, and improving both user experience and search engine optimization (SEO). The <h2> tag typically introduces a subsection within a larger section defined by an <h1> tag, helping readers and search engines understand the organization and importance of different parts of your webpage.

Syntax

<h2 align="alignment" class="classname" dir="direction" id="id_name" lang="language" style="style_rules" title="tooltip_text">
  Heading text
</h2>

Attributes

Example

<h2>This is a Second Level Heading</h2>

More Examples

Basic Usage with id and class

 <h1 id="main-title">Main Article Title</h1>
 <h2 class="subheading" id="section1">Introduction</h2>
 <p>This is the introduction of the article...</p>
 <h2 class="subheading" id="section2">Main Content</h2>
 <p>The article continues here...</p>

Explanation: This example demonstrates how to use id to provide unique identifiers for the h2 tags which can be linked to directly from within the document. It also demonstrates how to provide a class name to be used in external CSS.

Using style attribute

 <h2 style="color:blue; font-size: 20px;">Styled Heading</h2>

Explanation: This shows how to directly style the heading tag using the style attribute.

Text Direction and Tooltip

 <h2 dir="rtl" title="This is a right to left subheading.">Right-to-Left Heading</h2>

Explanation: This demonstrates usage of dir and title attributes.

Semantic HTML and Hierarchy

 <h1>My Blog Post</h1>
  <article>
   <h2>First Section</h2>
      <p>This is the content of the first section</p>
   <h2>Second Section</h2>
      <p>This is the content of the second section</p>
      <section>
          <h3>Subsection 1</h3>
            <p>Content in subsection 1</p>
      </section>
  </article>

Explanation: This example demonstrates the importance of using headings semantically. h1 as the main title and h2 as section headings followed by paragraphs of content. The example also shows how to structure the content by including h3 as a subsection inside the h2 section with help of section element.

Browser Support

The <h2> tag is supported by all major browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Hierarchy: Use <h2> tags to indicate subsections of your content. They should follow <h1> tags in terms of hierarchical importance.
• SEO: Headings play a significant role in SEO. Proper heading usage makes it easier for search engines to understand the structure and content of your webpage. Use keywords relevant to the section's content.
• Accessibility: Proper heading structure improves accessibility for users who rely on screen readers.
• CSS: Avoid using the deprecated align attribute. Instead, use CSS for styling and alignment of your headings.
• Consistency: Maintain a consistent heading structure throughout your website for a better user experience. Don't skip heading levels (e.g., going directly from an <h1> to an <h3>).
• Content: Keep heading text concise and descriptive of the section's content.
• Semantic Meaning: Use headings to create a meaningful structure of your web content and don't use headings for pure styling purposes.
• Number of Headings: Avoid overusing headings within the content. Too many headings can negatively affect the reading experience.