MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Us de seccions i esquemes en HTML 5

This translation is incomplete. Please help translate this article from English.

Important: Actualment no existeixen implementacions de l'algorisme d'esquema en els navegadors gràfics o agents d'usuari de tecnologia d'assistència, encara que l'algorisme s'executa a un altre programari, com comprobadors de conformitat. Per tant, l'algorisme d'esquema no pot ser invocat per transmetre l'estructura dels documents als usuaris. Es recomana als autors a utilitzar les capçaleres de rang (h1-h6) per transmetre l'estructura.

L'especificació HTML5 aporta diversos elements nous als desenvolupadors web que els permet descriure l'estructura d'un document web amb la semàntica estàndard. En aquest document es descriuen aquests elements i la forma d'utilitzar-los per definir el contorn desitjat per a qualsevol document.

Estructura de un document en HTML 4

L'estructura d'un document, és a dir, l'estructura semàntica del que està entre <body> i </body>, és fonamental per a la presentació de la pàgina a l'usuari. HTML 4 utilitza la noció de seccions i subseccions d'un document per a descriure la seva estructura. Una secció està definida per un element  (<div>) amb elements de capçalera (<h1>, <h2>, <h3>, <h4>, <h5> o <h6>) dins d'ella, definint el seu títol. Les relacions d'aquests elements dóna lloc a l'estructura del document i el seu contorn.

Així que el següent marcat:

<div class="section" id="forest-elephants" >
  <h1>Forest elephants</h1>
  <p>In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  <div class="subsection" id="forest-habitat" >
    <h2>Habitat</h2>
    <p>Forest elephants do not live in trees but among them.
     ...this subsection continues...
  </div>
</div>

condueix al següent esquema:

1. Forest elephants
   1.1 Habitat

Els elements <div> no són obligatoris per definir una nova secció. La mera presència d'un element capçalera és suficient perquè  impliqui una nova secció. Per tant aixó,

<h1>Forest elephants</h1>
  <p>In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  <h2>Habitat</h2>
  <p>Forest elephants do not live in trees but among them.
    ...this subsection continues...
  <h2>Diet</h2>
<h1>Mongolian gerbils</h1>

condueix al següent esquema:

1. Forest elephants
   1.1 Habitat
   1.2 Diet
2. Mongolian gerbils

Problemes resolts per HTML5

La definició d'HTML 4 de l'estructura d'un document i el seu algoritme d'esquematització implícit és molt perillos i condueix a nombrosos problemes:

  1. L'ús de <div> per definir seccions semàntiques, sense definir valors específics per als atributs class fa impossible l'automatització de l'algoritme d'esquema ( "És que <div> part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de <div>, unicament utilitzat per a l'estil? "). En altres termes, l'especificació HTML 4 és molt imprecisa en el que és una secció i com es defineix el seu àmbit. La generació automàtica dels esquemes és important, especialment per la tecnologia d'assistència, que és possible adaptar-la a la forma en què es presenta la informació als usuaris, d'acord a l'estructura del document. HTML5 elimina la necessitat d'elements <div> de l'algoritme d'esquema mitjançant la introducció d'un nou element, <section>, l'element  HTML Section.
  2. La fusió de diversos documents és difícil: la inclusió d'un sub-document en un document principal significa canviar el nivell de elements d'encapçalament HTML de manera que es mantigui l'esquema. Això es soluciona en HTML5 amb els elements de seccionament recentment introduïts (<article>, <section>, <nav> i <aside>), són sempre subseccions de la secció del seu ancestre més proper, independentment de quines seccions són creades per les capçaleres internes.
  3. En HTML 4, cada secció és part de l'esquema del document. Però els documents sovint no són tan lineals. Un document pot tenir seccions especials que contenen informació que no és part de, tot i que està relacionat amb el flux principal, com un bloc d'anunci o una caixa d'explicació. HTML 5 introdueix l'element <aside> que permet aquestes seccions per no ser part de l'esquema principal.
  4. Un cop més, en HTML 4, ja que cada secció és part de l'esquema del document, no hi ha manera de tenir seccions que continguin informació relacionada no amb el document, sinó a tot el lloc, com logotips, menús, taula de continguts, o la informació de copyright i avisos legals . Amb aquesta finalitat, HTML 5 introdueix tres nous elements: <nav> per a les col·leccions d'enllaços, com una taula de continguts, <footer> i <header> per obtenir informació relacionada amb el lloc. Recordeu que <header> i <footer> no seccionan el contingut com <section>, sinó que hi són per a marcar semànticament parts d'una secció.

