path: root/files/ca/learn/html/introduction_to_html/debugging_html/index.html

---
title: Depurar HTML
slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
tags:
  - Beginner
  - CodingScripting
  - Debugging
  - Error
  - Guide
  - HTML
  - Validation
  - validator
translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
original_slug: Learn/HTML/Introducció_al_HTML/Depurar_HTML
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">Escriure HTML està molt bé; però, i si hi ha alguna cosa que va malament i no se sap on està l'error en el codi? Aquest article dona a conèixer algunes eines que poden ajudar.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisits:</th>
   <td>Familiaritzar-se amb els fonaments bàsics de l’HTML, que s’expliquen, per exemple, en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>, <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments de text en HTML</a> i <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">Creació d’hipervincles</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td><span id="result_box" lang="ca">Aprendre els conceptes bàsics de la utilització d'eines de depuració per a trobar problemes en HTML. </span></td>
  </tr>
 </tbody>
</table>

<h2 id="Depurar_no_fa_por">Depurar no fa por</h2>

<p>En escriure qualsevol mena de codi, tot està molt bé en general, fins que arriba aquest moment temut, que és quan es produeix un error; s'ha fet alguna cosa malament i el codi no funciona en absolut, o no ben bé com es voldria. Per exemple, a continuació es mostra la informació d'un error en intentar {{glossary("compilar")}} un programa senzill escrit en el llenguatge <a href="https://www.rust-lang.org/">Rust</a>.</p>

<p><img alt="Una finestra d’ordinador portàtil que mostra el resultat d'intentar compilar un programa en codi Rust amb una cometa que manca en algun lloc d'una instrucció 'print'. El missatge d'error indica: 'error: unterminated double quote string'." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">En aquest cas, el missatge d'error és relativament fàcil d'entendre: «cadena de text amb cometes dobles sense tancar». Si et fixes en la programació, és probable que puguis veure que en la instrucció <code>println!(Hello, world!”);</code> podria faltar-hi, per lògica, una cometa doble. Però els missatges d'error poden esdevenir ràpidament més complicats i menys fàcils d'interpretar a mesura que els programes es fan més extensos, i fins i tot el cas senzill anterior pot intimidar una mica a algú que no sap gens de programació amb Rust.</p>

<p>Això no obstant, la depuració no té per què fer por; la clau per estar còmodes amb l’escriptura i depuració de qualsevol llenguatge de programació o codi és la familiaritat, tant amb el llenguatge com amb les eines.</p>

<h2 id="Depuració_amb_HTML">Depuració amb HTML</h2>

<p>HTML no és tan complicat d'entendre com Rust; HTML no es compila en una forma diferent abans que el navegador n’analitzi el resultat i el presenti (s’interpreta, no es compila). I la sintaxi d’un {{glossary("element")}} HTML és possiblement molt més fàcil d'entendre que la d’un «autèntic llenguatge de programació» com Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. Però la manera amb què els navegadors executen l’HTML és molt més <strong>permissiva</strong> que la manera com s'executen els llenguatges de programació, i això és alhora bo i dolent.</p>

<h3 id="Codi_permissiu">Codi permissiu</h3>

<p>Què entenem per permissiu? Bé, en general, quan comets algun error de codi, et pots topar amb dos tipus d'error principals:</p>

<ul>
 <li><strong>Errors de sintaxi:</strong> són errors d'ortografia en el codi, que impedeixen que el programa s'executi, igual que l'error en el codi Rust que es mostra a dalt. En general, aquests errors es poden resoldre bé, sempre que estiguem familiaritzats amb les eines adequades i sapiguem què signifiquen els missatges d'error.</li>
 <li><strong>Errors lògics</strong>: aquests són errors en què la sintaxi és correcta, però el codi no fa el que vols que faci, sinó que el programa s'executa de manera incorrecta. Sovint, aquests errors són més difícils de corregir que els de sintaxi, perquè no hi ha cap missatge d'error que t’adreci cap a la font de l'error.</li>
