HTML Headings

HTML headings, defined using <h1> to <h6> tags, structure content on a web page by defining headings and subheadings. Here’s an example of an HTML heading:


<h1>This is a Heading 1</h1>
  • Headings are block-level elements, meaning they start on a new line and create a distinct block of content.
  • They have different default font sizes and weights to visually distinguish them from regular paragraphs.
  • HTML offers six heading levels, from <h1> (largest) to <h6> (smallest), each with decreasing importance and font sizes.
  • <h1> is typically used for the main title of a page or section, while <h2> to <h6> are used for subheadings and subsections.


<h1>Main Page Title</h1>
<h2>Section 1 Heading</h2>
<p>Paragraph text within section 1.</p>
<h3>Subsection 1.1 Heading</h3>
<p>More paragraph text.</p>
  • Information hierarchy: Headings create a clear structure and organization for the content, helping users understand the main topics and flow of information.
  • Readability: They break up text into visually distinct sections, making it easier to scan and read.
  • Accessibility: Screen readers and assistive technologies use headings to navigate and understand the content effectively.
  • SEO: Search engines use headings to understand the structure and topics of web pages, potentially influencing rankings.

Best Practices:

  • Use headings logically and consistently to create a clear content structure.
  • Use <h1> only once per page for the main title.
  • Use heading levels in order of importance (don’t skip levels).
  • Consider accessibility guidelines for heading usage.