From cb9e359a51c3249d8f5157db69d43fd413ddeda6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:12 +0100 Subject: unslug ca: move --- .../index.html" | 186 ----------- .../us_de_seccions_i_esquemes_en_html/index.html | 341 --------------------- .../using_html_sections_and_outlines/index.html | 341 +++++++++++++++++++++ 3 files changed, 341 insertions(+), 527 deletions(-) delete mode 100644 "files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" delete mode 100644 files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html create mode 100644 files/ca/web/guide/html/using_html_sections_and_outlines/index.html (limited to 'files/ca/web/guide/html') diff --git "a/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" "b/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" deleted file mode 100644 index 6c683a8156..0000000000 --- "a/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Consells per crear pàgines HTML de càrrega ràpida -slug: Web/Guide/HTML/_Consells_per_crear_pàgines_HTML_de_càrrega_ràpida -tags: - - Advanced - - Guide - - HTML - - NeedsUpdate - - Performance - - Web -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

Aquests consells es basen en el coneixement i l'experimentació comuna.

- -

Una pàgina web optimitzada no només preveu un lloc més sensible per als seus visitants, sinó que també redueix la càrrega dels servidors web i la connexió a Internet. Això pot ser crucial per als llocs d'alt volum o dels llocs que tenen un pic en el tràfic a causa de circumstàncies inusuals, com ara notícies d'última hora.

- -

Optimitzar el rendiment de càrrega de pàgina no és només per a contingut que serà vist pels visitants de dispositius telefònics o mòbils de banda estreta. És igual d'important que el contingut en banda ampla i pot conduir a millores espectaculars fins i tot per als seus visitants amb les connexions més ràpides.

- -

Consells

- -

Reduir el pes de la pàgina

- -

El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.

- -

La reducció del pes de la pàgina a través de l'eliminació d'espais en blanc i comentaris innecessaris, comunament coneguda com la reducció al mínim, i movent el script en línia i CSS en arxius externs, pot millorar el rendiment de descàrrega amb una necessitat mínima d'altres canvis en l'estructura de la pàgina.

- -

Eines com ara HTML Tidy pot treure automàticament espais en blanc i les línies en blanc addicionals del codi HTML vàlid. Altres eines poden "comprimir" JavaScript canviant el format o per ofuscació de la font i la substitució dels identificadors llargs amb versions més curtes.

- -

Reduir al mínim el nombre d'arxius

- -

La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions HTTP necessaries per descarregar una pàgina.

- -

Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició If-Modified-Since al servidor web per a cada arxiu CSS, JavaScript o imatge, preguntant si l'arxiu ha estat modificat des de l'última vegada que es va descarregar.

- -

En reduir el nombre d'arxius que es fa referència en una pàgina web, es redueix el temps necessari perquè aquestes peticions siguin enviades, i per les respostes que es rebin.

- -

Si utilitzeu moltes imatges de fons en el vostre CSS, es pot reduir la quantitat de cerques HTTP necessaries mitjançant la combinació de les imatges en una, conegut com un sprite d'imatge. A continuació, només s'aplica la mateixa imatge cada vegada que ho necessiteu per a un fons, i ajustant les coordenades x/y de manera apropiada. Aquesta tècnica funciona millor amb els elements que tenen dimensions limitades, i no funcionarà per a cada ús d'una imatge de fons. No obstant això, el menor nombre de peticions HTTP i l'emmagatzematge en memòria cau d'una sola imatge pot ajudar a reduir el temps pageload.

- -

L'excés de temps dedicat a la consulta de l'última modificació dels arxius de referència pot retardar la visualització inicial d'una pàgina web, ja que el navegador ha de comprovar el temps de modificació per a cada arxiu CSS o JavaScript, abans de processar la pàgina.

- -

Reduir la recerca de dominis

- -

Atès que cada domini per separat porta temps en la recerca de DNS, el temps de càrrega de la pàgina creixerà juntament amb el nombre de dominis independents que apareguin en link(s) CSS i src(es) JavaScript i imatge.

- -

Això no sempre és pràctic; no obstant això, sempre s'ha de tenir en compte d'utilitzar només el nombre mínim necessari dels diferents dominis en les vostres pàgines.

- -

Contingut reutilitzat en memòria cau

- -

Assegureu-vos que qualsevol contingut que es pugui emmagatzemar en memòria cau, s'emmagatzemi en memòria cau, i amb els temps de caducitat apropiades.

