--- 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 ---

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

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.

Prerequisits:	Familiaritzar-se amb els fonaments bàsics de l’HTML, que s’expliquen, per exemple, en Iniciació a l’HTML, Fonaments de text en HTML i Creació d’hipervincles.
Objectiu:	Aprendre els conceptes bàsics de la utilització d'eines de depuració per a trobar problemes en HTML.

Depurar no fa por

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 Rust.

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'. 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ó println!(Hello, world!”); 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.

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.

Depuració amb HTML

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 permissiva que la manera com s'executen els llenguatges de programació, i això és alhora bo i dolent.

Codi permissiu

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

Errors de sintaxi: 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.
Errors lògics: 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.

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!

Nota: 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.

Aprenentatge actiu: estudiar la permissivitat del codi

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

En primer lloc, fes-te amb una còpia de la nostra demostració de depuració 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à mal format, en oposició a ben format).
A continuació, obre’l en un navegador; veuràs alguna cosa com aquesta:

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 body):

<h1>HTML debugging examples</h1>

<p>What causes errors in HTML?

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

  <li>Badly nested elements: Nesting elements properly is also very important
      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
      what is this?</em>

  <li>Unclosed attributes: Another common source of HTML problems. Let's
      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
      homepage</a>
</ul>

Fem un repàs dels problemes que hi podem veure:
- 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.
- 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.
- En aquesta secció les etiquetes estan mal imbricades: strong strong emphasised? what is this?. No és fàcil saber com s'ha d'interpretar això, a causa del problema anterior.
- 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.
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 Descobreix les eines de desenvolupador del navegador, i després torna.
En l'inspector de DOM pots veure quin aspecte presenta la representació d’aquest etiquetatge:
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 haurien de donar el mateix resultat):
- S’han donat etiquetes de tancament als paràgrafs i elements de llista.
- No està clar on s’ha de tancar el primer element , de manera que el navegador ha etiquetat cada bloc de text per separat que hi ha fins al final del document amb una etiqueta strong.
- El navegador ha resolt la imbricació d’etiquetes incorrecta de la següent manera:
```
strong
 strong emphasised?

 what is this?
```
- L'enllaç amb la cometa doble que falta s’ha eliminat del tot. L'últim element de la llista ara presenta aquest aspecte:
```
<li>
 Unclosed attributes: Another common source of HTML problems.
 Let's look at an example: 
</li>
```

Validació HTML

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?

La millor estratègia és començar per executar la pàgina HTML amb el servei de validació d’etiquetatge (Markup Validation Service), 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.

La pàgina d’inici del validador d’HTML

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.

Aprenentatge actiu: validació d’un document HTML

Provem-ho amb el nostre document de mostra.

En primer lloc, carrega el Markup Validation Service en una de les pestanyes del navegador, si encara no ho has fet.
Ves a la pestanya Validate by Direct Input.
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.
Prem el botó Check.

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

Llista dels resultats de la validació HTML del servei de validació d'etiquetatge de W3C

Interpretació dels missatges d'error

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.

"Consider adding a lang attribute to the html start tag to declare the language of this document." [Considera afegir un atribug lang a l'etiqueta d'inici html per declarar l'idioma del document]: No es tracta d'un error, sinó d'una advertència (warning). La recomanació és definir sempre l'idioma, i aquest "warning" explica com fer-ho.
"End tag li implied, but there were open elements" [Etiqueta final li 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.
"Unclosed element strong" [“Element strong 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.
"End tag strong violates nesting rules" [L'etiqueta de tancament strong 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.
"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.
"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:
```
example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>
```
Nota: 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.
"Unclosed element ul" [Element ul 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.

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.

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

Resum

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.

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