HTML elemek: Minden, amit tudnod kell a HTML-elemekről

Ebben a cikkben elmagyarázzuk, hogy mik azok a HTML elemek. Továbbá megmutatjuk a leggyakrabban használt HTML-elemeket.

Mi az a a HTML elem? HTML elem magyarázó kép

HTML elemek: Minden, amit tudnod kell a HTML-elemekről



Mit nevezünk HTML elemnek?

Definíció szerint: ,,A web-programozásban HTML-elemnek nevezik a HTML dokumentumok szerkezeti elemeit, amelyek lehetővé teszik a tartalom hierarchikus elrendezését.”

A HTML-elemek az alábbi részekből állnak:
1. kezdőcímke: másképp kezdő tag, ez jelöli az elem kezdetét
2. attribútum(ok) és érték(ek): vagy jellemző(k), ezek határozzák meg az elem tulajdonságait
3. tartalom: ez jelenítődik meg
4. zárócímke: másképp zárótag, ez jelöli az elem végét

Azonban vannak olyan HTML elemek, amelyek nem rendelkeznek záró taggel, illetve tartalmi résszel sem, ilyen például az <IMG>.

Mielőtt megnéznénk, hogy hogy néznek ki a HTML-elemek, tisztázzuk, hogy a HTML elemek nem kis- és nagybetű érzékenyek, azaz az <IMG> és az <img> tagek ugyanazt jelentik és teljesen ugyanúgy működnek.


Hogy néz ki egy HTML elem?

Egy HTML elem magyarázatát itt láthatjátok.

Mi az a a HTML elem? HTML elem magyarázó kép


Egy HTML-elem “sablonja” így néz ki:

<KEZDŐCÍMKE ATTRIBÚTUM="ÉRTÉK">TARTALOM</ZÁRÓCÍMKE>


Nézzünk egy példát:

HTML kód

<a href="webiskola.hu">WEBiskola</a>

Eredmény

WEBiskola

Vannak viszont olyan HTML-elemek, amelyekből hiányoznak az attribútumok. Ezeket nem muszáj mindig minden esetben megadnunk. Például az előző példában muszáj volt megadni, hiszen az <a> elemnek muszáj tudnia, hogy hova vigyen tovább, de például azt a tulajdonságát már nem kötelező megadnunk, hogy új ablakban vagy a saját ablakában nyíljon meg. De akár ezt is megadhatjuk.

Továbbá vannak olyan elemek, amelyeknek nem kell záró taget megadnunk. Ilyen például a <BR> és az <IMG>.

HTML kód

<IMG src="https://webiskola.hu/kep.jpg">

Eredmény

kep

Alapvető HTML elemek

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>
</html

<!DOCTYPE html>: Ez a sor határozza meg, hogy ez egy HTML dokumentum lesz, ezzel üzenve a böngészők számára.
<html>: Ez a HTML fájlunk gyökéreleme, kötelező ennek következnie a !DOCTYPE html rész után.
<head>: Ezt magyarul fejnek, fejszekciónak vagy fejrésznek hívjuk. Alapvető információkat tartalmaz a HTML oldalunkról. Például a következő szekciót.
<body>:
 Ez a dokumentum “test” része, ezután kell írni a weboldal tartalmát. Az e mögé írt tartalmak fognak megjelenni a böngészőben a weboldal részeként. Ezt követni fog majd még egy </body> tag. De ezt nem rakhatjuk ki még most. A záró tag-et csak akkor rakhatjuk ki, ha a weboldalunkat már feltöltöttük tartalommal.
</body>: Az elején írtuk a <body> nyitó tag-et. Ez a zárópárja. Ez jelzi a böngésző számára, hogy eddig tartott a megjelenítendő rész.
</html>: Ez pedig azt jelzi a böngészőnek, hogy itt ér véget teljesen a HTML dokumentum.


A leggyakrabban használt HTML elemek

Most pedig vegyük sorra a leggyakrabban használt HTML elemeket.


TITLE

A TITLE elemnek a nevéből is adódik, hogy a név megadására használjuk.

Szintaktikája: <TITLE>Ide jön a névht</TITLE>

Ennél a HTML elemnél kötelező a zárótag használata és a két TITLE közé írt szöveg nem fog megjelenni a weboldalon alapesetben, csak a böngészőben megnyitott lap címsorában.



H1, H2, H3, H4, H5, H6