- -

En concret, presteu atenció a la capçalera Last-Modified. Permet d'una manera eficient l'emmagatzematge en memòria cau de la pàgina; per mitjà d'aquesta capçalera, la informació es transmet a l'agent d'usuari sobre l'arxiu que vol carregar, com quan es va modificar per última vegada. La majoria dels servidors web afegeixen automàticament la capçalera Last-Modified a pàgines estàtiques (per exemple .html, .css), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, .php, .aspx), això, per descomptat, no es pot fer, i la capçalera no s'envia.

- -

Així, en particular, per a les pàgines que es generen de forma dinàmica, una mica de recerca sobre aquest tema és beneficiós. Pot ser una mica complicat, però s'estalviarà molt en les sol·licituds de pàgina en les pàgines que normalment no serien emmagatzemades en memòria cau.

- -

Més informació:

- -
    -
  1. HTTP Conditional Get for RSS Hackers
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. HTTP ETag on Wikipedia
    4. -
  4. Caching in HTTP
    5. -
- -

Ordenar de manera òptima els components de la pàgina

- -

Descarregar el contingut de la pàgina en primer lloc, juntament amb qualsevol CSS o JavaScript que pugui ser necessàri per a la seva visualització inicial, de manera que l'usuari obté una resposta aparent més ràpida durant la càrrega de les pàgines. Aquest contingut és normalment de text, i per tant pot beneficiar-se de la compressió del text en trànsit, proporcionant així una resposta fins i tot més ràpida per a l'usuari.

- -

Cap característica dinàmica que requereixi la pàgina per completar la càrrega abans de ser utilitzada, ha de ser desactivada inicialment, i només es permet després que la pàgina s'hagi carregat. Això farà que el JavaScript es carregui després del contingut de la pàgina, el que millorarà l'aspecte general de la càrrega de la pàgina.

- -

Reduir el nombre de scripts en línia

- -

Els scripts en línia poden ser costosos per a la càrrega de la pàgina, ja que l'analitzador ha d'assumir que un script en línia podria modificar l'estructura de la pàgina, mentre que l'anàlisi està en curs. Reduir l'ús de scripts en línia en general, i reduir l'ús de document.write() per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'AJAX per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en document.write().

- -

Utilitzar CSS modern i marcat vàlid

- -

L'ús de CSS modern redueix la quantitat de marcat, pot reduir la necessitat d'imatges (spacer), en termes de disseny, i molt sovint pot substituir les imatges de text estilitzat - el "cost" és molt més que l'equivalent de text-i-CSS.

- -

L'ùs del marcat vàlid té altres avantatges. En primer lloc, els navegadors no tenen necessitat de dur a terme la correcció d'errors a l'analitzar el codi HTML (això és, a part de la qüestió filosòfica, de si s'ha de permetre la variació de format a l'entrada de l'usuari, i després mitjançant programació "corregir" o normalitzar aquest o si, en canvi, fer complir un estricte format d'entrada, no tolerància).

- -

D'altra banda, el marcat vàlid permet el lliure ús d'altres eines les quals poden pre-processar les vostres pàgines web. Per exemple, HTML Tidy pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.

- -

Part del teu contingut

- -

Les taules de dissenys són un mètode llegat que no ha de ser utilitzat més. Dissenys que utilitzen blocs {{HTMLElement ("div")}}, i en un futur pròxim, CSS3 Multi-column Layout o CSS3 Flexible Box Layout, s'han d'utilitzar al seu lloc.

- -

Les taules encara es consideren marcat vàlid, però han de ser utilitzades per a la visualització de dades tabulars. Per ajudar al navegador a processar la vostre pàgina més ràpidament, heu d'evitar niar les vostres taules.

- -

En lloc de niar profundament les taules com en:

- -
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
- -

utilitzar taules no niats o divs com a:

- -
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-
- -

Veure: CSS3 Multi-column Layout Spec i CSS3 Flexible Box Layout

- -

Minimitzar i comprimir recursos SVG

- -

SVG produït per la majoria de les aplicacions de dibuix, sovint conté metadades innecessaries que es poden treure. Configureu els servidors per aplicar la compressió gzip per als recursos SVG.

- -

Especificar les mides de les imatges i taules

- -

Si el navegador pot determinar immediatament l'altura i/o amplada de les vostres imatges i taules, serà capaç de mostrar una pàgina web sense haver de reorganitzar el contingut. Això no només accelera la visualització de la pàgina, sinó que evita els molestos canvis en el disseny d'una pàgina quan la pàgina completa la càrrega. Per aquesta raó, height i width s'han d'especificar per a les imatges, sempre que sigui possible.

- -

Les taules han d'utilitzar la combinació CSS selector:propietat:

- -
  table-layout: fixed;
-
- -

i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML COL i COLGROUP.

- -

Trieu els vostres requisits d'agent d'usuari sàviament

- -

Per aconseguir les millores més importants en el disseny de la pàgina, assegureu-vos que els requisits raonables d'agent d'usuari s'especifiquin en els projectes. No requereix que el seu contingut aparegui un píxel perfecte en tots els navegadors, especialment no en els navegadors de versions més antigues.

- -

L'ideal és que, els requisits mínims bàsics s'han de basar en la consideració dels navegadors moderns que suporten les normes pertinents. Això pot incloure les versions recents de Firefox, Internet Explorer, Google Chrome, Opera i Safari.

- -

Recordeu, però, que molts dels consells que apareixen en aquest article són tècniques de sentit comú que s'apliquen a qualsevol agent d'usuari, i que es poden aplicar a qualsevol pàgina web, independentment dels requisits de compatibilitat amb els navegadors.

- -

Exemple de l'estructura d'una pàgina

- -

· HTML

- -
-
· HEAD
-
- -
-
-
-
· LINK ...
- arxius CSS necessaris per l'aparença de la pàgina. Minimitzar el nombre d'arxius per el rendiment, mentre es manté CSS no relacionat en arxius separats per al manteniment.
-
-
-
- -
-
-
-
· SCRIPT ...
- arxius JavaScript per a funcions requerides durant la càrrega de la pàgina, però no qualsevol DHTML que només es pot executar després de càrrega de la pàgina.
-
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
-
-
-
- -
-
· BODY
-
· Contingut de la pàgina, visible per a l'usuari, en trossos petits (taules/divs) que es poden visualitzar sense esperar que la pàgina completi la seva descàrrega.
-
- -
-
-
-
· SCRIPT ...
- Qualsevol script que s'utilitzarà per realitzar DHTML. El script DHTML normalment es pot executar després que la pàgina s'hagi carregat completament i tots els objectes necessaris hagin estat inicialitzats. No hi ha necessitat de carregar aquests scripts abans que el contingut de la pàgina. Això només ralenteix l'aparença inicial de la càrrega de la pàgina.
-
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
-
Si s'utilitzen les imatges per a efectes rollover, s'ha de carregar prèviament aquí després que el contingut de la pàgina s'hagi descarregat.
-
-
-
- -

Utilitzar asyn i defer, si és possible

- -

Fer que els scripts de JavaScript siguin compatibles tant amb async i defer i utilitzar async sempre que sigui possible, especialment si té diverses etiquetes de script. Amb això, la pàgina pot aturar el processament, mentre que encara s'estigui carregant JavaScript. En cas contrari, el navegador no renderizará res que estigui darrere de les etiquetes de script que no tinguin aquests atributs.

- -

Nota: Tot i que aquests atributs ens ajuden molt per a la primera vegada que es carrega una pàgina, s'han d'usar, però no dependre de que funcionarà en tots els navegadors. Si seguiu totes les pautes per fer un bon codi JavaScript, no hi ha necessitat de canviar el codi.

- -

Enllaços relacionats

- - diff --git a/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html b/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html deleted file mode 100644 index 5da074b341..0000000000 --- a/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: Us de seccions i esquemes en HTML 5 -slug: Web/Guide/HTML/Us_de_seccions_i_esquemes_en_HTML -tags: - - Advanced - - Example - - Guide - - HTML - - HTML5 - - Outlines - - Overview - - Sections - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
-

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  ({{HTMLElement("div")}}) amb elements de capçalera ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("div")}} part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de {{HTMLElement ( "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 {{HTMLElement ( "div")}} de l'algoritme d'esquema mitjançant la introducció d'un nou element, {{HTMLElement("section")}}, l'element  HTML Section.
    2. -
  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 ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} i {{HTMLElement("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. -
  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 {{HTMLElement("aside")}} que permet aquestes seccions per no ser part de l'esquema principal.
    4. -
  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: {{HTMLElement("nav")}} per a les col·leccions d'enllaços, com una taula de continguts, {{HTMLElement("footer")}} i {{HTMLElement("header")}} per obtenir informació relacionada amb el lloc. Recordeu que {{HTMLElement("header")}} i {{HTMLElement("footer")}} no seccionan el contingut com {{HTMLElement("section")}}, sinó que hi són per a marcar semànticament parts d'una secció.
    5. -
- -

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 {{HTMLElement("body")}} és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element {{HTMLElement("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 {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} i {{HTMLElement("nav")}}.

- -
Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un {{HTMLElement("h1")}}. Veure {{anch("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 {{htmlelement("section")}} i un element {{htmlelement("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 {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("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 {{HTMLElement ("h1")}} té el rang més alt, i {{HTMLElement ("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 {{HTMLElement("h1")}} per a la primera secció de nivell superior, {{HTMLElement("h2")}} per a la subsecció i {{HTMLElement("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 ({{HTMLElement("h1")}} a {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("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: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} i {{HTMLElement("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 {{HTMLElement("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 ({{HTMLElement("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. -
  2. L'element de secció HTML de navegació ({{HTMLElement("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.
    3. -
- -

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 ({{HTMLElement("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.. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir la seva pròpia {{HTMLElement("header")}}. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.
    2. -
  2. L'element Footer HTML ({{HTMLElement("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. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir el seu pròpi {{HTMLElement("footer")}}. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.
    3. -
- -

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 {{HTMLElement("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 {{HTMLElement("article")}}. En conseqüència, l'element {{HTMLElement("address")}} està enllaçat al seu més proper ancestre {{HTMLElement("body")}} o {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement( "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.

- -
{{HTML5ArticleTOC()}}
diff --git a/files/ca/web/guide/html/using_html_sections_and_outlines/index.html b/files/ca/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..5da074b341 --- /dev/null +++ b/files/ca/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,341 @@ +--- +title: Us de seccions i esquemes en HTML 5 +slug: Web/Guide/HTML/Us_de_seccions_i_esquemes_en_HTML +tags: + - Advanced + - Example + - Guide + - HTML + - HTML5 + - Outlines + - Overview + - Sections + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

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  ({{HTMLElement("div")}}) amb elements de capçalera ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("div")}} part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de {{HTMLElement ( "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 {{HTMLElement ( "div")}} de l'algoritme d'esquema mitjançant la introducció d'un nou element, {{HTMLElement("section")}}, l'element  HTML Section.
    2. +
  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 ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} i {{HTMLElement("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. +
  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 {{HTMLElement("aside")}} que permet aquestes seccions per no ser part de l'esquema principal.
    4. +
  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: {{HTMLElement("nav")}} per a les col·leccions d'enllaços, com una taula de continguts, {{HTMLElement("footer")}} i {{HTMLElement("header")}} per obtenir informació relacionada amb el lloc. Recordeu que {{HTMLElement("header")}} i {{HTMLElement("footer")}} no seccionan el contingut com {{HTMLElement("section")}}, sinó que hi són per a marcar semànticament parts d'una secció.
    5. +
+ +

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 {{HTMLElement("body")}} és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element {{HTMLElement("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 {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} i {{HTMLElement("nav")}}.

+ +
Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un {{HTMLElement("h1")}}. Veure {{anch("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 {{htmlelement("section")}} i un element {{htmlelement("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 {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("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 {{HTMLElement ("h1")}} té el rang més alt, i {{HTMLElement ("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 {{HTMLElement("h1")}} per a la primera secció de nivell superior, {{HTMLElement("h2")}} per a la subsecció i {{HTMLElement("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 ({{HTMLElement("h1")}} a {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("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: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} i {{HTMLElement("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 {{HTMLElement("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 ({{HTMLElement("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. +
  2. L'element de secció HTML de navegació ({{HTMLElement("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.
    3. +
+ +

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 ({{HTMLElement("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.. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir la seva pròpia {{HTMLElement("header")}}. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.
    2. +
  2. L'element Footer HTML ({{HTMLElement("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. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir el seu pròpi {{HTMLElement("footer")}}. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.
    3. +
+ +

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 {{HTMLElement("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 {{HTMLElement("article")}}. En conseqüència, l'element {{HTMLElement("address")}} està enllaçat al seu més proper ancestre {{HTMLElement("body")}} o {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement( "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.

+ +
{{HTML5ArticleTOC()}}
-- cgit v1.2.3-54-g00ecf