Depurar HTML

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

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 donarà a conèixer algunes eines que poden ajudar.

Requisits previs: Familiaritzar-se en HTML, s'explica per exemple en Inici en HTML, Fonaments de text HTML i Crear hipervincles.
Objectiu: Aprendre els conceptes bàsics de la utilització d'eines de depuració per trobar problemes en HTML.

Depurar no fa por

En escriure codi d'algun tipus, tot està molt bé en general, fins a aquest moment temut que és quan es produeix un error - s'ha fet alguna cosa malament, pel que el codi no funciona - no en absolut, o ben com ho volia. Per exemple, a continuació es mostra la informació d'un error en intentar compilar un senzill programa escrit en el llenguatge Rust.

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.En aquest cas, el missatge d'error és relativament fàcil d'entendre - "cadena de cometes dobles sense tancar". Si ens fixem en la programació, és probable que es pugui veure com println!(Hello, world!"); podria faltar lògicament una doble cometa. No obstant això, els missatges d'error es poden obtenir ràpidament, més complicats i menys fàcils d'interpretar quan els programes es fan més grans, i fins i tot el simple cas anterior pot semblar una mica intimidatori per a algú que no sap res sobre Rust.

La depuració no té per què ser aterridora, encara que - la clau per estar còmodes amb l'escritura i depuració de qualsevol llenguatge de programació o codi, és la familiaritat - tant amb el llenguatge i les eines.

HTML i depuració

HTML no és tan complicat d'entendre com Rust - HTML no es compila d'una forma diferent abans que el navegador analitzi i mostri el resultat (que és interpretat, no compilat.) I la sintaxi de l'element HTML és possiblement molt més fàcil d'entendre que un "llenguatge de programació real" com Rust, JavaScript o Python. Però, la forma en què els navegadors executant HTML és molt més permissiva que com s'executen els llenguatges de programació, que és alhora una bona i mala cosa.

Codi permissiu

Llavors, què entenem per permissiu? Doncs bé, en general, quan es fa alguna cosa malament en el codi, hi ha dos tipus principals d'error que vindran a través de:

  • Errors de sintaxi: Aquests són errors d'ortografia en el codi, que causen realment que el programa no s'executi, igual que l'error Rust que es mostra a dalt. Aquests en general es poden arreglar bé, sempre que estiguem familiaritzats amb les eines adequades, i saben el que signifiquen els missatges d'error!
  • Errors lògics: Aquests són errors en que la sintaxi és realment correcte, però el codi no fa el que es volia que fes, el que significa que el programa s'executa de manera incorrecta. Aquests són sovint més difícils de corregir que els errors de sintaxi, ja que no és un missatge d'error que es dirigeixi a la font de l'error.

HTML en si no té tendència a patir errors de sintaxi ja que en els navegadors en que s'executen són permissius, el que significa que el codi encara funciona fins i tot si hi ha errors de sintaxi present! Els navegadors han incorporat regles per indicar com interpretar erròniament el marcat escrit, de manera que s'obtindrà alguna cosa en marxa, encara que potser no sigui exactament el que s'esperava. Això, per descomptat, encara pot ser un problema!

Nota: HTML s'executa permissivament perquè quan es va crear la primera web, es va decidir permetre a la gent que la publicació dels seus continguts fos més important que fer que tota la sintaxi sigues absolutament correcta. El web probablement no seria tan popular com ho és avui, si hagués estat més estricta des del principi.

Aprenentatge actiu: estudiar codi permissiu

És hora d'estudiar la naturalesa permissiva de codi HTML per vosaltres mateixos.

  1. En primer lloc, fer-se amb una còpia de la nostra demostració debug-example i guardar-la en algun lloc a nivell local. Això ha està escrit deliberadament per nosaltres per tenir alguns errors en ella per explorar (es diu que el format HTML estar mal-format, en oposició a ben format.)
  2. A continuació, intenteu obrir-lo en un navegador - veureu alguna cosa com això: A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
  3. En un primer moment això no sembla gran cosa; Vegem el codi font per veure si podem esbrinar per què (només el contingut del cos mostra):
    <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>
  4. Anem a repassar els problemes que podem veure a:
    • Els elements paragraph i list item no tenen etiquetes de tancament. Pel que fa a la imatge de dalt, això no sembla haver afectat tan malament la representació del marcatge , ja que és fàcil deduir, on un dels elements ha d'acabar, i ha de començar una altra.
    • El primer element <strong> no té etiqueta de tancament. Això és una mica més problemàtic, ja que no és fàcil saber on se suposa que l'element acaba. De fet, la totalitat de la resta del text sembla haver estat fortament subratllat.
    • Aquesta secció està malament niada: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No és fàcil saber com s'ha d'interpretar, a causa del problema anterior.
    • El valor de l'atribut href té un tancament de dobles cometes que falta. Això sembla haver causat el major problema - l'enllaç no s'ha mostrat en absolut.
  5. Ara veurem com es mostra el marcat en el navegador, en oposició al marcat en el codi font. Per a això, podem utilitzar les eines de desenvolupador del navegador. Si esteu familiaritzats amb l'ús d'eines de desenvolupador del navegador, dediqueu uns minuts a revisar Discobreix les eines per desenvolupadors del navegador, i després torneu.
  6. En l'inspector DOM, es pot veure el marcat reproduït amb aquesta aparença: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
  7. Amb l'inspector DOM, explorarem el codi en detall per veure com el navegador ha tractat de corregir els errors HTML (vam fer la revisió a Firefox; altres navegadors moderns han de donar el mateix resultat):
    • Els paràgrafs i els elements de la llista s'han donat les etiquetes de tancament.
    • No està clar on el primer element <strong> ha d'estar tancat, de manera que el navegador ha envoltat cada bloc de text per separat amb la seva pròpia etiqueta strong, just a sota de la part inferior del document!
    • El niat incorrecte ha estat fixat pel navegador de la següent manera:
      <strong>strong
        <em>strong emphasised?</em>
      </strong>
      <em> what is this?</em>
    • L'enllaç, amb l'atribut de la doble cometa perduda, ha estat eliminat per complet. L'últim element de la llista només s'assembla a això:
      <li>
        <strong>Unclosed attributes: Another common source of HTML problems.
        Let's look at an example: </strong>
      </li>

Validació HTML

Així, veiem l'exemple anterior, volem assegurar-nos que realment el codi HTML està ben format! Però com? En un petit exemple com el que s'ha vist anteriorment, és bastant fàcil buscar a través de les línies i trobar els errors, però què passa amb un document HTML enorme, complex?

La millor estratègia és començar pel funcionament de la pàgina HTML mitjançant el Markup Validation Service - creat i mantingut pel W3C, l'organització que s'ocupa de les especificacions que defineixen HTML, CSS i altres tecnologies web. Aquesta pàgina web pren un document HTML com una entrada, passa a través d'ella, i dona un informa dient el que està malament en el HTML.

The HTML validator homepage

Per especificar el codi HTML a validar, es pot donar-li una adreça web perquè apunti a, pujar un arxiu HTML, o directament entra una mica de codi HTML.

Aprenentatge actiu: Validar un document HTML

Anem a donar-vos una oportunitat, i tenir un anar en la validació del document de mostra.

  1. En primer lloc, carregueu el Markup Validation Service en una de les pestanyes del navegador, si no ho està ja.
  2. Cliqueu on/activate de la pestanya Validate by Direct Input.
  3. Copieu la totalitat del codi del document de mostra (no només el cos) i enganxar-ho a l'àrea gran de text que es mostra en el Markup Validation Service.
  4. Premeu el botó Check.

Això ha de donar-vos una llista d'errors i altres dades.

A list of of HTML validation results from the W3C markup validation service

Interpretar els missatges d'error

La llista de missatges d'error que són presentats per el validador solen ser útils, de vegades no tan útils; amb una mica de pràctica es pot trobar la manera d'interpretar aquests per arreglar el codi. Veurem els missatges d'error i el que signifiquen. Veurem que cada un dels missatges ve amb un número de línia i columna, per ajudar a localitzar l'error més fàcilment.

  • L'etiqueta final li és implícita, però hi havia elements oberts (2 instàncies): Aquest missatge indica que un element està obert i que ha de ser tancat. L'etiqueta final es implícita, però en realitat no existeix. La informació de línia/columna apunta a la primera línia després de la línia en la qual l'etiqueta de tancament ha d'estar realment, però aquest és un bon indici, suficient per veure el que està a dalt.
  • L'element strong sense tancar: Això és realment fàcil d'entendre - un element <strong> està sense tancar, i la informació de línia/columna apunta directament on està.
  • L'etiqueta final strong viola les regles de niat: Aquest assenyala els elements niats de forma incorrecta, i la informació de línia/columna assenyala on és.
  • S'ha arribat al final de l'arxiu havent-hi un valor d'atribut. Ignorant l'etiqueta: Aquest és bastant 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 pel fet que el final de l'arxiu apareix dins del valor de l'atribut. De fet el navegador no fa que l'enllaç ens doni una pista pel que fa a quin element és el culpable.
  • El final de l'arxiu vist i havia elements oberts: Això és una mica ambigu, però bàsicament es refereix al fet que hi ha elements oberts que necessiten ser tancats correctament. Les línies de números 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'un element obert:
    example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>

    Nota: Un atribut que li falta una marca de cometes de tancament pot resultar un element obert, ja que la resta del document és interpretat com el contingut de l'atribut.

  • L'element ul sense tancar : Això no és molt útil, ja que l'element <ul> està tancat correctament. Aquest error es produeix perquè l'element <a> no està tancat, a causa de la falta de la marca de cometes de tancament.

Si no podeu treballar en el que significa cada missatge d'error, no es preocupeu per ell - una bona idea és tractar de fixar alguns errors a la vegada, a continuació, intenteu tornar a validar el codi HTML per mostrar els errors que queden. De vegades, la fixació d'un error anterior ens pot lliurà de diversos altres missatges d'error - diversos errors sovint poden ser causats per un sol problema, en un efecte dòmino.

Sabreu quan tots els errors están fixats quan vegeu el següent banner a la seva sortida:

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

Sumari

Així que aquí ho tenim, una introducció a la depuració de HTML, que ha de donar-vos algunes habilitats útils a comptar quan comenceu a depurar CSS, JavaScript i altres tipus de codi, més endavant, en la vostre carrera. Això també marca el final del mòdul Introducció a HTML, articles d'aprenentatge - ara podeu realitzar una prova vosaltres mateixos amb les nostres avaluacions: la primera d'elles està vinculada a continuació.

Document Tags and Contributors

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