Jerarquia de capçaleres en HTML5

Publicat el 27/08/2009

En HTML5 es consideren elements de capçalera els elements h1, h2, h3, h4, h5, h6 i hgroup. Aquest darrer element encara està en estat d'esborrany.

A efectes de jerarquia un element hgroup representa la capçalera d'una secció implícita o explícita (section) que conté una capçalera composta (i. e. subtítols, títols alternatius o lemes).

El primer element de capçalera d'una secció representa la capçalera d'aquesta. Les següents capçaleres del mateix nivell o superior impliquen una nova secció; les capçaleres de menor nivell impliquen noves subseccions part de la secció explícita o implícita ancessora més propera.

Els elements blockquote, body, figure i td tenen la particularitat de ser sectioning root; aquests elements encapsulen una jerarquia pròpia, independentment dels elements ancessors.

Exemple de seccions implícites:


<body>
  <h1>Foo</h1>
  <h2>Bar</h2>
  <h2>Bla</h2>
</body>

Exemple de seccions explícites:


<body>
  <h1>Foo</h1>
  <section>
    <h2>Bar</h2>
  </section>
  <section>
    <h2>Bla</h2>
  </section>
</body>

Els exemples anteriors reflexen la mateixa jerarquia, amb seccions implícites o amb seccions explícites. L'element body és una secció explícita.

En un exemple més complex, com el que proporciona l'especificació d'HTML5 es pot apreciar millor la complexitat de lectura i manteniment d'aquest sistema de jerarquia.


<body>
  <h1>Foo</h1>
  <h2>Bar</h2>
  <blockquote>
    <h3>Bla</h3>
  </blockquote>
  <p>Baz</p>
  <h2>Quux</h2>
  <section>
    <h3>Thud</h3>
  </section>
  <p>Grunt</p>
</body>

La jerarquia es pot descriure com:

La secció implícita "Bla" (l'element h3 fill de l'element blockquote) no és part d'aquesta jerarquia ja que aquest element inicia la seva pròpia jeraquia.

La descripció anterior afirma que el paràgraf "Grunt" és part de la secció explícita de tipus body. Això és degut a que la secció explícita "Thud" tanca la secció implícita "Quux".

Donat que una secció només pot contenir un element de capçalera els següents fragments són equivalents:


<body>
  <h1>Foo</h1>
  <section>
    <h2>Bar</h2>
  </section>
  <section>
    <h2>Bla</h2>
  </section>
</body>


<body>
  <h1>Foo</h1>
  <section>
    <h3>Bar</h3>
  </section>
  <section>
    <h2>Bla</h2>
  </section>
</body>


<body>
  <h1>Foo</h1>
  <section>
    <h1>Bar</h1>
  </section>
  <section>
    <h1>Bla</h1>
  </section>
</body>

Confusió asegurada. Tot i així l'especificació anima als desenvolupadors a usar sempre seccions explícites i capçaleres h1.

L'especificació il·lustra aquestes regles tan flexibles amb un parell d'exemples equivalents:


<body>
  <h4>Apples</h4>
  <p>Apples are fruit.</p>
  <section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <h6>Sweet</h6>
    <p>Red apples are sweeter than green ones.</p>
    <h1>Color</h1>
    <p>Apples come in various colors.</p>
  </section>
</body>


<body>
  <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <section>
      <h3>Sweet</h3>
      <p>Red apples are sweeter than green ones.</p>
    </section>
  </section>
  <section>
    <h2>Color</h2>
    <p>Apples come in various colors.</p>
  </section>
</body>

Seguint les regles es pot afegir un exemple equivalent:


<body>
  <h1>Apples</h1>
  <p>Apples are fruit.</p>
  <section>
    <h1>Taste</h1>
    <p>They taste lovely.</p>
    <section>
      <h1>Sweet</h1>
      <p>Red apples are sweeter than green ones.</p>
    </section>
  </section>
  <section>
    <h1>Color</h1>
    <p>Apples come in various colors.</p>
  </section>
</body>

Aquest és el resultat d'intentar permetre dos models d'expressió d'una jerarquia: l'explícit (com HTML 4.01) i l'implícit (com XHTML 2.0 o DML). Docbook permèt ambdós models però de forma alternativa, no mesclable.

Exemple de jerarquia explícita (HTML 4.01):


  <h1>Foo</h1>
  <h2>Bar</h2>
  <h2>Bla</h2>

Exemple de jerarquia implícita (DocBook o DML):


<title>Foo</title>
<section>
  <title>Bar</title>
</section>
<section>
  <title>Bla</title>
</section>

Recursos relacionats

Comentaris

Afegir un comentari