Az elavult HTML-tagek azok az elemek és attribútumok, amelyeket a HTML5 szabvány kivett a specifikációból, mert megjelenést írnak le a jelentés helyett. Ilyen a <center>, a <font>, a <marquee>, a <big>, a <strike> vagy a táblázatokon használt bgcolor és align.
Miért tűntek el a szabványból
A HTML feladata a tartalom szerkezetének leírása. A megjelenés a CSS dolga. A kilencvenes évek végén ez a két réteg még összekeveredett, ezért születtek formázó tagek.
A HTML5 ezt a keveredést szüntette meg. A böngészők a legtöbb elavult elemet máig megjelenítik, kompatibilitási okból. Ez a megtűrés viszont nem támogatás: a validátor hibát jelez, és a jövőbeli renderelés nem garantált.
Hogyan működik a gyakorlatban
A <font color="red" size="5"> pontosan azt tudja, amit egy CSS-osztály. A különbség az, hogy a CSS-t egy helyen szerkeszted, a <font> tageket pedig több száz sorban. A technikai adósság itt kamatozik: minden design-változtatás kézi munkává válik.
A vizsgálatokban ezt tipikusan régi sablonokban, e-mail sablonból bemásolt szövegekben és WYSIWYG-szerkesztővel írt cikkekben látjuk. Sok magyar KKV-oldalon a blogbejegyzések tartalmaznak <font> tageket, mert valaki Wordből másolt be szöveget.
Mit jelent ez a gépi olvasónak
Egy nyelvi modell és egy keresőrobot a tagekből próbálja kitalálni a tartalom szerkezetét. A <center> semmit nem mond a jelentésről. A <strong> vagy a <h2> viszont igen.
Az elavult tagek önmagukban nem rontják a rangsorolást. A jelentésvesztés viszont igen: ha a kiemelést <font size="6"> adja <h2> helyett, a címhierarchia gépi szempontból eltűnik.
Röviden: az elavult tagek nem büntetést hoznak, hanem azt jelzik, hogy a kód megjelenést mond ott, ahol jelentést kellene mondania.
Technikai példa
Elavult megoldás, ahogy régi sablonokban látni:
<center>
<font face="Arial" size="5" color="#c00000">Akciós ajánlataink</font>
</center>
<table bgcolor="#f5f5f5" align="center" width="800">
<tr><td><b>Kiemelt termék</b></td></tr>
</table>
Ugyanez modern HTML-lel és CSS-sel. A jelentés a tagekből jön, a megjelenés az osztályokból:
<h2 class="promo-title">Akciós ajánlataink</h2>
<div class="promo-box">
<p><strong>Kiemelt termék</strong></p>
</div>
<style>
.promo-title { text-align: center; color: #c00000; font-size: 1.5rem; }
.promo-box { max-width: 800px; margin: 0 auto; background: #f5f5f5; }
</style>
A <h2> most szerkezetet ad a címhierarchiának, a max-width pedig mobilon is működik a fix width="800" helyett.
Darabszám-ellenőrzés parancssorból:
curl -s https://pelda.hu | grep -oE '<(font|center|marquee|big|strike)\b' | sort | uniq -c
Gyakori kérdések
Büntet a Google az elavult HTML-tagekért?
Nincs ilyen büntetés. A Google renderel, nem validál. A hátrány közvetett: ha a formázó tagek helyettesítik a címsorokat és a kiemelést, a tartalom szerkezete gépileg elveszik. Ezen kívül az oldal jellemzően nem reszponzív, ami mobilon rontja a használhatóságot.
A böngésző megjeleníti a <font> taget, akkor miért baj?
A megjelenítés kompatibilitási szívesség, nem szabványtámogatás. A HTML5 specifikáció obsolete elemnek jelöli, tehát a jövőbeli viselkedés nem garantált. A gyakorlati probléma inkább a karbantartás: a formázás oldalanként szét van szórva.
Elég, ha a sablont javítom?
Nem. A tapasztalat szerint a legtöbb elavult tag a tartalmakban van, nem a sablonban. Termékleírások, régi blogcikkek, statikus aloldalak. A sablon javítása után futtass újra ellenőrzést, és nézd meg a tartalmi oldalakat is.
Mennyire sürgős ez a javítás?
Alacsony prioritás. Önállóan nem éri meg fejlesztői órát ráfordítani. Akkor javítsd, amikor úgyis hozzányúlsz a sablonhoz vagy a tartalomhoz. Ha viszont sok van belőle, az a régi kódbázis jelzése, és érdemes a
technikai adósságot felmérni.
A <b> és az <i> is elavult?
Nem, mindkettő érvényes HTML5 elem, de megváltozott a jelentésük. A <b> stilisztikai kiemelés fontosság nélkül, az <i> pedig eltérő hangvételű szöveg. Ha valódi fontosságot jelölsz, <strong> és <em> a helyes választás.