De manera més general, HTML5 aporta precisió a les característiques de seccionament i encapçalament, permetent que l'esquema del document pogui ser predictible i utilitzat pel navegador per millorar l'experiència de l'usuari.

Algoritme d'esquema HTML5

Anem a considerar els algoritmes subjacents la forma en que HTML s'encarrega de les seccions i esquemes.

Definir seccions

Tot el contingut situat a l'interior de l'element <body> és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element <body>, els límits de secció es defineixen de manera explícita o implícita. Les seccions definides de forma explícita, són els continguts dins de les etiquetes <body><section><article><aside> i <nav>.

Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un <h1>. Veure Defining headings

Vegem un exemple - aquí tenim un document amb una secció de nivell superior i un peu de pàgina definit. Dins de la secció de nivell superior tenim tres subseccions, que es defineixen per dos elements <section> i un element <aside>:

<section>

  <h1>Forest elephants</h1> 

  <section>
    <h1>Introduction</h1>
    <p>In this section, we discuss the lesser known forest elephants.</p>
  </section>

  <section>
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them.</p>
  </section>

  <aside>
    <p>advertising block</p>
  </aside>

</section>

<footer>
  <p>(c) 2010 The Example company</p>
</footer>

Això ens porta al següent esquema::

1. Forest elephants
   1.1 Introduction
   1.2 Habitat

Definir encapçalaments

Mentre que els elements de seccionament HTML defineixen l'estructura del document, un esquema també necessita encapçalaments per ser útil. La regla bàsica és simple: el primer element d'encapçalament HTML (un de <h1>, <h2>, <h3>, <h4>, <h5>, <h6>)) defineix el encapçalament de la secció actual.

Els elements de capçalera tenen un rang donat pel nombre en el nom de l'element, on <h1> té el rang més alt, i <h6> té el rang més baix. Temes de classificació relativa només dins d'una secció; l'estructura de les seccions determina el esquema, no el rang d'encapçalament de les seccions. Per exemple, considereu aquest codi:

<section>
  <h1>Forest elephants</h1>    
  <p>In this section, we discuss the lesser known forest elephants. 
    ...this section continues...
  <section>
    <h2>Habitat</h2>  
    <p>Forest elephants do not live in trees but among them.
        ...this subsection continues...
  </section>
</section>
<section>
  <h3>Mongolian gerbils</h3>
  <p>In this section, we discuss the famous mongolian gerbils. 
     ...this section continues...
</section>

Aixó crea el següent esquema:

1. Forest elephants
   1.1 Habitat
2. Mongolian gerbils

Recordeu que el rang de l'element d'encapçalament (en l'exemple <h1> per a la primera secció de nivell superior, <h2> per a la subsecció i <h3> per a la segona secció de nivell superior) no és important. (Qualsevol rang es pot utilitzar com l'encapçalament d'una secció definida de manera explícita, encara que no es recomana aquesta pràctica.)

Seccionament implícit

A causa que el Seccionament d'elements HTML5 no són obligatoris per definir un esquema, per mantenir la compatibilitat amb la web existent, dominat per HTML 4, hi ha una manera de definir seccions sense ells. Això es diu seccionament implícit.

Els elements de capçalera (<h1> a <h6>) defineixen una nova secció implícita, quan no són el primer encapçalament de les seccions explícites dels seue pares. La forma implícita d'aquesta secció es posiciona en l'esquema que es defineix per la seu rang relatiu amb l'encapçalat anterior en la seva secció per a pares. Si es tracta d'un rang inferior al de l'encapçalat anterior, s'obre una subsecció de la secció implícita. Aquest codi:

<section>
  <h1>Forest elephants</h1>  
  <p>In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  <h3 class="implicit subsection">Habitat</h3>
  <p>Forest elephants do not live in trees but among them.
    ...this subsection continues...
</section>

condueix al següent esquema:

1. Forest elephants
   1.1 Habitat (implicitly defined by the h3 element)

Si es tracta del mateix rang que l'encapçalat anterior, es tanca la secció anterior (que pot haver estat explícit!) I s'obre una nova implícita en el mateix nivell: 

<section>
  <h1>Forest elephants</h1>  
  <p>In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  <h1 class="implicit section">Mongolian gerbils</h1>
  <p>Mongolian gerbils are cute little mammals.
    ...this section continues...
</section>

condueix al següent esquema:

1. Forest elephants
2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)

