h1 element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The h1 element represents a level 1 heading. Headings (from h1 to h6) are titles that define implied sections in the document and arrange its contents in a hierarchical structure.

When headings are combined with the section element the sections of a document are no longer implied but exactly defined. In such cases, the heading of a section should lead all other elements in it.

Examples

The next example shows a document with some headings creating a hierachical structure. Its representation, offers a clearer view of this fact and makes it easy to understand that "Works" and "Musical style" are subtitles (and subsections) for "Johann Sebastian Bach", and "Organ works", "Orchestral works" and "Vocal works" are subtitles of "Works".

<h1>Johann Sebastian Bach</h1>
<p>Johann Sebastian Bach was a german composer and musician of the Baroque period. He was born on March 31st, 1685...</p>
<h2>Works</h2>
<p>Among his most beautiful compositions you can find organ, orchestral and vocal pieces...</p>
<h3>Organ works</h3>
<p>Bach was best known during his lifetime as an organist, organ consultant, and composer of organ works in both the traditional german free genres and stricter forms...</p>
<h3>Orchestral works</h3>
<p>Bach wrote for single instruments, duets, and small ensembles. Many of his solo works are widely considered among the most profound works in the repertoire...</p>
<h3>Vocal works</h3>
<p>Although Bach performed cantatas by other composers, he composed at least three entire annual cycles of cantatas at Leipzig, in addition to those composed at Mühlhausen and Weimar...</p>
<h2>Musical style</h2>
<p>Bach's musical style arose from his skill in contrapuntal invention and motivic control, his flair for improvisation, his exposure to North and South German, Italian and French music, and his devotion to the Lutheran liturgy</p>

Johann Sebastian Bach

Johann Sebastian Bach was a german composer and musician of the Baroque period. He was born on March 31st, 1685...

Works

Among his most beautiful compositions you can find organ, orchestral and vocal pieces...

Organ works

Bach was best known during his lifetime as an organist, organ consultant, and composer of organ works in both the traditional german free genres and stricter forms...

Orchestral works

Bach wrote for single instruments, duets, and small ensembles. Many of his solo works are widely considered among the most profound works in the repertoire...

Vocal works

Although Bach performed cantatas by other composers, he composed at least three entire annual cycles of cantatas at Leipzig, in addition to those composed at Mühlhausen and Weimar...

Musical style

Bach's musical style arose from his skill in contrapuntal invention and motivic control, his flair for improvisation, his exposure to North and South German, Italian and French music, and his devotion to the Lutheran liturgy

In our second example, we'll make use of the section element with exactly the same structure used before. The semantic in the structure of this new document matches exactly the one in the previous example.

<body>
  <h1>Johann Sebastian Bach</h1>
  <p>Johann Sebastian Bach was a german composer and musician of the Baroque period. He was born on March 31st, 1685...</p>
  <section>
    <h2>Works</h2>
    <p>Among his most beautiful compositions you can find organ, orchestral and vocal pieces...</p>
    <section>
      <h3>Organ works</h3>
      <p>Bach was best known during his lifetime as an organist, organ consultant, and composer of organ works in both the traditional german free genres and stricter forms...</p>
    </section>
    <section>
      <h3>Orchestral works</h3>
      <p>Bach wrote for single instruments, duets, and small ensembles. Many of his solo works are widely considered among the most profound works in the repertoire...</p>
    </section>
    <section>
      <h3>Vocal works</h3>
      <p>Although Bach performed cantatas by other composers, he composed at least three entire annual cycles of cantatas at Leipzig, in addition to those composed at Mühlhausen and Weimar...</p>
    </section>
  </section>
  <section>
    <h2>Musical style</h2>
    <p>Bach's musical style arose from his skill in contrapuntal invention and motivic control, his flair for improvisation, his exposure to North and South German, Italian and French music, and his devotion to the Lutheran liturgy</p>
  </section>
</body>

Now, the sections are explicitly and unambiguosly defined, including the body section of the document.

Note that, in this outline, the headings of each section could be represented by an h1 heading, despite the level of the heading in the parent section. This is because the level 1 heading at the begining of a section element represents the main title in the scope of that particular section and not in the entire document.

Althoug the use of h1 headings as titles for sections is entirely possible and standard conformant, authors should be aware that, by default, legacy browsers will render all h1 elements with the same style.

Attributes

Specific attributes

align

The horizontal alignment of the heading. There are four possible values (case-insensitive):

  • left: heading is aligned to the left margin.
  • center: heading is centered.
  • right: heading is aligned to the right margin.
  • justify: heading is justified or aligned to both margins.

The use of this attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheets declarations.

Example

<h1 align="center">The truth is out there</h1>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.