HTML head – Mi megy a fej részbe?

Biztosan ismered már a HTML head elemét, de még nem biztos, hogy pontosan tudod, hogy miket helyezhetünk el benne. Nézd meg ezt a cikket és tudd meg, hogy pontosan milyen elemeket helyezhetünk a HTML head, azaz fejrészében.

HTML head, fej használatát szemléltető kép

HTML head – Mi megy a fej részbe?

A HTML dokumentumok egyik legfontosabb eleme a HTML head. A HTML head, azaz fej részébe olyan elemek mennek, amelyek konkrétan nem jelennek meg a weboldalon, de a weboldal működésében, illetve megjelenésében nagyon fontos szerepet játszanka. Ilyen elemek például a <title>, a <style>, a <meta>, a <link>, a <script> vagy a <base>.

Mi is az a <head> elem?

A <head> elem metaadatokat tárol. A metaadatok olyan adatok, amelyek valamilyen jelentéssel bírnak, de nem jelennek meg a weboldalon (pl. szöveg, kép formájában). Ezek a metaadatok határozzák meg a dokumentum (az adott oldal) címét, karakterkódolását, stílusát és a weboldal egyéb részeit is.

A head a <html> elem után és a <body> elem előtt helyezkedik.

HTML head-be helyezhető elemek

Most pedig nézzük át azokat a leggyakoribb elemeket, amelyeket a HTML head-be szoktunk helyezni.

<title>

Kétségkívül ez a leggyakoribb HTML elem, amit a head-be helyezünk. A keresők számára nagyon fontos a HTML TITLE elem, hiszen ez is segít számukra beazonosítani, hogy miről szól az adott oldal.

Példa

<title>CÍM<title>

Amit a <title> elem közé írunk, az fog a böngészőnk fülében megjelenni.


>>A HTML title-ről itt olvashatsz részletesebben. <<

<style>

A style elemet arra használjuk, hogy olyan stílusbeállításokat határozzunk meg benne, amelyek érvényesek lesznek a weboldalunkra. Például beállíthatjuk benne, hogy a weboldalunk szövege piros legyen, míg a háttér sárga.

Példa

<style>
      STÍLUSMEGHATÁROZÁSOK;
</style>

A HTML <style>-ról és a stílusbeállításokról itt olvashatsz részletesebben.

<link>

A link elem meghatározza a kapcsolatot a jelenlegi dokumentum és egy külső forrás között.

Példa

<link rel="stylesheet" href="stilus.css">

A felső kód segítségével megmondtam a böngészőnek, hogy a stilus.css egy stílusfájl, amelyet használnia kell.

<meta>

A meta elemet arra használják, hogy meghatározza a weboldal egyes “adatait”. Például: karakterkódolás, oldal leírás, kulcsszavak stb.

Ezek az adatok a weboldalon nem fognak megjelenni, de a böngésző és a keresők számára rendkívül hasznosak.

Példa karakterkódolásra

<meta charset="UTF-8">

Példa kulcsszó megadásra

<meta name="keywords" content="kulcsszo1, kulcsszo2">

Példa oldal leírásra

<meta name="description" content="Ide jön az oldal leírása.">

<script>

A HTML nyelvben lehetőségünk van a head részbe elhelyezni script-et. A script-ek JavaScript-ben íródnak és valamilyen műveletet végeznek el. Például: egy gomb megnyomásával egy területre kiírunk egy tetszőleges szöveget.

Példa

<script>
function scriptNeve() {
  document.getElementById("terulet").innerHTML = "Tetszőleges szöveg.";
}
</script>

<base>

A base elemmel beállíthatjuk, hogy relatív útvonal esetén a böngésző mit tekintsen az URL alapjának, illetve megadhatjuk, hogy az adott oldalon hogyan nyíljanak meg a hivatkozások.

Példa elérési útvonal alap beállításra

<base href="https://www.webiskola.hu/">

Példa megnyitás módjának beállítására

<target="_blank">

Példa mindkettő együttes használatára

<base href="https://www.webiskola.hu/" target="_blank">