HTM-000080 | The Element
- Any document starts with a heading. You can use different sizes for your headings.
- HTML has six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>,
and<h6>
. While displaying any heading, browser adds one line before and one line after that heading.
- In total, there are six heading levels to choose from—
<h1>
to<h6>
—to add structure to the web page.
<h1>
is the highest heading level (and, by default, the largest in terms of font size) and<h6>
the lowest (and smallest).
- A document’s first heading should be an
<h1>
, followed by one or more<h2>
headings; each of these<h2>
headings can then have a further series of<h3>
headings below them, and so on, right on down to heading level 6<h6>
.
- The HTML 4 spec states that heading levels should not be skipped (that is, you shouldn’t have a series of headings in the order
<h1>,<h2>, <h2>, <h4>,
which skips the<h3>
entirely), although it isn’t always possible to guarantee such rigidity in the markup, particularly if your pages are generated by a CMS. However, this goal is certainly one for which you should aim.
- Headings add semantic richness to a document, which can help with search engines’ understanding of the makeup of that document, and provide users of assistance devices (such as screen readers) with an additional—and quick—method by which to navigate through a document: they can skip from heading to heading.
- Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
- Avoid skipping heading levels: always start from
<h1>
, next use<h2>
and so on
- With the
<section>
element, you should consider avoiding using<h1>
more than once on a page; by convention and for accessibility, it’s used for the page’s displayed title, with all headings below starting with<h2>
.
- When using sections, you should use one <h1> per section.
Click here to view the example.
{post_title}
{post_content}
{associated_insight_resource.post_title}
{associated_insight_resource.resource_link}
{associated_insight_resource.insight_type }