<head> – a weboldal láthatatlan, de kulcsfontosságú része
A <head> címke a HTML dokumentum egyik legfontosabb része, amely a weboldal működéséhez és megjelenítéséhez elengedhetetlen információkat tartalmaz. Bár a felhasználók nem látják közvetlenül a tartalmát, a keresőmotorok, a böngészők és a közösségi oldalak számára kulcsfontosságú elemeket hordoz. Nézzük meg, mit tartalmaz és hogyan érdemes használni!
📌 Mit tartalmaz a <head>?
A <head> szakaszban olyan metaadatokat és beállításokat adunk meg, amelyek befolyásolják a weboldal megjelenését, működését és keresőoptimalizálását. Ezek közé tartoznak:
1️⃣ Az oldal címe – <title>
A <title> címke határozza meg a weboldal címét, amely a böngésző fülén jelenik meg. Fontos szerepe van a keresőoptimalizálásban (SEO) is, mert a Google ezt a címet jeleníti meg a találati listában.
🔹 Példa:
<title>Digitális Felfedezők – HTML Tanfolyam</title>
2️⃣ Metaadatok – <meta>
A <meta> címkék segítenek a keresőmotoroknak és a böngészőknek a weboldal megfelelő értelmezésében.
✔ Karakterkódolás beállítása:
<meta charset= „UTF-8”>
Ez biztosítja, hogy a weboldalon lévő ékezetes karakterek és speciális szimbólumok megfelelően jelenjenek meg.
✔ Reszponzivitás és mobilbarát beállítások:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Ez a beállítás gondoskodik róla, hogy a weboldal megfelelően jelenjen meg különböző eszközökön (pl. mobilon és tableten).
✔ SEO és keresőmotorok információi:
<meta name= „description” content=”Tanuld meg a HTML alapjait!”>
A meta description rövid leírást ad a weboldal tartalmáról, amit a keresőmotorok a találati listában jelenítenek meg.
✔ Kulcsszavak (bár a Google már nem veszi figyelembe):
<meta name= „keywords” content=”HTML, webfejlesztés, programozás”>
3️⃣ CSS és betűtípusok linkelése – <link>
A <link> címkével külső CSS fájlokat, betűtípusokat vagy ikonokat kapcsolhatunk a weboldalhoz.
✔ Külső CSS csatolása:
<link rel=”sytelsheet” href=”style.css”>
Ezzel a weboldal a style.css fájlban található stílusokat fogja használni.
✔ Google Fonts betűtípus beillesztése:
<link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” rel=”stylesheet”>
4️⃣ JavaScript fájlok csatolása – <script>
A <script> címkével JavaScript fájlokat adhatunk hozzá a weboldalhoz.
✔ Példa:
<<script src=”script.js” defer></script>
A defer attribútum gondoskodik arról, hogy a JavaScript fájl csak a HTML betöltése után fusson le.
📝 Összegzés
A <head> egy weboldal háttérben működő, de elengedhetetlen része. Itt állíthatjuk be:
✅ Az oldal címét (<title>)
✅ A keresőmotorok számára fontos leírásokat (<meta> tag-ek)
✅ A mobilbarát megjelenést (viewport)
✅ A CSS stíluslapokat (<link>)
✅ A külső JavaScript fájlokat (<script>)
Ha jól használod a <head> elemet, az oldalad gyorsabb, optimalizáltabb és könnyebben megtalálható lesz a keresőkben. 🚀
📌 További olvasnivaló:
🔗 <header> címke
🔗 Az <body> címke szerepe