</ul>

<p>L’HTML en si no té tendència a presentar errors de sintaxi perquè els navegadors en què s'executa són permissius, i això significa que el codi funciona fins i tot encara que hi hagi errors de sintaxi. Els navegadors incorporen regles que els indiquen com interpretar l’etiquetatge escrit erròniament, de manera que s'obtingui alguna cosa que rutlli, encara que potser no sigui exactament el que esperaves. Això, per descomptat, també pot ser un problema!</p>

<div class="note">
<p><strong>Nota</strong>: L’HTML s'executa amb permissivitat perquè quan es va crear la web, es va decidir que permetre a la gent la publicació dels seus continguts fos més important que garantir que la sintaxi fos totalment correcta. La xarxa web probablement no seria tan popular com ho és avui, si hagués estat més estricta des dels inicis.</p>
</div>

<h3 id="Aprenentatge_actiu_estudiar_la_permissivitat_del_codi">Aprenentatge actiu: estudiar la permissivitat del codi</h3>

<p>És hora d'estudiar la naturalesa permissiva del codi HTML per tu mateix.</p>

<ol>
 <li>En primer lloc, fes-te amb una còpia de la nostra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">demostració de depuració</a> i desa-te-la en local. Hem escrit aquest exemple de demostració deliberadament amb alguns errors perquè els analitzis (es diu que l’etiquetatge HTML està <strong>mal format</strong>, en oposició a <strong>ben format</strong>).</li>
 <li>A continuació, obre’l en un navegador; veuràs alguna cosa com aquesta: <img alt="Un document HTML senzill amb el títol Exemples de depuració HTML i una mica d'informació sobre errors comuns amb HTML, com elements que no es tanquen, elements mal imbricats o atributs que no es tanquen." src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
 <li>Això, d’entrada, no fa bona pinta; analitzem el codi per veure si podem esbrinar-ne el perquè (només es mostren els continguts de <code>body</code>):
  <pre class="brush: html notranslate">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;

&lt;p&gt;What causes errors in HTML?

&lt;ul&gt;
  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
      then its effect can spread to areas you didn't intend

  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
      what is this?&lt;/em&gt;

  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
      homepage&lt;/a&gt;
&lt;/ul&gt;</pre>
 </li>
 <li>Fem un repàs dels problemes que hi podem veure:
  <ul>
   <li>Els elements {{htmlelement("p")}} i {{htmlelement("li")}} no tenen etiquetes de tancament. A partir de la imatge de dalt, no sembla que això hagi afectat malament la representació del codi d’etiquetatge, perquè és fàcil deduir on acaba un dels elements i on en comença un altre.</li>
   <li>El primer element {{htmlelement("strong")}} no té etiqueta de tancament. Això és una mica més problemàtic, perquè no és fàcil saber on se suposa que acaba l'element. De fet, sembla que s’ha destacat en negreta tota la resta del text.</li>
   <li>En aquesta secció les etiquetes estan mal imbricades: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. No és fàcil saber com s'ha d'interpretar això, a causa del problema anterior.</li>
   <li>El valor de l'atribut {{htmlattrxref ("href", "a")}} no té cometes dobles tancament. Això sembla que ha causat el problema més greu: l'enllaç no apareix en absolut.</li>
  </ul>
 </li>
 <li>Ara observem quina presentació fa el navegador a partir d’aquest d’etiquetatge, en oposició a l’etiquetatge que observem en el codi. Per a això, pots utilitzar les eines de desenvolupador del navegador. Si no estàs familiaritzat amb l'ús de les eines de desenvolupador del navegador, dedica uns minuts a revisar <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Descobreix les eines de desenvolupador del navegador</a>, i després torna.</li>
 <li>En l'inspector de DOM pots veure quin aspecte presenta la representació d’aquest etiquetatge: <img alt="L'inspector d'HTML de Firefox, amb el nostre paràgraf d'exemple destacat, mostra el text &quot;Què genera errors en l'HTML&quot;. Hi pots veure que el navegador s'ha encarregat de tancar l'element paràgraf." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
 <li>Amb l'inspector DOM, explorarem el codi amb detall per veure com el navegador ha intentat de corregir els errors HTML (hem fet la revisió amb Firefox; altres navegadors moderns <em>haurien de donar</em> el mateix resultat):
  <ul>
   <li>S’han donat etiquetes de tancament als paràgrafs i elements de llista.</li>
   <li>No està clar on s’ha de tancar el primer element <code>&lt;strong&gt;</code>, de manera que el navegador ha etiquetat cada bloc de text per separat que hi ha fins al final del document amb una etiqueta <code>strong</code>.</li>
   <li>El navegador ha resolt la imbricació d’etiquetes incorrecta de la següent manera:
    <pre class="brush: html notranslate">&lt;strong&gt;strong
  &lt;em&gt;strong emphasised?&lt;/em&gt;
