HTML - Heading Content (Section Header) - Heading Elements (H1 to H6)

About

Heading define the structure / outline / table of content of the document (page)

They are defined via:

They implicitly create a new section of the document

In a letter, the heading is one sentence that explains the reason of the letter

Sequential Order

Because they defined the TOC, they should be in sequential order.

If this is not the case, the TOC will not have a hierarchical structure.

Any HTML analytics tool such Lighthouse will complain if this is not the case.

Html Heading Sequentiel Order

Example

Page Structure

  • Red Box: H1 - Title of the page / website
  • Blue Box: H2 - Title of the section
  • Green Box: H3 - Title of the subsection

Html Header

Composed with Subtitle in Header

Grouped with a header element

<header>
  <h1>My Title In the TOC</h1>
  <p>My Subtitle Line 1</p>
  <p>Editor’s Draft 9 May 2013</p>
</header>

Definition

Hn

The H(n) element applies a level-(n) heading syle to the contained text.

<h1>H1 - Generally the page title</h1>
<h2>H2 - Introduction</h2>
<h3>H3 - Prologue</h3>
<h4>H4 - Level-4 Heading</h4>
<h5>H5 - Level-5 Heading</h5>
<h6>H6 - Level-6 heading, smallest heading available</h6>

ARIA

Using role=“heading to an element causes an AT (like a screen reader) to treat it as though it were a heading.

Ref:

Styling

Numbering

You can add numbering to your heading via css. See heading numbering

Example:

  • The CSS with counter.
section { counter-increment: section; }
h1::before { content: "Chapter " counter(section,lower-alpha) ": \A"; }
  • The HTML
<section>
<h1>First</h1>
</section>
<section>
<h1>Second</h1>
</section>





Discover More
Headline Example
A heading is a short sentence that summarize a section of text

A heading is used in a lot of place and this articles regroups them in one
Browser
Browser - Document variable (DOM) - Javascript

In a browser, the document is: a DOM document (in-memory tree) of a XML document (generally a HTML dom document) The document is provided by the browser via its DOM webapi (Not by the Javascript...
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
Boxdim
CSS - Content (Property)

The content CSS property is used with: the ::before and ::after pseudo-elements to generate content respectively: before or after the content of an element. Visually, the content is located at...
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...
Content Venn
HTML - (Content of an element|Content Model)

The contents of an element are its children in the DOM tree. Each element has a content model: a description of the element's expected contents. HTML Authors must not use HTML elements anywhere except...
HTML - (Document) Outline

This article talks: the extraction of the outline from a HTML document in order to create a HTML Table of Content The outline also known as the table of content is a list of one or more potentially...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Document

An HTML document is a well-formed HTML string (ie that contains the html root element). web page The HTML textual representation can be stored: in a string in a file or in the body of an HTTP...
HTML - Header (element)

The header in html is an element which principal use is to group ancillary information around the top level heading (ie h1). It may (not required) contain the section's heading (an h1–h6 element...



Share this page:
Follow us:
Task Runner