Stats

228 Contributors: 13
2016-12-29
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook

Headings

Download html eBook

Introduction

HTML provides not only plain paragraph tags, but six separate header tags to indicate headings of various sizes and thicknesses. Enumerated as heading 1 through heading 6, heading 1 has the largest and thickest text while heading 6 is the smallest and thinnest, down to the paragraph level. This topic details proper usage of these tags.

Syntax

  • <h1>...</h1>
  • <h2>...</h2>
  • <h3>...</h3>
  • <h4>...</h4>
  • <h5>...</h5>
  • <h6>...</h6>

Remarks

  • An h1h6 element must have both a start tag and an end tag.1

  • h1h6 elements are block level elements by default (CSS style: display: block).2

  • h1h6 elements should not be confused with the section element

  • Heading tags (h1h6) are not related to the head tag.

  • Permitted Content: phrasing content

  • The different CSS-styles for headings differ usually in font-size and margin. The following CSS-settings for h1h6 elements can serve as an orientation (characterized as 'informative' by the W3C)

  • Search engine spiders (the code that adds a page to a search engine) automatically pays more attention to higher importance (h1 has most, h2 has less, h3 has even less, ...) headings to discern what a page is about.

Related Examples