&lt;/strong&gt;
&lt;em&gt; what is this?&lt;/em&gt;</pre>
   </li>
   <li>L'enllaç amb la cometa doble que falta s’ha eliminat del tot. L'últim element de la llista ara presenta aquest aspecte:
    <pre class="brush: html notranslate">&lt;li&gt;
  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
  Let's look at an example: &lt;/strong&gt;
&lt;/li&gt;</pre>
   </li>
  </ul>
 </li>
</ol>

<h3 id="Validació_HTML">Validació HTML</h3>

<p>A partir de l'exemple anterior pots veure que és important que t’asseguris que el codi HTML està prou ben format. Però, com? En un exemple petit com el que has vist abans, resulta prou fàcil buscar per les línies de codi i trobar els errors; però, què passa amb un document HTML extens i complex?</p>

<p>La millor estratègia és començar per executar la pàgina HTML amb el servei de validació d’etiquetatge (<a href="https://validator.w3.org/">Markup Validation Service</a>), creat i mantingut per l'organització W3C, que s'ocupa de les especificacions que defineixen l’HTML, el CSS i altres tecnologies web. Aquesta pàgina web pren un document HTML com una entrada, l’analitza i et retorna un informe que exposa tot el que està malament en l’HTML.</p>

<p><img alt="La pàgina d’inici del validador d’HTML" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>

<p>Per a especificar el codi HTML que vols validar, pots donar-ne l’adreça web, pujar-hi l’arxiu HTML o introduir-hi el codi HTML directament.</p>

<h3 id="Aprenentatge_actiu_validació_d’un_document_HTML">Aprenentatge actiu: validació d’un document HTML</h3>

<p>Provem-ho amb el nostre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">document de mostra</a>.</p>

<ol>
 <li>En primer lloc, carrega el <a href="https://validator.w3.org/">Markup Validation Service</a> en una de les pestanyes del navegador, si encara no ho has fet.</li>
 <li>Ves a la pestanya <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li>
 <li>Copia tot el codi del document de mostra (no només el body) i enganxa’l en l'àrea gran de text que hi ha en el Markup Validation Service.</li>
 <li>Prem el botó <em>Check</em>.</li>
</ol>

<p>Això t’ha de donar una llista d'errors i altres dades.</p>

<p><img alt="Llista dels resultats de la validació HTML del servei de validació d'etiquetatge de W3C " src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>

<h4 id="Interpretació_dels_missatges_derror"><span class="short_text" id="result_box" lang="ca">Interpretació dels missatges d'error</span></h4>

<p>La llista de missatges d'error que el validador presenta sovint són útils, però de vegades no tant; amb una mica de pràctica trobaràs la manera d'interpretar-los per resoldre el codi. Fem una passada pels missatges d'error i vegem què signifiquen. Observem que cada missatge ve amb un número de línia i columna, que t’ajuda a localitzar l'error més fàcilment.</p>

