DOCTYPE és a HTML nyelvválasztás
Amikor egy új weboldalt készítünk, az első sor mindig a DOCTYPE deklaráció kell, hogy legyen. Ez meghatározza, hogy milyen HTML verziót használunk.
1️⃣ Mi az a <!DOCTYPE html> és miért van rá szükség?
A DOCTYPE (Document Type Declaration) nem egy HTML elem, hanem egy utasítás a böngésző számára, hogy modern HTML5 módban dolgozzon.
Ha nem adjuk meg, a böngésző kompatibilitási módba léphet, ami azt jelenti, hogy az oldal eltérően jelenhet meg a különböző böngészőkben.
👉 A HTML5-ben használt DOCTYPE nagyon egyszerű:
<!DOCTYPE html>
🔹 Régebbi verziókban bonyolultabb DOCTYPE deklarációk voltak, például:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN”
„http://www.w3.org/TR/html4/loose.dtd”>
De HTML5-ben már csak egy sor kell, mert a böngészők ezt automatikusan felismerik.
2️⃣ A <html> címke és a nyelv beállítása
A második sor egy HTML fájlban mindig a <html> címke, amely az egész weboldal szerkezetének alapját adja, és tartalmazza a fej- és törzsrészt.
A helyes szerkezet:
<!DOCTYPE html>
<html lang=”hu”>
👉 Miért kell megadni a lang attribútumot?
- 🔍 Keresőoptimalizálás (SEO): A keresőmotorok jobban értik a tartalom nyelvét.
- 🧑🦯 Hozzáférhetőség (Accessibility): A képernyőolvasók pontosan tudják, milyen nyelven kell felolvasni a szöveget.
- 🌎 Többnyelvű oldalak támogatása: A böngészők a helyes karakterkódolást alkalmazzák.
A lang attribútum az ISO 639-1 szabvány szerinti nyelvkódokat használja. Ha egy adott ország nyelvi változatát akarod megadni, akkor az ISO 3166-1 alpha-2 országkódokat is hozzáadhatod, például: en-US, en-GB, fr-CA, es-MX
Ha például egy angol weboldalt készítesz:
<html lang=”en”>
Ha pedig német nyelvűt:
<html lang=”de”>
3️⃣ Teljes HTML vázlat a DOCTYPE és a nyelvi beállítással
Egy teljes HTML fájl így kezdődik:
<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<title>Weboldal címe</title>
</head>
<body>
<h1>Üdvözöllek a weboldalon!</h1>
</body>
</html>
🔹 Ebben már benne van: ✔ A modern HTML5 DOCTYPE
✔ A nyelvi beállítás (lang="hu")
✔ Az alapvető <head> és <body> szerkezet
🔍 Miért fontos a <!DOCTYPE html>?
✔ Segít a böngészőknek eldönteni, hogyan jelenítsék meg az oldalt.
✔ Kiküszöböli a kompatibilitási problémákat, biztosítva a modern webes szabványokat.
✔ Könnyen használható, nincs szükség további attribútumokra.
📌 Összegzés
✅ A <!DOCTYPE html> elengedhetetlen, hogy a böngésző modern módon dolgozzon.
✅ A <html lang="hu"> beállítás segíti a SEO-t és az akadálymentesítést.
✅ Ez a szerkezet minden HTML dokumentum alapja.
🔗 Belső linkek kapcsolódó bejegyzésekhez
Ha további alapvető HTML elemekről szeretnél olvasni, nézd meg a következő cikkeket is:
📌 HTML struktúra és szerkezet – Hogyan épül fel egy HTML dokumentum?
📌 HTML <head> címkék – A keresőmotorok és a böngészők számára fontos információk.