HTML jelölőnyelv – definíció, működés és használat weboldalakhoz

A Hyper Text Markup Language (HTML) egy olyan jelölőnyelv, amellyel weboldalakat lehet létrehozni. A weboldalakat általában egy webböngészőben lehet megtekinteni. Tartalmazhatnak írást, linkeket, képeket, sőt hangot és videót is. A HTML-t az ilyen típusú tartalmak jelölésére és leírására használják, hogy a webböngésző helyesen tudja megjeleníteni őket. A HTML arra is használható, hogy metainformációkat adjon a weboldalhoz. A metainformációkat a webböngészők általában nem jelenítik meg, és a weblapra vonatkozó adatok, például az oldalt létrehozó személy neve. A CSS (Cascading Style Sheets) a HTML-elemek stílusának kialakítására szolgál, míg a JavaScript a HTML-elemek és a CSS-stílusok manipulálására.

A HTML szabványt kezdetben a World Wide Web Consortium (W3C) dolgozta ki. A HTML5 volt az a nagy áttörés, amely a modern, multimédiás és interaktív weboldalak alapjait lefektette. Azóta a nyelv fejlesztése folyamatos: a WHATWG egy ún. "living standard" formájában tartja karban a HTML specifikációt, míg a W3C korábbi publikációi (például HTML 5.2) is elérhetők referenciaként.

Alapfogalmak: elemek, tagek és attribútumok

A HTML dokumentum elemekből épül fel. Egy elem általában egy kezdőtagból, tartalomból és egy zárótagból áll, például: <p>Szöveg</p>. Sok elemnek lehetnek attribútumai (például src, alt, href, class, id), amelyek további információkat adnak a böngészőnek a megjelenítésről vagy működésről.

Dokumentumszerkezet (alapváz)

Minden HTML-oldalnak van egy alapvető szerkezete, amely tipikusan így néz ki:

<!DOCTYPE html> <html lang="hu">   <head>     <meta charset="utf-8">     <title>Oldal címe</title>     <link rel="stylesheet" href="styles.css">   </head>   <body>     <!-- A tartalom ide kerül -->   </body> </html>

A DOCTYPE deklaráció jelzi a böngészőnek a dokumentum HTML verzióját. A <head> rész metainformációkat, karakterkódolást, címeket és külső erőforrások hivatkozásait (pl. CSS, ikonok) tartalmazza. A <body> pedig magát a látható tartalmat.

Gyakori HTML-elemek

Szerkezeti elemek: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> — a modern, szemantikus HTML részei.
Szövegformázás: <p>, <h1>–<h6>, <strong>, <em>, <small>, <blockquote>.
Listaelemek: <ul>, <ol>, <li>.
Média: <img src="..." alt="...">, <audio controls>, <video controls> — multimédia beágyazása.
Hivatkozások: <a href="..."> — belső és külső linkek létrehozása.
Űrlapok: <form>, <input>, <textarea>, <button>, <select> — adatok gyűjtése a felhasználótól.
Metaadatok: <meta> — például description, viewport, vagy keresőoptimalizáláshoz fontos leírások.

Block vs. inline elemek

Néhány elem blokkszintű (például <div>, <p>), amelyek új sort kezdnek és teljes szélességet foglalnak, míg mások inline (például <span>, <a>), amelyek a szövegben maradnak. A CSS segítségével azonban bármely elem megjelenési módja módosítható.

DOM és böngésző működése

Amikor egy böngésző betölt egy HTML-oldalt, a dokumentumot egy belső fábanfa-szerkezetbe, a Document Object Modelbe (DOM) parse-olja. A JavaScript ezen a DOM-on keresztül manipulálhatja az elemeket, eseménykezelést adhat hozzá, és dinamikusan változtathatja a tartalmat vagy a stílust.

Hozzáférhetőség és szemantikus HTML

A szemantikus HTML és az akadálymentesség (accessibility) azt jelenti, hogy az elemeknek jelentése van (például egy <nav> a navigációt jelzi), ami segíti a képernyőolvasókat és a keresőmotorokat. Fontos a megfelelő alt attribútumok használata képeknél, a formok címkézése (<label>), és az ARIA attribútumok szükség szerinti alkalmazása.

SEO és metaadatok

A <meta name="description">, a cím (<title>), strukturált adatok (JSON-LD) és a szemantikus címkék mind befolyásolják, hogyan indexelik oldaladat a keresőmotorok. Érdemes olyan metaadatokat megadni, amelyek pontosan leírják az oldal tartalmát.

Validálás és eszközök

Használj HTML-validátort, hogy ellenőrizd a forráskód megfelelőségét és hibáit.
Böngészők fejlesztői eszközei (DevTools) segítenek hibakeresésben, CSS és JavaScript elemzésben.
Build eszközök (pl. bundlerek, preprocesszorok), előfeldolgozók és keretrendszerek (pl. React, Vue) használata megkönnyíti a fejlesztést, de alapvetően mindez HTML-re épül.

Tippek a gyakorlatban

Mindig állítsd be a karakterkódolást (UTF-8) a <meta charset="utf-8"> segítségével.
Adj meg mindig alt szöveget a képekhez.
Használj szemantikus elemeket a strukturált és olvasható kódért.
Szétválasztás elve: HTML a tartalomért, CSS a megjelenésért, JavaScript a viselkedésért.
Gondolj a mobilra: add meg a responsive meta tag-et (viewport) és tesztelj különböző képernyőméreteken.