A H1-H6 elemek tulajdonképpen címsorok. A H1 a legnagyobb címsor, míg a H6 a legkisebb. Alapvetően arra szolgának, hogy címként kiemeljék a fontosabb fejezeteket.Í
Nézzünk egy pár példát erre.

Szintaktikája: <h1>Címsor 1</h1>


HTML kód

<H1>Címsor 1</H1>
<H2>Címsor 2</H2>
<H3>Címsor 3</H3>
<H4>Címsor 4</H4>
<H5>Címsor 5</H5>
<H6>Címsor 6</H6>

Eredmény

Címsor 1

Címsor 2

Címsor 3

Címsor 4

Címsor 5
Címsor 6


p

A p elemet bekezdések alkotására használjuk, hiszen a használatukkor a böngésző automatikusan hozzáad egy üres sort a bekezdés elé és után.

Szintaktikája: <p>Ez itt egy bekezdés.</p>


HTML kód

<p>Ez itt egy bekezdés.</p>
<p>Ez pedig egy másik.</p>

Eredmény

Ez itt egy bekezdés.

Ez pedig egy másik.



BR

A <BR> elem egy olyan elem, amelynek nincs zárópárja. Azaz a használatához elegendő csak annyit leírnunk, hogy <BR>. A BR kifejezés az angol break szóból ered, ami magyarul törést jelent. A <BR> hatására egy sortörés következik be.

Szintaktika: <BR>


HTML kód

<p>Ez itt egy bekezdés és <BR> itt megtöröm a sort.</p>

Eredmény

Ez itt egy bekezdés és
itt megtöröm a sort.




IMG

Az IMG szó az angol image szóra utal, amely magyarul képet jelent.

Szintaktikája: <IMG src=”KÉP.ELÉRÉSI.ÚTVONALA>

Ahogy látszik itt sincs szükség zárótag használatára.

Egy kép elérési útvonalát többféleképpen is megadhatjuk. Lehet relatív, abszolút útvonal, vagy akár URL is.


HTML kód

<img src="https://webiskola.hu/kep.jpg">

Eredmény

kep


a

A HTML dokumentumokba akár linkeket is elhelyezhetünk, amelyek egy kívánt helyre, vagy oldalra ugranak.
A szintaktikája: <a href=”HIVATKOZÁS“>MEGJELENŐ SZÖVEG</a>

Fontos, hogy az <a> tag-nak van zárópárja, azt kötelező kiraknunk, hogy működjön. Azonban a legfontosabb rész a “href”, hiszen itt kell megadnunk, hogy hova mutasson a hivatkozásunk. Ugyanúgy, mint a képeknél, itt is megadhatunk abszolút és relatív útvonalakat.

Nézzünk egy példát:

HTML kód

<a href="https://webiskola.hu">Ide kattintva eljutsz a webiskola.hu-ra.</a>


STYLE

A STYLE elemet kötelező a HEAD-en belül használni, és kötelező záró taget is használnunk.

Szintaktika: <STYLE>STÍLUS DEFINÍCIÓK</STYLE>

Példa:


HTML kód

<HEAD>
<STYLE>
p {color:red;}
</STYLE>
</HEAD>

<BODY>
<p>Ez egy bekezdés.</p>
</BODY>

Eredmény

Ez egy bekezdés.


A STYLE elemen belül megadtuk, hogy az összes p színe piros legyen.



link

A link egy másik dokumentumra mutat, amelynek az információit hasznosítani tudja. Csak a HEAD-en belül használhatjuk.

Szintaktikája:  <link rel=”TÍPUS” href=”ÚTVONAL”>

Tegyük fel például, hogy van egy HTML dokumentumom, amely így néz ki:

HTML kód

<p>Ez egy bekezdés.</p>


Eredmény

Ez egy bekezdés.

És létezik egy stilus.css nevű fájl is, amiben ez található:

CSS kód

p {color:red;}


Itt tulajdonképpen csak annyit adtunk meg, hogy mint p elem színe piros legyen.

Ha a HTML kódunkat kiegészítjük a most tanult link-el, akkor ezt a két fájlt összekapcsolhatjuk. Nézzük meg hogyan:

HTML kód

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

<body>
<p>Ez egy bekezdés.</p>
<body>


Eredmény

Ez egy bekezdés.

Elem az elemben

Bár ez már lehet, hogy sok mindenkinek leesett, de azért érdemes megemlíteni, hogy egyes elemek tartalmazhatnak más elemeket is. Mint például, ahogy láttuk, hogy egy BODY elemen belül lehet például egy p elem is. Vagy pedig egy p elemen belül használhatunk egy BR elemet is.