Si es tracta d'un rang més alt que l'encapçalat anterior, es tanca la secció anterior i s'obre una nova implícita en el nivell superior:

<body>
  <h1>Mammals</h1>
  <h2>Whales</h2>
  <p>In this section, we discuss the swimming whales.
    ...this section continues...
  <section>
    <h3>Forest elephants</h3>  
    <p>In this section, we discuss the lesser known forest elephants.
      ...this section continues...
    <h3>Mongolian gerbils</h3>
      <p>Hordes of gerbils have spread their range far beyond Mongolia.
         ...this subsection continues...
    <h2>Reptiles</h2>
      <p>Reptiles are animals with cold blood.
          ...this section continues...
  </section>
</body>

condueix al següent esquema:

1. Mammals
   1.1 Whales (implicitly defined by the h2 element)
   1.2 Forest elephants (explicitly defined by the section element)
   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)

Aquest no és l'esquema que es podria esperar fent una ullada ràpida a les etiquetes d'encapçalament. Per fer un marcat humà comprensible, és una bona pràctica utilitzar etiquetes explícites per a l'obertura i tancament de seccions, i per a que coincideixi amb el rang d'encapçalament a nivell de niament de secció previst. No obstant això, no és requerit per l'especificació HTML5. Si trobeu que els navegadors mostran el seu esquema de document de manera inesperada, comproveu si té seccions que es tanquen de manera implícita pels elements d'encapçalament.

Una excepció a la regla general és que el rang d'encapçalament ha de coincidir amb el nivell de niament de secció, és per a les seccions que poden ser reutilitzades en múltiples documents. Per exemple, una secció podria ser emmagatzemada en un sistema de gestió de continguts i muntada en documents en temps d'execució. En aquest cas, una bona pràctica és començar per <h1> per al nivell d'encapçalament superior de la secció reutilitzable. El nivell de niament de la secció reutilitzable serà determinat per la jerarquia de les seccions del document en què apareix. Les etiquetes de secció explícites són encara útils en aquest cas.

Arrels de seccionament

Una arrel de seccionament és un element HTML que pot tenir el seu propi esquema, però les seccions i encapçalaments en el seu interior no contribueixen a l'esquema del seu ancestre. Al costat de <body> que és l'arrel de seccionament lògica d'un document, aquests són sovint elements que introdueixen contingut extern a la pàgina: <blockquote>, <details>, <fieldset>, <figure> i <td>.

Exemple:

<section>
  <h1>Forest elephants</h1> 
  <section>
    <h2>Introduction</h2>
    <p>In this section, we discuss the lesser known forest elephants</p>
  </section>
  <section>
    <h2>Habitat</h2>
    <p>Forest elephants do not live in trees but among them. Let's
       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
    <blockquote>
       <h1>Borneo</h1>
       <p>The forest element lives in Borneo...</p>
    </blockquote>
  </section>
</section>

El resultat d'aquest exemple en el següent esquema:

1. Forest elephants
   1.1 Introduction
   1.2 Habitat

Aquest esquema no conté el esquema intern de l'element <blockquote>, que sent una citació externa, és una arrel de seccionament i aïlla el seu esquema intern.

Seccions fora de l'esquema

HTML 5 introdueix dos nous elements que permeten definir seccions que no pertanyen el esquema principal d'un document web:

  1. L'element de secció HTML Aside (<aside>) defineix una secció que, encara que es relaciona amb l'element principal, no pertany al corrent principal, com un quadre d'explicació o un anunci. Té el seu propi esquema, però no pertany a la principal.
  2. L'element de secció HTML de navegació (<nav>) defineix una secció que conté enllaços de navegació. Pot haver-hi diversos d'ells en un document, per exemple, una pàgina amb enllaços interns com una taula de continguts, i un altre amb el lloc d'enllaços de navegació. Aquests enllaços no són part del flux principal del document i esquema, i en general no són mostrats inicialment pels lectors de pantalla i tecnologies de suport similars.