<ul>
 <li>"<span>Consider adding a </span><code>lang</code><span> attribute to the </span><code>html</code><span> start tag to declare the language of this document." [Considera afegir un atribug <code>lang</code> a l'etiqueta d'inici <code>html</code> per declarar l'idioma del document]: No es tracta d'un error, sinó d'una advertència (warning). La <a class="external external-icon" href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="noopener">recomanació</a> és definir sempre l'idioma, i aquest "warning" explica com fer-ho.</span></li>
 <li>"End tag <code>li</code> implied, but there were open elements" [Etiqueta final <code>li</code> implícita, però hi havia elements oberts] (2 instàncies): Aquest missatge indica que un element està obert i que s’ha de tancar. L'etiqueta final hi és implícita, però de fet no hi és. La informació de línia/columna apunta a la primera línia després de la línia en què hi hauria d’haver l'etiqueta de tancament, però això ja aquest és un bon indici per veure què falla.</li>
 <li>"Unclosed element <code>strong</code>" [“Element <code>strong</code> sense tancar”]: Aquest és molt fàcil d'entendre, un element {{htmlelement("strong")}} està sense tancar i la informació de línia/columna hi apunta directament.</li>
 <li>"End tag <code>strong</code> violates nesting rules" [L'etiqueta de tancament <code>strong</code> infringeix les regles d’imbricació]: Aquest missatge assenyala els elements que estan mal imbricats, i la informació de línia/columna assenyala on són.</li>
 <li>"End of file reached when inside an attribute value. Ignoring tag" [S'ha arribat al final de l'arxiu sense sortir d'un valor d’atribut. L’etiqueta s’ignora]: Aquest missatge és força críptic; es refereix al fet que hi ha un valor d'atribut que no està correctament format en algun lloc, possiblement prop del final de l'arxiu, perquè en el valor de l'atribut apareix el final de l'arxiu. El fet que el navegador no mostri l'enllaç ens dona una pista de quin element falla.</li>
 <li>"End of file seen and there were open elements" [S’ha arribat al final de l'arxiu i hi ha elements oberts]: Aquest missatge és una mica ambigu, però bàsicament es refereix al fet que hi ha elements oberts que s’han de tancar correctament. Els números de línia apunten a les últimes línies de l'arxiu i aquest missatge d'error ve amb una línia de codi que assenyala un exemple d'element obert:
  <pre class="notranslate">example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>

  <div class="note">
  <p><strong>Nota</strong>: Un atribut que no té cometes de tancament pot entendre’s com un element obert perquè la resta del document s’interpreta com el valor de l'atribut.</p>
  </div>
 </li>
 <li>"Unclosed element <code>ul</code>" [Element <code>ul</code> sense tancar]: Aquest missatge no resulta de gaire utilitat perquè l'element {{htmlelement("ul")}} està tancat correctament. L’error es produeix perquè l'element {{htmlelement("a")}} no està tancat perquè no té cometes de tancament.</li>
</ul>

<p>Si no arribes a esbrinar què significa cada missatge d'error, no t’hi amoïnis; una bona idea és tractar de resoldre uns quants errors cada la vegada, i a continuació tornar a validar el codi HTML per veure els errors que queden. De vegades, la resolució d'un error pot eliminar més d’un missatges d'error diferents, perquè sovint un sol problema pot causar diversos errors, en un efecte dòmino.</p>

<p>Sabràs que has resolt tots els errors quan en la sortida t’aparegui una banda amb el missatge següent:</p>

<p><img alt="Banda amb el text: &quot;El document valida d'acord amb els esquemes i les restriccions addiconals especificats que verifica el validador&quot;" src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Resum">Resum</h2>

<p>Aquí tenim una introducció a la depuració de codi HTML, que t’hauria de proporcionar alguns coneixements útils per quan comencis a depurar CSS, JavaScript i altres tipus de codi, més endavant durant la carrera. Això també marca el final dels articles d’aprenentatge del mòdul Introducció a l’HTML; ara ja pots examinar-te tu mateix amb les nostres activitats d’avaluació: a sota trobaràs un enllaç a la primera d'elles.</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>