Összefoglalva, a HTML a web alapja: struktúrát és jelentést ad a tartalomnak, lehetővé téve, hogy böngészők, keresők és segédeszközök értelmezzék és megjelenítsék azt. A modern webfejlesztésben a HTML, a CSS és a JavaScript együttműködése teremti meg a felhasználói élményt.

Címkék

A HTML speciális programozási nyelvi elemeket, úgynevezett "címkéket" használ, hogy a böngésző tudja, hogyan kell kinéznie egy weboldalnak. A címkék általában párosítva jelennek meg: a nyitó címke határozza meg egy tartalmi blokk kezdetét, a záró címke pedig a tartalmi blokk végét. Sokféle címke létezik, és mindegyiknek más-más célja van. A címkékre vonatkozó példákat lásd alább: Alapvető HTML-címkék.

Egyes címkék csak bizonyos böngészőkben működnek. Például a <menuitem> tag, amely arra szolgál, hogy megjelenjen valami, amikor az ember megnyomja az egér jobb gombját, csak a Mozilla Firefox böngészőben működik. A többi böngésző egyszerűen figyelmen kívül hagyja ezt a taget, és az írást normálisan jeleníti meg. Sok weblapkészítő kerüli ezeknek a "nem szabványos" címkéknek a használatát, mert azt szeretnék, hogy az oldaluk minden böngészőnél ugyanúgy nézzen ki.

Példa

Íme egy példa oldal HTML-ben.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Ez az oldal címe. </title> 5 </head> 6 < body> 7 < p> Ez egy bekezdés. </p> 8 < a href="https://www.domain.com"> Ez egy link. </a> 9 < img src="image.jpg" alt="Kép"> 10 </body> 11 </html>

Egy egyszerű HTML oldal a következő lenne: egyetlen bekezdés a "Hello world! " felirattal.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Szia! </title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

Alapvető HTML címkék

Címke neve	Név	Funkció	Kódpélda
`<!DOCTYPE>`	Doctype	Meghatározza a dokumentumtípust	<!DOCTYPE html>
`<html>`	HTML	Meghatároz egy HTML-dokumentumot és elindít egy HTML-dokumentumot.	< html> Minden kód</html>
`<head>`	Fej	Tartalmaz minden olyan kódot, amelyet nem a weboldal elemeinek megjelenítésére használnak.	< head></head>
`<title>`	Cím	Meghatározza a weboldal címét (a lapon látható), és a `<head>-be kerül` beírásra.	< title> Weboldal</title>
`<body>`	Test	Tartalmazza a weboldal látható elemeit (és tartalmazza a bekezdést és egyebeket).	< body> Html címkék</body>
`<h1>` - `<h6>`	Címsorok	Különböző méretű címsorok `(<h1>` a legnagyobb)	< h1> Címsor</h1>
<p>	bekezdés	Meghatároz egy szövegrészletet	< p> TEXT</p>
	Anchor	Aktív linkeket hoz létre más weboldalakra	< a href="www.domain.com"> Látogasson el oldalunkra</a>
`<img>`	Kép	Kép megjelenítése az oldalon	< img src="ImageUrl" alt="A megjelenített szöveg, ha a kép nem elérhető">
`<br>`	Szünet	Egyetlen sortörés beillesztése	Szöveg < br> Szöveg
`<center>`	Központ	A tartalom áthelyezése az oldal közepére	<közép> Kód</közép>
`<script>`	Forgatókönyv	Létrehoz egy szkriptet a weboldalon, általában JavaScript nyelven írva.	< script> document. write("Hello World!")</script>

HTML címkék használata

Weboldal készítése

A weboldal készítése egyszerű.Mindössze a címkékre és a sorrendre kell emlékeznie ahhoz, hogy weboldalt készítsen.

Először is, keresnie kell egy helyet, ahová beírhatja a HTML címkéket (én a jegyzettömböt ajánlom), és be kell írnia a címkéket.

Íme egy másik példa egy HTML Tag oldalra.

<html>

<head>

<h1> Hello world!</h1>

</head>

<body>

<p>

Ez egy HTML címke oldal.

</p>

By: *Név beírása*

</footer>

</html>

Ha kész, mentsd el ebben a formátumban: helloworld.htm

(ne tegyen szóközöket)

És kész! Miután elmentetted a gépedre, ha megnyomod, akkor a google-ban a weboldaladra fog küldeni!

Kérdések és válaszok

K: Mi az a HTML?

V: A HTML egyfajta jelölőnyelv, amelyet írást, linkeket, képeket és audiovizuális anyagokat tartalmazó weboldalak létrehozására használnak.

K: Mi a HTML funkciója?

V: A HTML funkciója, hogy megmondja a webböngészőknek, hogyan nézzenek ki a weboldalak, és metainformációkat ad hozzá, például a weblap készítőjének nevét.

K: Milyen példák vannak a HTML segítségével létrehozott weboldalakba illeszthető médiára?

V: A HTML segítségével létrehozott weboldalakba beépíthető média például hangfájlok és videoklipek.

K: Hogyan egészíti ki a CSS a HTML-t?

V: A CSS a HTML oldalak megjelenésének megváltoztatására szolgál.

K: Mi a JavaScript szerepe a webfejlesztésben?

V: A JavaScript a webfejlesztés alapvető szkriptnyelvének számít, mivel megmondja a weboldalaknak, hogyan viselkedjenek, és megváltoztathatja a HTML és a CSS megjelenését.

K: Ki a felelős a HTML létrehozásáért?

V: A HTML-t a World Wide Web Consortium (W3C) készíti.

K: Mi a HTML jelenlegi szabványos verziója?

V: 2018 szeptemberétől a HTML 5 a HTML legújabb szabványos változata, az 5.2-es verzió.