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.

0
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>.

Tartalomjegyzék

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> elem

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

HTML kód

<title>CÍM<title>
Code language: HTML, XML (xml)

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> elem

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

HTML kód

<style>
      STÍLUSMEGHATÁROZÁSOK;
</style>
Code language: HTML, XML (xml)

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

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

Példa

HTML kód

<link rel="stylesheet" href="stilus.css">
Code language: HTML, XML (xml)

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> elem

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

HTML kód

<meta charset="UTF-8">
Code language: HTML, XML (xml)

Példa kulcsszó megadásra

HTML kód

<meta name="keywords" content="kulcsszo1, kulcsszo2">
Code language: HTML, XML (xml)

Példa oldal leírásra

HTML kód

<meta name="description" content="Ide jön az oldal leírása.">
Code language: HTML, XML (xml)

<script> elem

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

HTML kód

<script>
function scriptNeve() {
  document.getElementById("terulet").innerHTML = "Tetszőleges szöveg.";
}
</script>
Code language: HTML, XML (xml)

<base> elem

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

HTML kód

<base href="https://www.webiskola.hu/">
Code language: HTML, XML (xml)

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

HTML kód

<target="_blank">
Code language: HTML, XML (xml)

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

HTML kód

<base href="https://www.webiskola.hu/" target="_blank">
Code language: HTML, XML (xml)

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék