classement des balises

 

Flow content

  • a
  • abbr
  • address
  • area*
  • article
  • aside
  • audio
  • b
  • bdi
  • bdo
  • blockquote
  • br
  • button
  • canvas
  • cite
  • code
  • data
  • date
  • datalist
  • del
  • details
  • dfn
  • dialog
  • div
  • dl
  • em
  • embed
  • fieldset
  • figure
  • footer
  • form
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • header
  • hgroup
  • hr
  • i
  • iframe
  • img
  • input
  • ins
  • kbd
  • keygen
  • label
  • link*
  • main*
  • map
  • mark
  • math
  • menu
  • meta*
  • meter
  • nav
  • noscript
  • object
  • ol
  • output
  • p
  • picture
  • pre
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • section
  • select
  • slot
  • small
  • span
  • strong
  • sub
  • sup
  • svg
  • table
  • template
  • textarea
  • time
  • u
  • ul
  • var
  • video
  • wbr
  • autonomous custom elements
  • Text*

* Under certain circumstances (see prose).

Flow

Heading content

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • hgroup
Heading

Sectioning content

  • article
  • aside
  • nav
  • section
Sectioning

Metadata content

  • base
  • link
  • meta
  • noscript
  • script
  • style
  • template
  • title
Metadata

Interactive content

  • a*
  • audio*
  • button
  • details
  • embed
  • iframe
  • img*
  • input*
  • keygen
  • label
  • object*
  • select
  • textarea
  • video*

* Under certain circumstances.

Interactive

Phrasing content

  • a*
  • abbr
  • area*
  • audio
  • b
  • bdi
  • bdo
  • br
  • button
  • canvas
  • cite
  • code
  • data
  • date
  • datalist
  • del*
  • dfn
  • em
  • embed
  • i
  • iframe
  • img
  • input
  • ins*
  • kbd
  • keygen
  • label
  • link*
  • map*
  • mark
  • math
  • meta*
  • meter
  • noscript
  • object
  • output
  • picture
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • select
  • slot
  • small
  • span
  • strong
  • sub
  • sup
  • svg
  • template
  • textarea
  • time
  • u
  • var
  • video
  • wbr
  • autonomous custom elements
  • Text*

* Under certain circumstances; see prose.

Phrasing

Embedded content

  • audio
  • canvas
  • embed
  • iframe
  • img
  • math
  • object
  • picture
  • svg
  • video
Embedded

Comparer les deux écritures !


<body>
    <h1>top level heading</h1>
    <section>
        <h1>(intended) 2nd level heading</h1>
        <section>
            <h1>(intended) 3nd level heading</h1>
        </section>
    </section>
</body>

<body>
    <h1>top level heading</h1>
    <section>
        <h2>(intended) 2nd level heading</h2>
        <section>
            <h3>(intended) 3nd level heading</h3>
        </section>
    </section>
</body>

Les titres traduisent l'organisation du contenu d'une page Web ou d'un écran. Une bonne structure de titres permet de scanner rapidement un document Web et d'en comprendre la structure.

Les titres permettent également aux utilisateurs de lecteurs d'écran et autres utilisateurs de technologies d'assistance de naviguer dans les pages Web et les écrans.

Il existe encore une certaine confusion et une certaine ambiguïté quant à l'utilisation correcte des titres, notamment en matière d'accessibilité.

C'est un sujet délicat pour en savoir plus : https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/