HTML hibák, és javításuk

Szintaktikai hibák
Szintaktikai hibának számít, ha a HTML dokumentum forráskódja hibás.
Ezt rendszerint nem vesszük észre, a hibák egy részének jelenléte nem okoz vizuális eltérést, vagy a böngészők sikeresen javítják a hibát az oldal betöltésénél.
A hibákat HTML validátorral, vagy fejlesztőeszközeink beépített hibakeresőjével tudjuk felderíteni.
Miért kell elkerülni a szintaktikai hibákat?
Nem minden böngésző tudja kijavítani, egy kevésbé elterjedt böngészőben, amiben nem teszteltük jelentkezhet a hiba.
A fejlesztés későbbi fázisát akadályozza, eleve biztosabb mindent szabványosan felépíteni, hogy egy esetleges hiba miatt később ne ütközzünk nem várt akadályokba.
Akadályozza a keresőket az oldal feldolgozásában.
Jellemző hibák
Kötelező elemek hiányoznak a dokumentumból.
Pédául nincs !DOCTYPE. Vagy hiányoznak az alapvető elemek: html head body.
A dokumentum típus meghatározásának hiányában a böngésző pontos "tervrajz" nélkül próbálja összerakni a weboldalt, ez a quirks mode, ami egy erőforrás igényes működés, feleslegesen lassítja a felhasználó gépét.
A modern böngészők hibajavító funkciói automatikusan létrehozzák head elemet, ha az nincs benne a HTML dokumentumban (a régebbi böngészők erre nem képesek).
Blokkos elem van szövegközi elembe ágyazva.
1
<!-- Hibás: -->
2
<a href="#"><h1>Körtefa</h1></a>
3
​
4
<!-- Helyes: -->
5
<h1><a href="#">Körtefa</a></h1>
Copied!
A blokkos (block) és a szövegközi (inline) elemek megjelenítése nagyban eltér egymástól. A blokkos elemek 100%-ban kitöltik vízszintesen a böngésző ablakot, és maguk előtt, és után törést képeznek (mellettük nem lehet semmi). A szövegközi elemek úgy jelennek meg mint egy szó a folyóírásban, így ha szövegközi elembe ágyazunk blokkos elemet arra nincs egyértelmű és praktikus megjelenítési recept, így ezt a HTML szabványok tiltják.
Lezáró tag hiányzik, vagy a lezáró tag-ből hiányzik a "/".
1
<!-- Hibás: -->
2
<div>
3
    <p>Almafa
4
</div>
5
​
6
<!-- Helyes: -->
7
<div>
8
    <p>Almafa</p>
9
</div>
Copied!
Elemek rosszul vannak egymásba ágyazva
1
<!-- Hibás: -->
2
<h1><span>Szilvafa</h1></span>
3
​
4
<!-- Helyes: -->
5
<h1><span>Szilvafa</span></h1>
Copied!
Kötelezően megadandó tulajdonságok hiányoznak a HTML elemekből.
1
<!-- Hibás: -->
2
<img src="fa.jpg">
3
​
4
<!-- Helyes: -->
5
<img src="fa.jpg" alt="Virágos kőris, pompás lombkoronával">
Copied!
​Elavult elemek használata.
1
<!-- Hibás: -->
2
<center>Középre igazított szöveg</center>
3
​
4
<!-- Hibás: -->
5
<blink>Villogó szöveg</blink>
Copied!
A HTML szabvány korai fejlődési szakaszában számos elem, és tulajdonság szolgált dekorációs, megjelenési célt, ma már szinte teljesen elszeparálódott a megjelenés a HTML-től, erre a célra a CSS szolgál, így egyes elemek elavulttá váltak. Lista az elavult elemekről: MDN - ​Obsolete and deprecated elements​
Szemantikai "hibák"
Szemantikai hiba, ha adott célra nem az annak megfelelő elemeket használjuk.
Például szemantikus jelentéstartalommal rendelkező elemek helyett jelentés, vagy szerepkör nélküli elemekből építkezünk.
Nem kapunk rá hibát a validátorban, viszont egyéb szempontokból tekintve nem optimális a megoldás.
Mik lehetnek ezek a szempontok?
SEO - Search Engine Optimalization
Legfontosabb a keresőprogramok megítélése, a szemantikus elemek megkönnyítik a tartalom feldolgozását a keresők számára, ezért honorálják a számukra könnyen olvasható tartalmakat.
Usability - Akadálymentesítés
Szemantikus elemek könnyítik a tartalom gépi feldolgozását, így például a felolvasóprogramok is képesek értelmezni azt.
Kód olvashatóság
Szemantikus elemekkel könnyebben olvasható a forráskód (tudjuk, minek mi a feladata), ami ebben a lényeges, hogy nem csak a szerző, de egy másik fejlesztő is érteni fogja az elemek szerepét.
Jellemző hibák
Bekezdések helyett sortöréssel van tagolva a szöveg.
1
<!-- Hibás: -->
2
<p>Körtefa.
3
<br>
4
<br>
5
Almafa</p>
6
​
7
<!-- Helyes: -->
8
<p>Körtefa.</p>
9
<p>Almafa</p>
Copied!
Lista elemek helyett sortörésekkel létrehozott lista.
1
<!-- Hibás: -->
2
<p>* Körtefa<br>
3
* Almafa<br>
4
* Barackfa<br>
5
* Narancsfa</p>
6
​
7
<!-- Helyes: -->
8
<ul>
9
    <li>Körtefa</li>
10
    <li>Almafa</li>
11
    <li>Barackfa</li>
12
    <li>Narancsfa</li>
13
</ul>
Copied!
Nem szemantikus elemekkel létrehozott kiemelések a szövegben.
1
<!-- Hibás: -->
2
<p>Ez egy <b>fontos</b> szöveg.</p>
3
​
4
<!-- Helyes: -->
5
<p>Ez egy <strong>fontos</strong> szöveg.</p>
Copied!
Címek nem cím elemekből felépítve, CSS-el cím szerűre formázva.
1
<!-- Hibás: -->
2
<div class="fo-cim">Ez a főcím</div>
3
​
4
<!-- Helyes: -->
5
<h1>Ez a főcím</h1>
Copied!

HTML - Previous

HTML elemek

Next - CSS

Mi az a CSS?

Last modified 3yr ago

Export as PDF

Copy link

Contents

Szintaktikai hibák

Miért kell elkerülni a szintaktikai hibákat?

Jellemző hibák

Szemantikai "hibák"

Mik lehetnek ezek a szempontok?

Jellemző hibák