HTML és CSS kódok ellenőrzése

Az oldalaink készítésekor használt HTML és CSS kódok szabályait szabványok rögzítik, amelyek betartására mindenképpen törekedni kell, ha szabályos oldalakat akarunk készíteni.

Mindkét szabvány leginkább csak angolul érhető el és igen terjedelmesek (HTML5, CSS3). Mit tehetünk ha mégis szeretnénk szabványkövető oldalakat készíteni?

Egyrészt tanuljunk a lehető legautentikusabb forrásokból (pl. w3schools.com, a világ egyik legnagyobb webfejlesztői oldala).

Másrészt ellenőrizzük a kódunkat. Ehhez már régóta biztosít eszközöket a W3C szervezet:

• HTML validator (ellenőrző)
• CSS validator

Az előző példa ellenőrzésének eredménye:

Layout-1: HTML valid

Layout-1: CSS3 valid

Ha ellenőriztük a kódunkat, és érvényesnek (valid) bizonyult, akkor bátran tehetünk egy erre vonatkozó plecsnit az oldal lábrészébe.

Pl. CSS-hez:

<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Érvényes CSS!" />
    </a>
</p>

vagy:

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Érvényes CSS!" />
    </a>
</p>

Eredménye:

 vagy 

További plecsnik (badge): https://www.w3.org/QA/Tools/Icons

HTML5-höz nem ad plecsnit a validátor, csak a korábbi XHTML v1.x-hez vagy régebbi HTML verziókhoz. Ehelyett HTML5-höz külön logó készítő oldalt csináltak: Badge Builder 5000

Pl.:

<a href="http://www.w3.org/html/logo/">
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="165" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics">
</a>

Eredménye: