HTML 5 Notes For Professional – Chapter – 3 (Headings)

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 the proper usage of these tags.

Using Headings

Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6> tags. Headings support all global attributes.

1. <h1> defines the most important heading.
2. <-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

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 shouldn’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>

Continue to Chapter 4: Paragraphs