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[edit | edit source]
Remarks[edit | edit source]
h6element must have both a start tag and an end tag.1
h6elements are block level elements by default (CSS style:
h6elements should not be confused with the section element
- Heading tags (
h6) are not related to the
- Permitted Content: phrasing content
- The different CSS-styles for headings differ usually in
margin. The following CSS-settings for
h6elements 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.
Using Headings[edit | edit source]
Headings can be used to describe the topic they precede and they are defined with the
<h6> tags. Headings support all the global attributes.
<h1>defines the most important heading.
<h6>defines the least important heading.
Defining a heading:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Correct structure matters[edit | edit source]
Search engines and other user agents usually index page content based on heading elements, for example to create a table of contents, so using the correct structure for headings is important.
In general, an article should have one
h1 element for the main title followed by
h2 subtitles â going down a layer if necessary. If there are
h1 elements on a higher level they shoudn't be used to describe any lower level content.
Example document (extra intendation to illustrate hierarchy):
<h1>Main title</h1> <p>Introduction</p> <h2>Reasons</h2> <h3>Reason 1</h3> <p>Paragraph</p> <h3>Reason 2</h3> <p>Paragraph</p> <h2>In conclusion</h2> <p>Paragraph</p>