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.