REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<h2>

AI & DATA SCIENCE // h2-tag

The <h2> element represents a second-level heading, typically marking the major sections within a page under the single <h1>.

Syntax

<h1>Page Title</h1>
<h2>First Major Section</h2>
<h2>Second Major Section</h2>

Deep Dive Course

**`<h2>`** headings divide a page into its major sections — think of them as chapter titles under the page's overall `<h1>` title. A blog post's `<h1>` might be the article title, while each `<h2>` marks a major section within it (e.g. 'Introduction', 'How It Works', 'Conclusion'). Unlike `<h1>`, having multiple `<h2>` elements on one page is completely normal and expected — it's how you build out the page's structural outline.

1Understanding <h2>

`<h2>` headings divide a page into its major sections — think of them as chapter titles under the page's overall <h1> title. A blog post's <h1> might be the article title, while each <h2> marks a major section within it (e.g. 'Introduction', 'How It Works', 'Conclusion'). Unlike <h1>, having multiple <h2> elements on one page is completely normal and expected — it's how you build out the page's structural outline.

💡

Screen reader users frequently navigate a page by jumping heading-to-heading (a dedicated keyboard shortcut in most screen readers) — clear, descriptive <h2>s make this navigation genuinely usable, similar to a table of contents.

editor.html

<h1>How to Bake Bread</h1>
<h2>Ingredients</h2>
<p>...</p>
<h2>Instructions</h2>
<p>...</p>

localhost:3000

2Practical Example

Here is a real-world application of <h2> showing how it is used in production HTML.

editor.html

<!-- A blog post structured with clear h2 sections -->
<article>
  <h1>Understanding CSS Flexbox</h1>
  <h2>What is Flexbox?</h2>
  <h2>The Main Axis vs Cross Axis</h2>
  <h2>Common Use Cases</h2>
</article>

localhost:3000

3Best Practices

Follow these guidelines when working with <h2>:

1. Use <h2> for each major section under the page's single <h1>

2. Keep <h2> text descriptive of that section's content, not generic like 'Section 1'

3. Maintain a logical order — don't jump from <h2> to <h4>, use <h3> for subsections of an <h2> first

⚠️

Tip: Screen reader users frequently navigate a page by jumping heading-to-heading (a dedicated keyboard shortcut in most screen readers) — clear, descriptive <h2>s make this navigation genuinely usable, similar to a table of contents.

editor.html

<h1>How to Bake Bread</h1>
<h2>Ingredients</h2>
<p>...</p>
<h2>Instructions</h2>
<p>...</p>

localhost:3000

Examples

Example 01Basic Usage

<h1>How to Bake Bread</h1>
<h2>Ingredients</h2>
<p>...</p>
<h2>Instructions</h2>
<p>...</p>

Example 02Advanced Example

<!-- A blog post structured with clear h2 sections -->
<article>
  <h1>Understanding CSS Flexbox</h1>
  <h2>What is Flexbox?</h2>
  <h2>The Main Axis vs Cross Axis</h2>
  <h2>Common Use Cases</h2>
</article>

Best Practices

Use
for each major section under the page's single
Keep
text descriptive of that section's content, not generic like 'Section 1'
Maintain a logical order — don't jump from
to
, use
for subsections of an
first

Interview Question

How do <h2> elements contribute to a page's accessibility beyond just visual formatting?▼

Hint: Think about how a screen reader user can pull up a list of all headings on a page.

Most screen readers let users bring up a list of all headings on the page (essentially an auto-generated table of contents) and jump directly to any of them. Well-structured, descriptive <h2>s let a screen reader user quickly scan a page's major sections and jump straight to the one they need, without having to listen through all the content sequentially — exactly like a sighted user visually scanning bolded section titles.

Exercises

EasyPractice using <h2> in a real scenario.

View Solution

<h1>How to Bake Bread</h1>
<h2>Ingredients</h2>
<p>...</p>
<h2>Instructions</h2>
<p>...</p>

Frequently Asked Questions

How do <h2> elements contribute to a page's accessibility beyond just visual formatting?▼

Most screen readers let users bring up a list of all headings on the page (essentially an auto-generated table of contents) and jump directly to any of them. Well-structured, descriptive

s let a screen reader user quickly scan a page's major sections and jump straight to the one they need, without having to listen through all the content sequentially — exactly like a sighted user visually scanning bolded section titles.

Related Functions

h1-tagh3-tag