(Kiss Beáta 2025/2026)
A világhálón (world wide web) lévő tartalmakat (erőforrásokat) elsősorban webböngésző alkalmazások (pl. Mozilla Firefox, MS Edge, Google Chrome, stb.) segítségével érhetjük el. A tartalmak általában weboldalak működését és megjelenítését leíró fájlok, pl.: HTML, Javascript, CSS. A HTML fájl ezek közül, amit elsőként tölt le a böngésző egy oldal megnyitásánál, ami referenciákat tartalmaz más erőforrásokra (pl. .css vagy .js fájlok, de lehetnek benne video vagy hang fájl hivatkozások is).
A HTML egy leíró nyelv (Hyper Text Markup Language), ami arra hivatott, hogy definiálja a böngészőnek, hogy milyen formában kell a weblapot megjeleníteni és ehhez, milyen további erőforrásokat szükséges letölteni és értelmeznie (alkalmaznia).
Egy weboldal megnyitásánál a böngészőkben távoli tartalomkiszolgálóra küldünk kérést (request), amely a kért tartalommal vagy egy hibaüzenettel válaszol (response). Ez a kommunikáció a request-response működés, ami egy állapot nélküli és kapcsolat fenntartása nélküli protokoll. A kéréseket “http request”-nek, a kapott választ pedig “http response”-nak is szokás nevezni, mert ez a hyper text transfer protocol alapja, ami a weboldalak kiszolgálását leíró kommunikációs forma és az arra született működésbeli megállapodások összessége. Ilyen megállapodások a kiszolgáló és a böngésző között pl. a request-ek és resopnse-ok alakja és tartalma, a használt hálózati átviteli protokoll (legtöbbször TCP/IP). A http kommunikáció alapvetően szöveges üzenetekkel történik, ami azt jelenti, hogy a request és a response is egy-egy több soros szöveg. A request szövege egy HTTP metódussal kezdődik, ezt verb-nek hívjuk és ez mondja meg a kiszolgálónak, hogy milyen típusú a kérés. Ha pélgául egy erőforrást szeretnénk elkérni, akkor a GET metódus lesz a request-ben, azonban ha inkább szeretnénk egy erőforrást létrehozni a kiszolgálón (például egy új felhasznló adatait küldjük el, hogy azokból létrehozzon a rendszer egy új entitást), akkor a POST kerül a kérés szöveg elejére. A metódus meghatározása után következik ugyanabban a sorban az erőforrás elérhetősége (útvonal névvel) majd a HTTP protokoll a verzójával (HTTP/1.1 vagy HTTP/2). A második sortól a kérés fejléce következik több soron keresztül, amiben definiáljuk a böngészőnk típusát, azt hogy milyen válasz típust várunk (pl. text/html), milyen további protokollokat támogat a böngészőnk és még számos további hasznos információt a kiszolgáló számára, ami kérés teljesítéséhez fontos lehet (például, hogy támogatjuk-e a gzip tömörítést az adatok átvitele során).
Egy HTML oldal letöltésére irányuló request így néz ki:
GET / HTTP/1.1
Host: example.localhost
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0
Accept: text/html,application/xhtml+xml,application/xml
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br, zstd
Connection: keep-alive
Cookie: cookie-agreed-version=1.0.0
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache
A kérésben van tehát, hogy milyen erőforrást kérünk a kiszolgálótól és milyen válasz típust várunk (xml, html, json), továbbá tartalmaz még a kommunikációra vonatkozó opciókat is.
Egy válasz a kért erőforrástól és a kiszolgáló szoftver típusától függően ugyan sok mindenben eltérhet, van pár sor aminek mindenképpen szerepelnie kell benne. Ilyen kötelezően előírt elemeket tartalmaz a response első sora, amiben szerepelnie kell a protokollnak (pl. HTTP/1.1) és egy http kódnak, ami arról tájékoztatja a böngészőt, hogy sikeres volt-e a kérés teljesítése (200 OK) vagy valami hiba lépett fel esetleg (4xx vagy 5xx). A további sorok már vagy a kiszolgálóról hordoznak információt vagy a kért erőforrásról és tartalmazza a kért erőforrást is (pl. egy html állományt).
Egy válasz fejléc:
HTTP/1.1 200 OK
Date: Thu, 07 Nov 2024 21:09:31 GMT
Server: Apache/2.4 (Debian)
Content-language: en
Content-Encoding: gzip
Content-Length: 27588
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Az alábbi lista tartalmazza a leggyakoribb http kódokat:
| HTTP kód | jelentése | leírás |
|---|---|---|
| 200 | Ok | az erőforrást a kiszolgáló megtalálta és a kérést sikeresen teljesítette |
| 301 | Redirect | a kért erőforrás végleg máshol található, elküldi az új címet (URL-t) |
| 302 | Redirect | a kért erőforrás ideiglenesen máshol található, elküldi az új címet (URL-t) |
| 410 | Not found | a kért erőforrás nem található és többet itt nem is lesz elérhető (robotoknak) |
| 404 | Not found | a kért erőforrás jelenleg nem található |
| 403 | Permission denied | nincs jogosultsága az erőforráshoz |
| 500 | Server error | valami server oldali hiba volt a kiszolgálás közben |
HTTP státuszkódok:
HTTP metódusok:
Nyolc HTTP metódust különböztetünk meg, ezek szabályozzák, hogy milyen műveletet kell végrehajtani a keresett erőforráson.
További http kódok megtalálhatók a Mozilla Developer Network oldalain, a request-response működésről pedig ezen az aloldalon találunk több információt.
Bár a kérés és a válasz is sok paramétert tartalmazhat még, mégis talán a leginkább lényeges része a kommunikációnak maga a tartalom, a HTML, CSS, Javascript fájlok összessége, mert ezek határozzák meg azt, hogy mit látunk a böngészőben.
Mivel a HTML leírót a böngészőknek kell értelmezni és feldolgozás után megjeleníteni, ezért a böngészőknek szüksége volt olyan szabványokra, amik meghatározzák, hogy milyen esetben, hogyan kell kirajzolni egy adott HTML kód töredéket annak érdekében, hogy mindenhol pontosan ugyanúgy jelenjen meg a tartalom. Sajnos ez a mai napig nem tökléletes és akár egy böngésző különböző verziói között is lehet lényeges különbség, mert az alkalmazott szabványok is változnak, fejlődnek az évek során.
Azt kell elfogadni, hogy minden böngészőgyártó törekszik az egységes értelmezésére a szabványoknak, de mindig voltak és lesznek is kisebb különbségek a különböző böngészőmotorok között, így ezeket a weboldalak fejlesztőinek kell tudni kezelni. Ennek ellenére a software iparág minden szereplője törekszik a szabványosításra (abban az esetben, ha az az aktuális üzleti érdekeivel épp nem ütközik).
A weboldalakhoz használt leírónyelvekhez az ajánlásokat a W3C konzorcium dolgozza ki. Ezek az ajánlások mára de facto szabványokká váltak és minden böngésző motort és weboldalt fejlesztő magára nézve kötelezőként értelmezi, azért hogy az adott tartalom, mindenhol egységesen jelenjen meg.
A de facto szabványok elterjedését egy-egy konkrét megoldás széleskörű használata biztosítja. Ahhoz, hogy a de facto szabványból, hivatalos szabványügyi testület által rögzített de jure szabvány válhasson, azt be kell nyújtani a megfelelő szabványügyi testülethez, amelynek el kell fogadnia azt. Erre a W3C-dokumentumok között több precedenst is találhatunk.
Érdekesség:
„A World Wide Web Consortium-ot (W3C) 1994-ben alapította Tim Berners-Lee, a Web szülőatyja. A cél elsősorban az volt, hogy a webtechnológiák fejlesztésével foglalkozó vállalatok és kutatóintézetek a jövőben ne forgácsolják szét feleslegesen tudásukat, elért eredményeiket, hanem egymással vállvetve, egymást segítve tereljék ugyanazon irányba az informatika újításait. A W3C célja, hogy minél jobban kihasználja az internet (web) nyújtotta lehetőségeket szabványok és iránymutatások kidolgozása révén, melyek egyúttal biztosítják a web hosszú távú fejlődését is. ”
A HTML (HyperText Markup Language) nyelv az SGML (Standard Generalized Markup Language – Szabványos általános jelölőnyelv) szabványon alapul.
A HTML fájl egy szöveges állomány, amelyben egymásba ágyazott, a megjelenítési szerkezetet leíró elemeket (TAG-eket) és a további megjelenítendő, letöltendő erőforrásokra mutató hivatkozásokat és külső rendszerek számára (pl. kereső robotok) leginkább a tartalommal kapcsolatos meta adatokat tartalmaz.
A HTML nyelvnek több hivatalos verziója is megjelent már a bevezetése óta. Az HTML5 bevezetéséig a legelterjedtebb HTML-változatot (HTML 4.01) 1999 óta használjuk.
A webes szabványok között az egyik legrugalmasabb az XML szabvány (eXtensible Markup Language – Bővíthető jelölőnyelv), amit legtöbbször alkalmazások közti kommunikációra használunk, mert nincs egy előre megszabott elem (TAG) készlete, így könnyen bővíthető. Az XML további fontos technológiák kapcsolódnak, amelyek:
- lehetővé teszik a felépítése validálását (XSD)
- utasításokat adnak az értelmezőnek (parser) az XML átalakítására (XSLT)
- kinézeti formát definiálnak a megjelenítőnek (XSL)
A XML nyelvet felhasználva több szabványosított tartalmi leíró is megszületett, ilyenek például az XHTML, az RSS (Really Simple Syndication), az ATOM feed. Az utóbbi kettőt használjuk még a mai napig is hírek és tartalmi változások publikálására automatizált értelmező és megjelenítő alkalmazások számára. Egy RSS olvasó általában meg is jeleníti a publikált XML adatokat, de vannak olyan rendszerek is, amelyek, csak későbbi feldolgozásra tárolják a publikált RSS-eket.
Az XML nyelv nagyon fontos szerepet játszik az adatok tárolása során is és ezáltal különböző alkalmazások közötti adatátvitelnél, továbbá az adatátvitel formájának és szabályrendszerének leírásában is. Az egyik ilyen szabványosított és specializált XML leíró a SOAP volt, amit webszolgáltatások leírására használtak. Bár még ma is találkozhatunk SOAP alapú webszolgáltatásokkal, egyre ritkábban fordulnak elő, lassan kiváltotta ezt a szabványt a REST API elgondolás, ami jobban illeszkedik az állapotmentes (kérés-válasz alapú) HTTP kommunikációba, felhasználva a HTTP metódusokat (verbs: GET, PUT, POST, DELETE) és a böngészőkben használt javascript számára is könnyebben értelmezhető JSON (JavaScript Object Notation) formátumot használ adattárolásra és továbbításra.
Az XML sokoldalú felhasználhatóságát később összefésülték az addigra az interneten elterjedt HTML szabvánnyal, ami már így is majdnem megfelelt egy szabványosított XML fájlnak. A HMTL csak pár dologban nem felelt meg az XML szabványnak, ilyenek voltak a nem lezárandó TAG-ek (például: br, img, hr), de ezeket az eseteket könnyen fel lehett oldani azzal, hogy saját magukban lezárják (<br />).
Az XHTML szabványok már az XML nyelven alapulnak és ennek komoly előnye a szigorú szabottság (validálható a felépítése XSD fájl felhasználásával).
Az XHTML nyelv 1.0 2000-ben jelent meg, ezt követte 2001-ben az XHTML 1.1.
Az XHTML szabványt követő oldalakat természetesen ugyanúgy megjelenítik a böngészőprogramok, mint a HTML-oldalakat, és ránézésre egy oldalról nem is lehet eldönteni, hogy HTML vagy az XHTML szabvány szerint készült-e.
A HTML5 szabvány jelenleg az elérhető legutolsó verzó, amihez szorosan kapcsolódik a CSS 3-as verziója és ezek együtt olyan multimédiás képességekkel rendelkeznek (animációk, médiafájlok integrálása, reszponzív viselkedés például a CSS3 media query-k felhasználásával), hogy az addig a HTML oldalak kiegészítésére használt multimedia tartalmakat leíró technnológiák (pl. Adobe Flash vagy a Microsoft Silverlight) teljesen elavulttá váltak.
A HTML5 már nem követi az XHTML szabványt, hanem annál megengedőbb, így bizonyos elemeit már nem is kell ellátni lezáró TAG-ekkel. Ilyenek például a külső erőforrás hivatkozására használható <link> elem vagy az oldal meta adatait felsoroló <meta> sorok. A legtöbb esetben nem okozunk vele hibát, ha lezáró TAG-gel látunk el egy <link>-et, de ne felejtsük el, hogy ha HTML5-nek definiálunk egy dokumentumot, akkor az automatikus feldolgozók, mint például a kereső robotok, nem feltétlenül arra készülnek, hogy egy <meta> TAG végén van még egy /> lezáró is.
Inkább törekedjünk a szabvány helyes használatára és figyeljünk oda, hogy melyik TAG-nek van szüksége lezáró TAG-re is!
A HTML arra készült, hogy legyen egy nyelv, ami segítségével leírható a dokumentum tartalma és struktúrája. Tehát olyan elemeket tartalmaz leginkább, amit egy szövegszerkesztőben már megismertünk. Van benne például bekezdés (paragrafus), címsor, kép, felsorolás (számozott, rendezetlen), táblázat. A böngészőprogramok fejlesztői azonban számos alkalommal eltértek az eredeti specifikációtól, új tageket, paramétereket vezettek be -bízva abban, hogy de facto standard-ek lesznek ezekből-, amelyek a megjelenésre helyezték már a hangsúlyt.
A probléma megoldását a Cascading Style Sheets (Lépcsőzetes stíluslapok) szabvány jelenti. A CSS használatával elkülöníthetjük a weboldal megjelenését a tartalomtól úgy, hogy a megjelenésre vonatkozó definíciók akár külső állományban is elhelyezkedhetnek. A CSS szabványnak különböző verzió jelentek meg az évek folyamán (CSS, CSS2, CSS2.1). Jelenleg a CSS3-as verzió a legfrissebb, ami a HTML5 megjelenésével együtt erőteljesen kitolta a webes megjelenés határait.
Egy weboldal készítésénél alapvető követelmény, ha a megjelenést elválasztjuk a tartalomtól és működéstől. Így a kód átláthatóbbá válik, egy arculati módosítás miatt nem feltétlenül kell hozzányúlni a HTML-forráskódhoz, illetve a tartalom módosítása is egyszerűbb, hiszen nincsenek a megjelenítésre vonatkozó TAG-ek a forráskódban.
A megjelenítés, tartalom és működés szeparálása nem csak a weboldalak esetén praktikus módszer, hanem bármely software készítésénél is nagyon hasznos, mert könnyíti a csoportmunkát, ott ahol vannak külön UI (frontend) fejlesztők, backend fejlesztők, QA (minőségbiztosító – tesztelő) csapat, designer-ek. Továbbá gyorsítja és egyszerűsíti a software karbantartását, ezáltal gyorsabban és kevesebb hibával tudunk kiadási verziókat (release) elkészíteni.
A HTML fájl úgynevezett egymásba ágyazott TAG-ekből épül fel, így leírva egyfajta megjelenítési szerkezetet is a böngésző számára. Egy TAG rendelkezik egy névvel (TAG name) és -a HTML esetén előre definiált- attribútumokkal, és tartozik hozzá egy lezáró TAG is.
Formája:
<tagname attr1=”attribútum értéke” attr2=”attribútum értéke”> ... </tagname>
A nyitó TAG és a “/” jellel jelölt lezáró TAG közé szöveg vagy HTML is írható. Utóbbi esetén egy gyermek node-ról (HTML Element) beszélünk, amibe újabb node vagy szöveges tartalom ágyazható. Fontos követelmény, hogy egy adott szinten megnyitott node, ugyanazon a szinten legyen lezárva!
Az úgynevezett gyökér elem a “HTML” nevű TAG, ami kettő fő részre van osztva, a “BODY” és a “HEAD” node-okra. Az XML szabvány fontos része (ami meghatározza a HTML5 verziót is!), hogy csak egy gyökér elem létezhet és minden más TAG-nek ebben kell létrejönnie. A dokumentum típust leíró sor természetesen nem számít ebe bele, az csak a feldolgozáshoz ad segítséget az értelmezőnek.
A <head> TAG-be kerülnek a weboldalt leíró meta adatok egy (pl. a weboldal címe, a tartalomra jellemző kulcsszavak és a tartalom rövid leírása a kereső robotok számára) és további betöltendő erőforrás hivatkozások (mint például az oldal működését befolyásoló és manipuláló javascript fájlok vagy a CSS stíluslapok), míg a <body> tartalmazza a szerkezeti leírást és egy az oldalba ágyazott javascript kód esetén a működés egy részét is (<script> </script> TAG-ek között megadható javascript is), továbbá itt is hivatkozhatunk külső erőforrásokra erre létrehozott TAG-eken keresztül (pl. <img> a képek elhelyezéséhez). Ettől függetlenül célszerű törekedni arra, hogy javascript kódokat NE itt helyezzünk el, emlékezzünk a tartalom / megjelenés / működés (vezérlés) szétválasztásának elvére!
Minden HTML, XHTML, XML dokumentum elejére egy jelölő sort illesztve tudatjuk az értelmezővel (parser), hogy milyen típusú dokumentummal áll szemben. Ennek formátuma az alábbi a HTM5 esetén:
<!DOCTYPE html>
Ha nem tesszük a fájl elejére a dokumentumtípust, akkor azt kockáztatjuk, hogy az oldal nem megfelelően jelenik meg a böngészőben. Erre ma már egyre kevesebb az esély, nagyon ügyesen ismerik fel a böngészőmotorok a feldolgozandó dokumentumokat.
A HTML nyelv korábbi változataiban hosszabb dokumentumtípus-definíciót kellett megadni. A HTML 4.01 verzió szabványos szigorú (strict) változatának dokumentumtípus megadása például így nézett ki:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Példa egy HTML5 szabvány szerinti alap struktúrára:
<!DOCTYPE html>
<html lang="hu">
<head>
</head>
<body>
</body>
</html>
A <html> gyökérelemnek is lehetnek attribútumai, ilyen például az oldalon elhelyezett tartalom nyelvének definíciója, ami a feldolgozót segíti a tartalom helyes kezelésében. Ez az attribútum a lang, aminek az értéke egy nyelv nemzetközi kódja, plédául "hu".
A HTML dokumentum <head> szekciójában található adatok az oldal helyes megjelenítéséhez szükségesek, de minden tartalmi elemet csak a <body> szekcióban helyezhetünk el. Tehát a <head> csak az oldal metaadatait tartalmazza és a külső erőforrásokra való hivatkozásokat, mint például a <link> és <script> sorokat.
Az oldal metaadat HTML elemei a teljesség igénye nélkül a következők lehetnek:
A HTML dokumentum fej részébe tehetünk még <style> TAG-ek közé írt stílus blokkokat is, de miután ezeket általában külön CSS fájlban tároljuk a megnövekedett méretük miatt és a könnyebb kezelhetőségük kedvéért és <link> sorokkal hivatkozzuk be a dokumentumunkba, így a <style> TAG nem igazán elterjedt megoldás a <head> szekcióban.
A következő HTML csonk egy átlagos <head> szekciót mutat:
<!DOCTYPE html>
<html lang="hu">
<head prefix="og: https://ogp.me/ns#">
<title>Az oldal címe</title>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta property="og:title" content="My example site for education purposes">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.localhost">
<meta property="og:image" content="https://example.localhost/page-related-social-image.jpg">
<script defer src="https://example.localhost/main.js?v=202411011555"></script>
<link rel="stylesheet" type="text/css" href="https://example.localhost/main.css">
</head>
<body>
</body>
</html>
A fenti példában láthatunk korábban már táblázatos formában megemlített TAG-eket, mint például a <meta property="og:*" contnent=""> típusú sorok (ezeket itt tudjuk megtekinteni), de van benne külső erőforrás hivatkozás is (<script defer src="https://example.localhost/main.js?v=202411011555"></script>).
A külső erőforrások betöltésénél a böngészők lehetőség szerint cache-elik a fájlokat a hatékonyabb működés érdekében. Ez néha hibához is vezethet, amikor olyan javascript fájlt tárolt el gyorsítótárba a böngésző, ami valójában már változott a kiszolgálón. Emiatt a fejlesztők gyakran alkalmazzák azt a trükköt, hogy beírnak egy query paramétert, amit a kiszolgáló úgyis levág, de a böngésző számára ismeretlen fájlra történik a hivatkozás, ezért nem a gyorsítótárban keresi, hanem megpróbálja letölteni. Ilyen a fenti "?v=20241101155" query paraméter is, ami itt egy egyszerű dátum és idő érték.
A fenti HTML példából látszik, hogy a weboldalunk valójában objektumok egymásba ágyazásából tétrejött szerkezet, amiben ezek a objektumok (HTML elemek) egymással szülő-gyermek kapcsolatban állnak vagy egymás testvérei, ha ugyanazon a szinten helyezkednek el és ugyanaz a szükő objektumuk. Ezt a hierarchikus szerkezetet hívjuk Document Object Model-nek, röviden DOM-nak.
Az oldalba betöltött javascript kódok manipulálhatják a DOM-ot, ezért a böngészők a <script> sort szinkron módban futtatják, ezzel blokkolva az oldal további feldolgozását. A fejlesztők régebben a <body> szekció legvégére tették emiatt a JS fájlok betöltését, hogy ne hátráltassák az oldal megjelenítését és biztosítsák a DOM teljes felépülését még azélőtt, hogy egy JS kódrészlet hozzá akarna nyúlni. Ez mára szükségtelenné vált, a defer és async kulcsszavak használatával, amelyek engedik a javascript aszinkron betöltését, nem blokkolva az oldal feldolgozását.
A HTML oldal feldolgozásának folyamata a három különböző <script> betöltési lehetőség függvényében:
Teljes szinkron <script>
1. elindul a letöltött oldal feldolgozása
2. a feldolgozás megszakad, elért a böngésző a <script> sorhoz, elindul a JS fájl letöltése
3. a JS fájl betöltődött, lefuttatja a böngésző
4. az oldal feldolgozása és megjelenítése tovább folytatódik a végéig
Aszinkron betöltés <script async>
1. elindul a letöltött oldal feldolgozása
2. elért a böngésző a <script> sorhoz, elindul a JS fájl letöltése, de a feldolgozás folytatódik
3. a JS fájl betöltődött, megáll az oldal feldolgozása, lefuttatja a böngésző a javascriptet
4. az oldal feldolgozása és megjelenítése tovább folytatódik a végéig
Elhalasztott futtatás <script defer>
1. elindul a letöltött oldal feldolgozása
2. elért a böngésző a <script> sorhoz, elindul a JS fájl letöltése, de a feldolgozás folytatódik
3. a JS fájl betöltődött, de az oldal feldolgozása folytatódik
4. az oldal feldolgozása és megjelenítése végén lefuttatja a böngésző a betöltött javascript kódot
A fenti szöveges megjelenítést befolyásoló HTML elemeket manapság már nem vagy csak alig használjuk, mert a tartalom és kinézeti formázás szeparálása miatt ugyanezeket CSS-ből definiáljuk. Ráadásul a félkövér helyett már “font-weight” CSS property van, amiben több féle vastagságot is beállíthatunk, akár számmal is (100,400,500). Persze van köztük olyan jelölés is, ami hasznos segítség a CSS-ből történő formázáshoz is, ilyen például a MARK, CITE, DFN, EM elemek amikkel csak a szöveges tartalom típusát jelöljük meg elsődlegesen és CSS-ből definiáljuk a megjenésüket. Ismeretük fontos, de mára többségük elavulttá vált.
Előfordulnak persze olyan esetek, amikor a megjelenítő nem képes értelmezni a CSS stílusokat, ilyen például egy tömeges levélküldés, ahol a megjelenítő nem egy böngésző lesz, hanem esetleg egy régebbi egyszerű a levelező kliensbe épített HTML értelmező. Ezekben a helyzeteken a fenti elemek jól használhatók alapvető kinézeti formázásra.
Három lista típust különböztetünk meg a HTML nyelvben, de ezek közül leggyakrabban csak a rendezetlen listával találkozunk.
Nem rendezzett lista - unordered list:
<ul>
<li>{lista elem 1}</li>
<li>{lista elem 2}</li>
</ul>
A rendezzett, számozott lista - ordered list:
<ol>
<li>{lista elem 1}</li>
<li>{lista elem 2}</li>
</ol>
A leíró lista, ahol a DT csoportok fogják össze a beágyazott DD elemeket - description list:
<dl>
<dt>Állat</dt>
<dd>Macska</dd>
<dd>Kutya</dd>
<dt>Növény</dt>
<dd>Kaktusz</dd>
<dd>Chili</dd>
</dl>
A fenti lista típusok tartalmaznak alapértelmezett megjelenést a listaelemek vonatkozásában, azonban ezekre manapság már nem építünk, mivel CSS-ből definiáljuk a megjelenítést.
Listákat nem csak olyan tartalom esetén használnak, amelyek felsorolás típusúak, hanem például a weboldal oldalsó vagy felső menürendszerének kialakítása során is gyakran előfordulnak. Legtöbbször erre a célra a rendezetlen <ul><li></li></ul> típusú listát használjuk. A listák menürendszerként történő felhasználása annak is köszönhető, hogy a listaelemekbe a HTML nyelv enged további listákat is beágyazni.
<ul>
<li>Menüpont 1
<ul>
<li>Almenü 1-1</li>
<li>Almenü 1-2</li>
</ul>
</li>
<li>Menüpont 2
<ul>
<li>Almenü 2-1</li>
<li>Almenü 2-2</li>
</ul>
</li>
</ul>
Gyakran fordul elő, hogy egy weboldal olyan adatokat kíván megjeleníteni, amiket táblázatos formában a legcélszerűbb. Erra a HTML nyelv már a kezdetek óta képes a <table> elem segítségével. Egy HTML táblázat rendelkezik sorokkal és bennük elhelyezkedő cellákkal. Az első sor speciális jelentéssel bír, ez a fejléc. A sorokat <tr> TAG-ekkel jelöljük, a cellákat pedig bennük a <td> vagy <th> elemekkel, ahol a <th> az elsősorba írt fejléc cellákat jelöli (table header cell), míg a <td> a táblázat soraiba írt adatcellákat (table data cell). A táblázatnak adhatunk egy megjelenítendő elnevezést is a <caption> elemmel fejléc sor elött. Lehetőségünk három fő részre osztani a táblázatunk HTML kódját, így elkülönítve a táblázat fejlécét, testét és láblácét egymástól.
A böngészők ezeket az elemeket használhatják a táblázat törzsének a lábléctől és fejléctől független görgetésére. Továbbá, amikor egy több oldalas táblázatot nyomtatunk ki, akkor ezek az elemek definiálják a táblázat fejlécének és láblécének nyomtatását az egyes oldalak tetején és alján. Ezek nem kötelező elemek, így egy táblázat a használatuk nélkül is értelmezhető és megjeleníthető a böngészők számára.
Megjegyzés: A <tbody> elemnek legalább egy <tr> elemet kell tartalmaznia, továbbá bármely <caption>, <colgroup> és <thead> elem után kell elhelyezkednie. Tipp: A <thead>, <tbody> és <tfoot> elemek alapértelmezés szerint nem befolyásolják a táblázat elrendezését. Azonban könnyebben tudjuk a használatukkal CSS-ből a táblázat megjelenését és működését befolyásolni!
A táblázat celláit össze is vonhatjuk horizontálisan a colspan attribútum segítségével vagy vertikálisan a rowspan használatával. Az attribútumok értékének megadott szám jelenti azt, hogy mennyi sort vagy oszlopot kívánunk összevonni.
A táblázat felépítésére példa:
<table>
<caption>A táblázat elnevezése (caption)</caption>
<thead>
<tr>
<th>></th>
<th colspan="2">Első oszlop</th>
<th colspan="2">Második oszlop</th>
<th colspan="2">Harmadik oszlop</th>
</tr>
</thead>
<tbody>
<tr><td rowspan="4"><strong>€</strong></td></tr>
<tr><td colspan="2">345</td><td colspan="2">543</td><td colspan="2">666</td></tr>
<tr><td colspan="2">456</td><td colspan="2">654</td><td colspan="2">777</td></tr>
<tr><td colspan="2">567</td><td colspan="2">765</td><td colspan="2">888</td></tr>
</tbody>
<tfoot>
<tr>
<td>SUM</td>
<td>1368</td><td>€</td><td>1962</td><td>€</td><td>2331</td><td>€</td>
</tr>
</tfoot>
</table>
Lehetőség van a HTML-ben úgynevezett hyper hivatkozásokat létrehozni, amelyek mutathatnak egy másik dokumentumra vagy egy dokumentumon belül pontra, amit a horgony (anchor - <a name="" >) elnevezésű elemmel jelölhetünk meg. Az oldalban létrehozni kívánt hyper hivatkozást is ugyanezzel a anchor elemmel helyezhetjük el, ilyenkor az <a> TAG href attribútumába kell beírni egy URL-t vagy egy oldalon belüli hivatkozást. ami egy másik anchor name attribútumának értéke, egy # karakterrel az elején.
A következő példa egy "ugrás" nevű link-et helyez el az oldalban, ami az "ide" nevű horgony elemre ugrik az oldalon belül:
<html>
<head>
<title>Horgony teszt</title>
</head>
<body>
<h1>Itt lesz egy hyper hivatkozás!</h1>
<p>Innen ugrunk <a href="#ide">ide</a>!</p>
<p>
...
</p>
<a name="ide"></a>
<p>Ez már a horgony után van</p>
</body>
</html>
A HTML oldalakba elhelyezett specifikus TAG-ekkel lehetőség van különböző media típusokra hivatkozni, amiket a böngésző kiértelmezés után betölt és megjelenít. Létezik egy általános, erre a felhasználásra szánt elem is az <embed></embed>, ami nem tartalom specifikus és a képek és videok mellett akár külső HTML oldalakat is beágyazhatunk az oldalunkba, mégis az a legcélszerűbb, ha a különböző tartalmakra rájuk specifikus elemeket használunk.
Ezek a tartalom specifikus HTML elemek:
Képek az oldalban
Képeket az <img> TAG segítségével tudunk beilleszteni az oldalunkba, aminek az src attribútumába kerül a kép elérhetősége, ami lehet egy abszolút útvonal (pl. egy URL) vagy relatív hivatkozás. Az <img> TAG rendelkezik egy alt attribútummal is, amit a böngésző ugyan alap esetben nem jelenít meg, de hasznos lehet azoknak akik nem látják a képet megfelelően és képernyő olvasó szoftvert használnak.
<img src="https://image-url.localhost" alt="A kép leírása" />
A képeknek a szélességét és magasságát is megadhatjuk, ilyenkor a böngésző átméretezi betöltés után. A fenti példában nem adtuk meg, ezért a kép az eredeti méretében fog megjelenni.
Audio és Video fájlok megjelenítése
A <video> TAG szolgál arra, hogy video formátumú tartalmakat helyezzünk el az oldalunkon.
A <video> TAG egy vagy több <source> TAG-et tartalmazhat különböző video forrásokra. A böngésző az első általa ismert formátumút fogja kiválasztani és beépíteni.
A szöveg a <video> és </video> TAG-ek között csak akkor jelenik meg, ha a böngésző nem támogatja a <video> TAG elemet.
Három támogatott video formátum van a HTML-ben: MP4, WebM, and OGG.
<video width="640" height="480" controls>
<source src="movie.mp4" type="video/mp4">
A böngésződ nem támogatja a video TAG-et!
</video>
A controls attribútum azt adja meg, hogy a beépülő video lejátszónak a vezérlő gombjai megjelenjenek. Az <audio> elem teljesen úgy működik, mint az előbbi <video>, a támogatott hang fájl típusok pedig a következők: MP3, WAV, and OGG.
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
A böngésződ nem támogatja az audio TAG-et!
</audio>
A HTML elemeket alapvetően kettő csoportra bonthatjuk:
Az első csoportba tartoznak például a már fentebb említett <div> <span> elemek, amik funkciója elsősorban a megfelelő megjelenítést elősegítő szerkezet létrehozása.
A második csoportba pedig olyan elemek, amik között van régebb óta a szabvány részeinek számító (<table> <p>) és sok olyan is ami a HTML5 kiadásával érkezett, például a <header> <article> <footer>.
A legismertebb, gyakran használt szemantikus elemek egy HTML oldalban a táblázatok (<table>), a formok (<form>),a paragrafusok (<p>), a media beágyazások (<img>, <video>, <audio>) és a listák is ide sorolhatók.
A HTML oldalak közül sok már a HTML5 megjelenése előtt is próbálta szemantikai szempontok alapján definiálni a saját szerkezetét, amit elsősorban nem-szemantikus elemek speciális "id" vagy "class" attribútumaiba helyezett funkciójukra utaló szöveggel értek el.
<div id="nav"> (a menü-t tartalmazó blokk jelölése)
<div class="header"> (az oldal fejléce)
<div id="footer"> (az oldal lábléce)
Ezek a jelölések leginkább a könnyebb CSS formázást segítették, de a könnyebb karbantartás miatt is fontosak voltak.
A HTML5 szabványba épp a fenti okok miatt és a keresőmotorok segítése céljából már bekerültek ezek az jelölések szemantikus elemként.
A szemantikus elemek használatával könnyebben definiálhatjuk a weboldalunk szerkeszetében, hogy melyik részen mi is található valójában és ezáltal a keresőmotorok is hatékonyabban tudják értelmezni az oldal tartalmát. A keresőoptimalizálás fontos része a szemantikus elemek helyes használata!
Szemantikus TAG-ek: