initial commit

3 files changed, 698 insertions, 0 deletions

diff --git a/files/ca/web/guide/html/_consells_per_crear_pàgines_html_de_càrrega_ràpida/index.html b/files/ca/web/guide/html/_consells_per_crear_pàgines_html_de_càrrega_ràpida/index.html
new file mode 100644
index 0000000000..6c683a8156
--- /dev/null
+++ b/files/ca/web/guide/html/_consells_per_crear_pàgines_html_de_càrrega_ràpida/index.html
@@ -0,0 +1,186 @@
+---
+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
+---
+<p><span id="result_box" lang="ca"><span>Aquests consells</span> <span>es</span> <span>basen</span> <span>en el coneixement</span> <span>i</span> <span>l'experimentació</span> <span>comuna.</span></span></p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h2 id="Consells">Consells</h2>
+
+<h3 id="Reduir_el_pes_de_la_pàgina"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>el pes</span> <span>de la pàgina</span></span></h3>
+
+<p>El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.</p>
+
+<p>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.</p>
+
+<p>Eines com ara <a class="external" href="http://www.html-tidy.org">HTML Tidy</a> 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.</p>
+
+<h3 id="Reduir_al_mínim_el_nombre_d'arxius"><span class="short_text" id="result_box" lang="ca"><span>Reduir al</span> <span>mínim el</span> <span>nombre d'arxius</span></span></h3>
+
+<p>La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> necessaries per descarregar una pàgina.</p>
+
+<p>Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició <code>If-Modified-Since</code> 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.</p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h3 id="Reduir_la_recerca_de_dominis"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>la recerca</span> <span>de dominis</span></span></h3>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h3 id="Contingut_reutilitzat_en_memòria_cau"><span class="short_text" id="result_box" lang="ca"><span>Contingut</span> <span>reutilitzat</span> <span>en memòria cau</span></span></h3>
+
+<p>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.</p>
+
+<p>En concret, presteu atenció a la capçalera <code>Last-Modified</code>. 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 <code>Last-Modified</code> a pàgines estàtiques (per exemple <code>.html, .css</code>), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, <code>.php, .aspx</code>), això, per descomptat, no es pot fer, i la capçalera no s'envia.</p>
+
+<p>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.</p>
+
+<p>Més informació:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li>
+ <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li>
+</ol>
+
+<h3 id="Ordenar_de_manera_òptima_els_components_de_la_pàgina">Ordenar de manera òptima els components de la pàgina</h3>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Reduir el nombre de scripts en línia</h3>
+
+<p>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 <code>document.write()</code> per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'<a href="https://developer.mozilla.org/en-US/docs/AJAX">AJAX</a> per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en <code>document.write()</code>.</p>
+
+<h3 id="Utilitzar_CSS_modern_i_marcat_vàlid"><span class="short_text" id="result_box" lang="ca"><span>Utilitzar</span> <span>CSS</span> <span>modern</span> <span>i</span> <span>marcat</span> <span>vàlid</span></span></h3>
+
+<p>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.</p>
+
+<p>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).</p>
+
+<p>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, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.</p>
+
+<h3 id="Part_del_teu_contingut">Part del teu contingut</h3>
+
+<p>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, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">CSS3 Multi-column Layout</a> o <a href="/en-US/docs/Using_flexbox" title="en-US/docs/Using_flexbox">CSS3 Flexible Box Layout</a>, s'han d'utilitzar al seu lloc.</p>
+
+<p>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.</p>
+
+<p>En lloc de niar profundament les taules com en:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>utilitzar</span> <span>taules no</span> <span>niats</span> <span>o</span> <span>divs</span> <span>com</span> <span>a</span></span>:</p>
+
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+
+<p>Veure: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> i <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+
+<h3 id="Minimitzar_i_comprimir_recursos_SVG">Minimitzar i comprimir recursos SVG</h3>
+
+<p>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.</p>
+
+<h3 id="Especificar_les_mides_de_les_imatges_i_taules"><span class="short_text" id="result_box" lang="ca"><span>Especificar</span> <span>les mides de les</span> <span>imatges</span> <span>i</span> <span>taules</span></span></h3>
+
+<p>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ó, <code>height</code> i <code>width</code> s'han d'especificar per a les imatges, sempre que sigui possible.</p>
+
+<p><span id="result_box" lang="ca"><span>Les</span> <span>taules</span> <span>han d'utilitzar la combinació CSS</span> <span>selector:propietat</span><span>:</span></span></p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML <code>COL</code> i <code>COLGROUP</code>.</p>
+
+<h3 id="Trieu_els_vostres_requisits_d'agent_d'usuari_sàviament">Trieu els vostres requisits d'agent d'usuari sàviament</h3>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Exemple de l'estructura d'una pàgina</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  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.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  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.</dd>
+  <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· 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.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  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.</dd>
+  <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd>
+  <dd>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.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Utilitzar_asyn_i_defer_si_és_possible">Utilitzar asyn i defer, si és possible</h2>
+
+<p>Fer que els scripts de JavaScript siguin compatibles tant amb <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> i <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> i utilitzar <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> 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.</p>
+
+<p>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.</p>
+
+<h2 id="Enllaços_relacionats"><span class="short_text" id="result_box" lang="ca"><span>Enllaços</span> <span>relacionats</span></span></h2>
+
+<ul>
+ <li>Llibre: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li><span id="result_box" lang="ca"><span>Les</span> <span>excel·lents i</span> <span>molt</span> <span>completes</span></span> <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li><span id="result_box" lang="ca"><span>Eines</span> <span>per a l'anàlisi</span> <span>i</span> <span>l'optimització</span> <span>del rendiment</span></span> : <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
+</ul>
diff --git a/files/ca/web/guide/html/html5/index.html b/files/ca/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..6ed392c033
--- /dev/null
+++ b/files/ca/web/guide/html/html5/index.html
@@ -0,0 +1,171 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML5
+tags:
+  - Guide
+  - HTML
+  - HTML5
+  - Overview
+  - Web
+  - Web Development
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><span class="seoSummary"><strong>HTML5</strong></span> <span id="result_box" lang="ca"><span>és l'última</span> <span>evolució</span> <span>de la norma que</span> <span>defineix</span> <a href="https://developer.mozilla.org/en-US/docs/HTML">HTML</a><span>.</span> <span>El terme</span> <span>representa</span> <span>dos conceptes</span> <span>diferents</span><span>:</span></span></p>
+
+<ul>
+ <li>És una nova versió del llenguatge HTML, amb nous elements, atributs i comportaments<span class="seoSummary">,</span></li>
+ <li>i un ampli conjunt de tecnologies que permet les més diverses i potents aplicacions i llocs web. Aquest conjunt es diu de vegades <em>HTML5 i amics</em> i, sovint escurçat a simplement <em>HTML5</em>.</li>
+</ul>
+
+<p>Dissenyat per a ser utilitzable per tots els desenvolupadors de la Web Oberta, aquesta pàgina de referència enllaça a nombrosos recursos sobre tecnologies HTML5, que es classifiquen en diversos grups segons la seva funció.</p>
+
+<ul>
+ <li><em>Semàntica: </em>us permet descriure amb major precisió quin és el seu contingut.</li>
+ <li><em>Connectivitat</em>: us permet comunicar-vos amb el servidor de formes noves i innovadores.</li>
+ <li><em>Fora de línia i emmagatzematge</em>: permetre que les pàgines web emmagatzemin les dades localment en el client i funcionin de forma més eficient.</li>
+ <li><em>Multimèdia</em>: fer ciutadans de primera classe d'àudio i vídeo a la Web Oberta.</li>
+ <li><em>Gràfics i efectes 2D/3D</em>: permetre una gamma molt més àmplia d'opcions de presentació.</li>
+ <li><em>Rendiment i integració</em>: proporcionar una major optimització de la velocitat i un millor ús del maquinari de l'equip.</li>
+ <li><em>Accés al dispositiu</em>: permetre l'ús de diversos dispositius d'entrada i de sortida..</li>
+ <li><em>Estil</em>: deixar que els autors escriuen temes més sofisticats.</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="SemàntIcA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SemàntIcA</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Seccions i esquemes en HTML5</a></dt>
+ <dd>Una ullada als nous elements d'esquema i secció en HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.</dd>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Ús d'àudio i vídeo en HTML5</a></dt>
+ <dd>Els elements {{HTMLElement ("àudio")}} i {{HTMLElement ("vídeo")}} incrustats, permeten la manipulació dels nous continguts multimèdia.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Formularis en HTML5</a></dt>
+ <dd>Una mirada a les millores en els formularis web en HTML5: l'API de validació restringida, diversos atributs nous, nous valors per l'atribut {{htmlattrxref("type", "input")}} de l'element {{HTMLElement("input")}}  i l'element nou {{HTMLElement("output")}}.</dd>
+ <dt><span id="result_box" lang="ca"><span class="alt-edited">Nous elements semàntics</span></span></dt>
+ <dd>Al costat dels elements de seccions, de medis i de formularis, hi ha nombrosos elements nous, com {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} o {{HTMLElement("meter")}} i {{HTMLElement("main")}}, <span class="short_text" id="result_box" lang="ca"><span>augmentant la</span> <span>quantitat</span> <span>d'</span></span><a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elements HTML5 vàlids</a>.</dd>
+ <dt><span id="result_box" lang="ca"><span>Millora en</span> <span>{</span><span>{</span><span>HTMLElement</span> <span>(</span><span>"</span><span>iframe</span><span>"</span><span>)</span><span>}</span><span>}</span></span></dt>
+ <dd>Utilitzant els atributs {{htmlattrxref("sandbox", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}}, els autors ara poden ser precisos sobre el nivell de seguretat i la representació desitjada d'un element {{HTMLElement("iframe")}}.</dd>
+ <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
+ <dd><span id="result_box" lang="ca"><span>Permet la</span> <span>incorporació directa</span> <span>de fórmules</span> <span>matemàtiques.</span></span></dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducció a HTML5</a></dt>
+ <dd>Aquest article presenta com indicar al navegador que utilitzeu HTML5 en el vostre disseny web o una aplicació web.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analitzador HTML5 compatible</a></dt>
+ <dd>L'analitzador, que converteix els bytes d'un document HTML en un DOM, s'ha ampliat i ara defineix amb precisió el comportament d'utilitzar en tots els casos, fins i tot quan s'enfronten amb HTML vàlid. Això condueix a una major previsibilitat i interoperabilitat entre els navegadors compatibles amb HTML5.</dd>
+</dl>
+
+<h2 id="Conectivitat" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Conectivitat</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd><span id="result_box" lang="ca"><span>Permet la</span> <span>creació</span> <span>d'una connexió</span> <span>permanent</span> <span>entre la pàgina</span> <span>i el servidor</span> <span>i l'intercanvi</span> <span>de dades no</span> <span>HTML</span> <span>a través d'</span><span>aquest mitjà.</span></span></dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Esdeveniments enviats pel servidor</a></dt>
+ <dd>Permet a un servidor enviar esdeveniments a un client, en lloc del paradigma clàssic en què el servidor podria enviar les dades només en resposta a la petició d'un client.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complament o una aplicació externa.</dd>
+</dl>
+
+<h2 id="Sense_connexió_emmagatzematge" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sense connexió &amp; emmagatzematge</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sense connexió: El cau de l'aplicació</a></dt>
+ <dd>Firefox és totalment compatible amb l'especificació de recursos sense connexió d'HTML5. La majoria dels altres recursos sense connexió tenen suport en un cert nivell.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Esdeveniments amb i sense connexió</a></dt>
+ <dd>Firefox 3 suporta WHATWG, esdeveniments amb i sense connexió, que permeten a les aplicacions i extensions detectar si hi ha o no una connexió a Internet, així com tambien, detectar quan la connexió es perd o es recupera.</dd>
+ <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG sessió del costat client i emmagatzamatge continu (emmagatzamatge DOM)</a></dt>
+ <dd><span id="result_box" lang="ca"><span>Sessió</span> <span>del costat</span> <span>client</span> <span>i</span> <span>l'emmagatzematge</span> <span>continu</span> <span>permet a les</span> <span>aplicacions</span> <span>web emmagatzemar</span> <span>dades estructurades</span> <span>al</span> <span>costat</span> <span>del client.</span></span></dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd><span id="result_box" lang="ca"><span>IndexedDB</span> <span>és</span> <span>un estàndard</span> <span>web</span> <span>per a l'emmagatzematge</span> <span>de grans</span> <span>quantitats</span> <span>de dades estructurades</span> <span>en el navegador i</span> <span>per a les</span> <span>recerques</span> <span>d'alt</span> <span>rendiment</span> <span>d'aquestes dades</span> <span>mitjançant</span> <span>índexs</span></span> .</dd>
+ <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Ús d'arxius des d'aplicacions web</a></dt>
+ <dd>El suport per a la nova API d'arxius d'HTML5 ha estat afegit a Gecko, per la qual cosa és possible que les aplicacions d'Internet accedeixin als arxius locals seleccionats per l'usuari. Això inclou el suport per a la selecció de diversos arxius utilitzant l'element HTML <span style="font-family: monospace;">{{HTMLElement("input")}}</span> de <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> amb el nou atribut <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a>. També hi ha <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
+</dl>
+
+<h2 id="Multimèdia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimèdia</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">L'ús àudio i vídeo en HTML5</a></dt>
+ <dd>Els elements {{HTMLElement("audio")}} i {{HTMLElement("video")}} incrustats permeten la manipulació dels nous continguts multimèdia.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complement o una aplicació externa.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Ús de l'API de la càmera</a></dt>
+ <dd>Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.</dd>
+ <dt>Pista i WebVTT</dt>
+ <dd>L'element {{HTMLElement("track")}} permet subtítols i capítols. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> és un format de pista de text.</dd>
+</dl>
+
+<h2 id="Gràfics_i_efectes_3D" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Gràfics i efectes 3D</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Tutorial Canvas</a></dt>
+ <dd>Aprendre sobre el nou element {{HTMLElement("canvas")}} i com dibuixar gràfics i altres objectes en Firefox.</dd>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de text HTML5 per elements <code>&lt;canvas&gt;</code></a></dt>
+ <dd>L'API de text HTML5 és ara compatible amb elements {{HTMLElement("canvas")}}..</dd>
+ <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL porta gràfics en 3D a la web mitjançant la introducció d'una API que s'ajusta estretament a OpenGL ÉS 2.0 que pot ser utilitzat en elements HTML5 {{HTMLElement("canvas")}}.</dd>
+ <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>Un format basat en XML d'imatges vectorials que pot ser directament incrustat en el codi HTML.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Rendiment_i_Integració" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><span id="result_box" lang="ca"><span>Rendiment</span> <span>i Integració</span></span></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd>Permet delegar l'avaluació de JavaScript a subprocessos en segon pla, permetent que aquestes activitats evitin alentir esdeveniments interactius.</dd>
+ <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> nivell 2</dt>
+ <dd>Permet anar a buscar de forma asíncrona algunes parts de la pàgina, la qual cosa li permet mostrar contingut dinàmic, variant segons el temps i les accions de l'usuari. Aquesta és la tecnologia que hi ha darrere d'<a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
+ <dt>Motors JavaScript un compilador JIT</dt>
+ <dd><span id="result_box" lang="ca"><span>La nova</span> <span>generació</span> <span>de motors</span> <span>de JavaScript</span> <span>són</span> <span>molt més</span> <span>potents</span><span>, el que porta</span> <span>a un major</span> <span>rendiment</span></span>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">API historial</a></dt>
+ <dd>Permet la manipulació del històrial del navegador. Això és especialment útil per a les pàgines que carreguen interactivament nova informació.</dd>
+ <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'atribut contentEditable: Transformeu el vostre lloc web en una wiki!</a></dt>
+ <dd>HTML5 ha estandarditzat l'atribut contentEditable. Més informació sobre aquesta característica.</dd>
+ <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Arrosegar i deixar anar</a></dt>
+ <dd>El API d'arrossegar i deixar anar d'HTML5 permet el suport per arrossegar i deixar anar elements dins i entre llocs web. Això també proporciona una API senzilla per a l'ús d'extensions i aplicacions basats en Mozilla.</dd>
+ <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestió del focus en HTML</a></dt>
+ <dd>Els nous atributs d'HTML5 <code>activeElement</code> i <code>hasFocus</code> són compatibles.</dd>
+ <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Controladors de protocols basats en la Web</a></dt>
+ <dd>Ara podeu registrar aplicacions web com controladors de protocol utilitzant el mètode <code>navigator.registerProtocolHandler()</code>.</dd>
+ <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt>
+ <dd>Permet controlar les animacions de renderitzat per obtenir un rendiment òptim.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">API Pantalla completa</a></dt>
+ <dd>Controla l'ús de tota la pantalla per a una pàgina Web o aplicació, sense que es mostri la interfície d'usuari del navegador.</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API Bloqueig del punter</a></dt>
+ <dd>Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Esdeveniments amb línia i sense línia</a></dt>
+ <dd>Amb la finalitat de construir una bona aplicació web sense connexió, necessiteu saber quan la vostra aplicació està realment fora de línia. Per cert, també necessiteu saber quan la vostra aplicació ha tornat a un estat en línia de nou.</dd>
+</dl>
+
+<h2 id="accés_al_dispositiu" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">accés al dispositiu</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Ús de l'API de la càmera</a></dt>
+ <dd>Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.</dd>
+ <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Esdeveniments tàctils</a></dt>
+ <dd>Manipuladors per reaccionar als esdeveniments creats per un usuari pressionant pantalles tàctils.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Ús de la geolocalització</a></dt>
+ <dd>Permet als navegadors localitzar la posició de l'usuari mitjançant la geolocalització.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecció de l'orientació del dispositiu</a></dt>
+ <dd>Obtenir la informació quan el dispositiu en el qual s'executa el navegador canvia l'orientació. Això pot ser usat com un dispositiu d'entrada (per exemple, per fer jocs que reaccionen a la posició del dispositiu) o per adaptar el disseny d'una pàgina a l'orientació de la pantalla (vertical o horitzontal)..</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API Bloqueig del punter</a></dt>
+ <dd>Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.</dd>
+</dl>
+
+<h2 id="ESTIL" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ESTIL</h2>
+
+<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> s'ha ampliat per ser capaç de poder donar estil als elements en una forma molt més complexa. Això es coneix com <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, encara que CSS no és una especificació monolítica i els diferents mòduls no estan tots en el nivell 3: alguns són en el nivell 1 i altres al nivell 4, amb tots els nivells intermedis coberts.</p>
+
+<dl>
+ <dt>Noves característiques d'estil de fons</dt>
+ <dd>Ara és possible posar una ombra a una caixa, mitjançant {{cssxref ("box-shadow")}} i es poden configurar <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">diversos fons</a>.</dd>
+ <dt>Més vores de luxe</dt>
+ <dd>No només ara és possible usar imatges per a l'estil de vores, usant {{cssxref ("border-image")}} i les seves propietats associades, també les vores arrodonides són suportades a través de la propietat {{cssxref("border-radius")}}.</dd>
+ <dt>Animació del vostre estil</dt>
+ <dd>Usant <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> per animar entre diferents estats o usar <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> per animar parts de la pàgina sense un esdeveniment desencadenant, ara podeu controlar elements mòbils en la vostra pàgina.</dd>
+ <dt>Tipografia millorada</dt>
+ <dd>Els autors tenen un millor control per arribar a una millor tipografia. Poden controlar {{cssxref ("text-overflow")}} i la separació de síl·labes <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">(hyphenation)</a>, però també poden afegir una ombra <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">(shadow)</a> a ella o controlar amb més precisió les seves decoracions <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">(decorations)</a>. Tipus de lletra personalitzades poden ser descarregades i aplicades gràcies a la nova regla {{cssxref ("@ font-face")}}.</dd>
+ <dt>Nous dissenys de presentació</dt>
+ <dd>Per tal de millorar la flexibilitat dels dissenys, s'han afegit dos nous dissenys: el <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> i <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
+</dl>
+</div>
+</div>
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
new file mode 100644
index 0000000000..5da074b341
--- /dev/null
+++ b/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/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
+---
+<div class="warning">
+<p><strong>Important</strong>: 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'<a href="http://www.w3.org/TR/html5/sections.html#outline">esquema</a> no pot ser invocat per transmetre l'estructura dels documents als usuaris. Es recomana als autors a utilitzar les capçaleres de <a href="http://www.w3.org/TR/html5/sections.html#rank">rang</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) per transmetre l'estructura.</p>
+</div>
+
+<p>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.</p>
+
+<h2 id="Estructura_de_un_document_en_HTML_4">Estructura de un document en HTML 4</h2>
+
+<p>L'estructura d'un document, és a dir, l'estructura semàntica del que està entre <code>&lt;body&gt;</code> i <code>&lt;/body&gt;</code>, é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.</p>
+
+<p>Així que el següent marcat:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:xml">&lt;div class="section" id="forest-elephants" &gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;div class="subsection" id="forest-habitat" &gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+</pre>
+
+<p>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ó,</p>
+
+<pre class="brush:xml">&lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h2&gt;Habitat&lt;/h2&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  &lt;h2&gt;Diet&lt;/h2&gt;
+&lt;h1&gt;Mongolian gerbils&lt;/h1&gt;
+</pre>
+
+<p>condueix al següent esquema:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+</pre>
+
+<h2 id="Problemes_resolts_per_HTML5">Problemes resolts per HTML5</h2>
+
+<p>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:</p>
+
+<ol>
+ <li>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 <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologia d'assistència</a>, 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.</li>
+ <li>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.</li>
+ <li>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.</li>
+ <li>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ó.</li>
+</ol>
+
+<p>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.</p>
+
+<h2 id="Algoritme_d'esquema_HTML5">A<span class="short_text" id="result_box" lang="ca"><span>lgoritme</span> <span>d'esquema</span> <span>HTML5</span></span></h2>
+
+<p>Anem a considerar els algoritmes subjacents la forma en que HTML s'encarrega de les seccions i esquemes.</p>
+
+<h3 id="Definir_seccions">Definir seccions</h3>
+
+<p>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")}}.</p>
+
+<div class="note">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")}}</div>
+
+<p>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")}}:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;aside&gt;
+    &lt;p&gt;advertising block&lt;/p&gt;
+  &lt;/aside&gt;
+
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>Això ens porta al següent esquema::</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+</pre>
+
+<h3 id="Definir_encapçalaments">Definir encapçalaments</h3>
+
+<p>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.</p>
+
+<p>Els elements de capçalera tenen un <em>rang</em> donat pel nombre en el nom de l'element, on {{HTMLElement ("h1")}} té el rang més <em>alt</em>, i {{HTMLElement ("H6")}} té el rang més <em>baix</em>. 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:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+  &lt;p&gt;In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>Aixó crea el següent esquema:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils</pre>
+
+<p>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.)</p>
+
+<h3 id="Seccionament_implícit">Seccionament implícit</h3>
+
+<p>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 <em>seccionament implícit</em>.</p>
+
+<p>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:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+&lt;/section&gt;</pre>
+
+<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p>
+
+<pre>1. Forest elephants
+   1.1 Habitat <em>(implicitly defined by the h3 element)</em>
+</pre>
+
+<p>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: </p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h1 class="implicit section"&gt;Mongolian gerbils&lt;/h1&gt;
+  &lt;p&gt;Mongolian gerbils are cute little mammals.
+    ...this section continues...
+&lt;/section&gt;</pre>
+
+<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p>
+
+<pre>1. Forest elephants
+2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em>
+</pre>
+
+<p>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:</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;Mammals&lt;/h1&gt;
+  &lt;h2&gt;Whales&lt;/h2&gt;
+  &lt;p&gt;In this section, we discuss the swimming whales.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h3&gt;Forest elephants&lt;/h3&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+      &lt;p&gt;Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    &lt;h2&gt;Reptiles&lt;/h2&gt;
+      &lt;p&gt;Reptiles are animals with cold blood.
+          ...this section continues...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p>
+
+<pre>1. Mammals
+   1.1 Whales <em>(implicitly defined by the h2 element)</em>
+   1.2 Forest elephants <em>(explicitly defined by the section element)</em>
+   1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em>
+2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em>
+</pre>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h3 id="Arrels_de_seccionament"><a name="sectioning_root">Arrels de seccionament</a></h3>
+
+<p>Una <a id="sectioning root" name="sectioning root">arrel de seccionament</a> é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")}}.</p>
+
+<p>Exemple:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introduction&lt;/h2&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "&lt;cite&gt;The Forest Elephant in Borneo&lt;/cite&gt;":&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;Borneo&lt;/h1&gt;
+       &lt;p&gt;The forest element lives in Borneo...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>El resultat d'aquest exemple en el següent esquema:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat</pre>
+
+<p>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.</p>
+
+<h3 id="Seccions_fora_de_l'esquema">Seccions fora de l'esquema</h3>
+
+<p>HTML 5 introdueix dos nous elements que permeten definir seccions que no pertanyen el esquema principal d'un document web:</p>
+
+<ol>
+ <li>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.</li>
+ <li>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.</li>
+</ol>
+
+<h3 id="Encapçalats_i_peus_de_pàgina">Encapçalats i peus de pàgina</h3>
+
+<p>HTML5 també introdueix dos nous elements que es poden utilitzar per marcar la capçalera i el peu de pàgina d'una secció:</p>
+
+<ol>
+ <li>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ó.</li>
+ <li>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ó.</li>
+</ol>
+
+<p>Aquests no creen noves seccions en l'esquema, més aviat, marcan el contingut dins de les seccions de la pàgina.</p>
+
+<h2 id="Adreces_en_elements_de_seccionament">Adreces en elements de seccionament</h2>
+
+<p>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.</p>
+
+<p>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")}}.</p>
+
+<h2 id="Usar_elements_HTML5_en_navegadors_no_HTML5">Usar elements HTML5 en navegadors no HTML5</h2>
+
+<p>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 <code>display:inline</code> per defecte:</p>
+
+<pre class="brush: css">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+
+<p>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.</p>
+
+<p>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ò:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>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:</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+   &lt;strong&gt;Warning !&lt;/strong&gt;
+   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.
+&lt;/noscript&gt;</pre>
+
+<p>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:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;Warning !&lt;/strong&gt;
+     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.
+  &lt;/noscript&gt;
+&lt;![endif]--&gt;</pre>
+
+<h2 id="Conclusió">Conclusió</h2>
+
+<p>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.</p>
+
+<div>{{HTML5ArticleTOC()}}</div>