Encapçalats i peus de pàgina

HTML5 també introdueix dos nous elements que es poden utilitzar per marcar la capçalera i el peu de pàgina d'una secció:

  1. L'element Header HTML (<header>) defineix una capçalera de la pàgina - en general conté el logotip i el nom del lloc i, possiblement, un menú horitzontal - o encapçalament de secció, que potser conté la capçalera de la secció, el nom de l'autor, etc.. <article>, <section>, <aside> i <nav> poden tenir la seva pròpia <header>. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.
  2. L'element Footer HTML (<footer>) defineix un peu de pàgina - en general conté el dret d'autor i avisos legals i, de vegades alguns enllaços - o secció de peu de pàgina, que potser conté la data de publicació de la secció, la informació de llicència, etc. <article>, <section>, <aside> i <nav> poden tenir el seu pròpi <footer>. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.

Aquests no creen noves seccions en l'esquema, més aviat, marcan el contingut dins de les seccions de la pàgina.

Adreces en elements de seccionament

L'autor d'un document, sovint, vol publicar alguna informació de contacte, com el nom i l'adreça de l'autor. HTML 4 permet això a través de l'element <address>, que s'ha ampliat en HTML5.

Un document pot estar fet de diferentes seccions per diferents autors. Una secció d'un altre autor, que el de la pàgina principal, es defineix mitjançant l'element <article>. En conseqüència, l'element <address> està enllaçat al seu més proper ancestre <body> o <article>.

Usar elements HTML5 en navegadors no HTML5

Els elements de seccions i capçaleres han de treballar en la majoria dels navegadors no HTML5. Tot i que no són compatibles, no necessiten una interfície especial DOM i només necessiten un estil CSS específic com a elements desconeguts, que son, se'ls dóna estil amb display:inline per defecte:

section, article, aside, footer, header, nav, hgroup {
  display:block;
}

Per descomptat, el desenvolupador web els pot donar estil de manera diferent però tinguen en compte que en un navegador no HTML5, l'estil per defecte és diferent del que s'espera per a aquest tipus d'elements. També tingueu en compte que l'element <time> no s'ha inclòs, ja que l'estil predeterminat per a ell en un navegador no HTML 5 és el mateix que en un amb HTML5 compatible.

Aquest mètode té les seves limitacions,  ja que alguns navegadors no permeten un estil d'elements no compatibles. Aquest és el cas d'Internet Explorer (versió 8 i anteriors), que necessiten un script específic per permetre això:

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
<![endif]-->

Aquest script significa que, en el cas d'Internet Explorer (8 i anteriors), el script ha d'estar habilitat per tal de mostrar els elements de seccionament HTML5 i de capçaleres correctament. Si no és així, no es mostraran, la qual cosa pot ser problemàtic, ja que aquests elements són propensos a definir l'estructura de la pàgina sencera. És per això que un element explícit <noscript> ha de ser afegit per a aquest cas:

<noscript>
   <strong>Warning !</strong>
   Because your browser does not support HTML5, some elements are simulated using JScript.
   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
</noscript>

Això ens porta al següent codi per permetre el suport dels elements de seccions HTML5 i capçaleres en els navegadors no HTML5, fins i tot per a Internet Explorer (8 i anteiors), amb un retorn adequat per al cas en què aquest últim navegador estigui configurat per no utilitzar scripts:

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
  <noscript>
     <strong>Warning !</strong>
     Because your browser does not support HTML5, some elements are created using JavaScript.
     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
  </noscript>
<![endif]-->

Conclusió

Els nous elements semàntics introduïts en HTML5 tene la capacitat de descriure l'estructura i l'esquema d'un document web d'una manera estàndard. Aporten una gran avantatge per a les persones que tenen navegadors HTML5 i que necessitan l'estructura per ajudar-los a entendre la pàgina, per exemple les persones que necessiten l'ajuda d'una mica de tecnologia d'assistència. Aquests nous elements semàntics són senzills d'usar i, amb molt poques càrregues, es poden fer funcionar també en els navegadors no HTML5. Per tant han de ser utilitzats sense restriccions.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,