W3C Markup Validator
Etsi ja korjaa HTML-virheet W3C Markup Validation Servicellä
W3C Markup Validator on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä validaattori tarkistaa
W3C Markup Validator (validator.w3.org) jäsentää HTML:n virallista määritystä vasten ja ilmoittaa jokaisesta määritysrikkeestä: sulkemattomista tageista, virheellisestä sisäkkäisyydestä (esimerkiksi <p>-elementti toisen <p>-elementin sisällä), puuttuvista pakollisista attribuuteista (img ilman alt-attribuuttia), tunnistamattomista elementeistä ja monista muista ongelmista.
Miksi validointi on tärkeää
Virheellinen HTML saattaa näkyä nykyään oikein kaikissa selaimissa, mutta kukin selain voi korjata virheet omalla tavallaan. Chromessa hyvältä näyttävä sisältö saattaa rikkoutua Firefoxissa. Kelvollinen HTML tuottaa ennustettavan ja yhdenmukaisen renderöinnin ja välttää yllättävää toimintaa ruudunlukijoissa, hakukoneiden indeksointiroboteissa ja sähköpostiohjelmissa.
Kolme tapaa lähettää
Validoi URL-osoitteen avulla liittämällä sivun URL-osoite, lataamalla tiedosto tai syöttämällä sisältö suoraan liittämällä HTML. URL-osoite sopii parhaiten tuotantosivuille, kun taas suora syöttö on hyödyllinen kehityksen aikana, kun tiedosto ei ole vielä saatavilla verkossa.
Tulosten lukeminen
Virheissä ilmoitetaan rivinumero, virheen aiheuttaneen merkinnän katkelma ja selitys. Korjaa virheet ylhäältä alas, sillä monet virheet ovat seurausta yhdestä aiemmasta virheestä. Kun olet korjannut ensimmäiset virheet, suorita validointi uudelleen ja tarkista, mitkä varoitukset ovat edelleen aiheellisia.
Varoitukset ja virheet
Virheet ovat määritysrikkeitä, jotka saattavat rikkoa renderöinnin. Varoitukset koskevat epäilyttäviä rakenteita, jotka ovat teknisesti kelvollisia mutta todennäköisesti tahattomia, kuten kirjoitusvirhettä muistuttavia attribuuttien nimiä ja saavutettavuuteen liittyviä huomautuksia. Käsittele virheet pakollisina korjauksina ja varoitukset tutkimisen arvoisina.
Yleiset virheet
img-elementiltä puuttuva alt-attribuutti. Sulkematon itsestään sulkeutuva tagi (<br> vanhan <br/>-muodon sijaan, joka on myös kelvollinen). Sivulla on useita samaan id-arvoon viittaavia elementtejä. Lomakkeen label-elementiltä puuttuu input-elementin id-arvoa vastaava for-attribuutti. Sisäkkäiset vuorovaikutteiset elementit (painike a-elementin sisällä). Nämä viisi aiheuttavat suurimman osan validaattorin ilmoituksista.
Mallipohjien validointi
Jos HTML-koodisi tuotetaan mallipohjilla, validoikaa lopullinen tuloste eli renderöity sivu mallipohjan lähdekoodin sijaan. {{ }}-paikanvaraaja ei ole kelvollista HTML-koodia — vain moottorin tuottamalla sisällöllä on merkitystä. Suorittakaa validaattori CI:ssä testikoontiversiosta renderöidyille sivuille.
html-validate CLI
CI-integraatiota varten käyttäkää html-validate npm -pakettia: npx html-validate "public/**/*.html" validoi kaikki koontiversion sivut. Määrittäkää säännöt tiedostossa .htmlvalidate.json. Asettakaa koontiversio epäonnistumaan validoinnin regressioiden vuoksi.
Stylelint ja lähdekoodin linttaus
Kirjoitushetkellä tehtävä linttaus (CSS:n stylelint ja Reactin eslint-plugin-jsx-a11y) havaitsee monia ongelmia ennen kuin ne päätyvät validaattoriin. Yhdistäkää tämä CI:n päästä päähän ulottuvaan validointiin kerroksittaisen suojauksen saavuttamiseksi — havaitkaa useimmat ongelmat varhain ja loput ennen julkaisua.
Mitä validointi EI havaitse
Validointi tarkistaa merkintäkielen oikeellisuuden, ei semantiikkaa. Sivu, jonka kaikki otsikot ovat <h6>-elementtejä, on kelvollista HTML-koodia mutta semanttisesti huono. Lighthouse-saavutettavuusauditoinnit ja manuaalinen tarkistus havaitsevat semanttiset ongelmat, joita validaattori ei löydä.
Quirks Mode -varoitus
Puuttuva <!doctype html> käynnistää Quirks Moden, jossa selaimet käyttävät vanhaa yhteensopivuuskerrosta, joka rikkoo modernin CSS:n. Validaattori ilmoittaa puuttuvasta doctype-määrityksestä ensimmäisenä virheenä; älkää koskaan julkaisko sivua ilman doctype-määritystä.
Jatkuva validointi
Suorittakaa validointi jokaiselle PR:lle GitHub Actionsin avulla: asentakaa html-validate, suorittakaa se koontiversiota vastaan ja hylätkää PR, jos virheitä esiintyy. Uudet virheet havaitaan katselmoinnin yhteydessä sen sijaan, että ne kertyisivät kuukausien ajan ja muuttuisivat myöhemmin ylivoimaisiksi korjata.
Tietotesti
Miksi puuttuva <!doctype html> -määritys on W3C-validaattorille niin merkittävä?
Yhteenveto
W3C Markup Validator jäsentää HTML-koodin määrittelyn mukaisesti ja ilmoittaa virheellisistä merkinnöistä. Käyttäkää sitä verkkokäyttöliittymän kautta yksittäisiin tarkistuksiin ja html-validate CLI:tä CI:ssä jatkuvaan kattavuuteen. Yleisiä ongelmia ovat puuttuva alt-attribuutti, päällekkäiset id-arvot, puuttuva doctype-määritys ja sisäkkäiset vuorovaikutteiset elementit. Validointi havaitsee merkintäkielen virheet; yhdistäkää se Lighthouseen ja manuaaliseen tarkistukseen semanttisen ja saavutettavan laadun varmistamiseksi.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”W3C Markup Validator” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “W3C Markup Validator”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”W3C Markup Validator”?
Etsi ja korjaa HTML-virheet W3C Markup Validation Servicellä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”W3C Markup Validator”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- W3C Markup Validator
- Lighthousen HTML-auditointi
- Pa11y ja axe saavutettavuustestauksessa
- HTML-snapshot-testaus