3.1. fejezet¶
A fejezet anyaga¶
A HTML5 szemantikus tagek¶
Az 1. fejezetben láttunk példát a weboldalak tartalmának strukturálására. Emlékeztetőül: a <div> és <span> tagekkel általános célú szakaszokat, tartalmi egységeket alakítottunk ki.
A <div> egy blokkszintű (block) objektum, ami azt jelenti, hogy mindig új sorban kezdődik, és kihasználja a teljes rendelkezésre álló szélességet. Ezzel szemben a <span> egy sorszintű (inline) elem, tehát nem kezdődik új sorban, és szélessége is csak akkora, mint amekkora helyre szüksége van.
A <div> és <span> tagek mellé, a HTML5 szabványban új, szemantikus jelentéssel bíró strukturális elemeket vezettek be:
<header>...</header>: az oldal vagy egy tartalmi egység fejléce<footer>...</footer>: az oldal vagy egy tartalmi egység lábléce<nav>...</nav>: navigációs menü<aside>...</aside>: érintőlegesen kapcsolódó tartalom (jellemzően oldalsáv)<main>...</main>: fő tartalom<section>...</section>: logikai egység<article>...</article>: önálló tartalom.
A fenti tagek kivétel nélkül blokkszintű (block) elemek, a <div>-hez hasonlóan.
Ezek a tagek - az általános célú <div> és <span> tagekkel ellentétben - szemantikai jelentéssel bírnak, tehát egyértelműen meghatározzák a tartalmuk jelentését (pl. egy <nav>-ról tudjuk, hogy valamilyen navigációt valósít meg).
A HTML5-ben bevezetett szemantikus tageket felhasználva precízebben leírhatjuk egy weboldal szerkezetét. Ezekkel a tagekkel készíthetünk például az alábbihoz hasonló elrendezésű weboldalt. (Az ábra forrása)
Megjegyzés
Ahhoz, hogy az ábrán látotthoz hasonló elrendezést kapjunk, a tanult tagek használata önmagában nem elegendő (pl. az <aside> nem fog automatikusan oldalra kerülni). Az elemek helyzetének megadására a CSS-beli pozicionálást használhatjuk.
A HTML DOM¶
Valószínűleg mindenkinek feltűnt, hogy a HTML dokumentumok lényegében HTML objektumok (tagek) egymásba ágyazásából épülnek fel. Ezek az objektumok egy hierarchikus fastruktúrát alkotnak a dokumentumban.
Amikor egy weboldal betöltődik, akkor a böngésző elkészíti a HTML objektumokból az úgynevezett dokumentum-objektum modellt - ezt a továbbiakban röviden csak DOM-nak fogjuk nevezni. A DOM fa (DOM tree) segítségével könnyen szemléltethetjük a HTML elemek hierarchikus viszonyait. Nézzünk egy egyszerű példát DOM fára!
Példa: Egy egyszerű HTML kód és a hozzá tartozó DOM fa
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | |
HTML objektumok viszonyai¶
Ahhoz, hogy a továbbiakban egyszerűen tudjunk beszélni a HTML objektumok viszonyairól, bevezetünk néhány fogalmat.
Ha az A objektum közvetlenül tartalmazza a B objektumot, akkor azt mondjuk, hogy az A objektum a B objektum szülője, a B objektum pedig A gyereke. Például a fenti kódban és az ahhoz tartozó DOM fában a <body> objektum a <h1>, <img> és <p> elemek szülője, vagy másképp mondva: a <h1>, <img> és <p> elemek a <body> gyerekei. Az viszont például nem igaz, hogy az <a> objektum a <body> gyereke lenne, hiszen itt a tartalmazás nem közvetlen.
Ha az A és B objektumok szülője megegyezik, akkor A és B egymás testvérei. Például a fenti kódban és az ahhoz tartozó DOM fában a <h1>, <img> és <p> objektumok egymás testvérei, hiszen mindhárom objektum szülője a <body>.
A DOM fa tetején lévő, szülővel nem rendelkező elemet gyökérelemnek nevezzük. A teljes HTML DOM-ban ez a gyökérelem mindig a <html> tag lesz (ugyanis ebbe ágyazunk be minden további HTML elemet).
A DOM gyakorlati jelentősége¶
Hamarosan látni fogjuk, hogy CSS-ben használunk olyan szelektorokat is, amelyek egymáshoz való DOM-beli viszonyaik alapján jelölnek ki HTML objektumokat.
Emellett a webes világban gyakran előfordul, hogy azután szeretnénk manipulálni a DOM-fát, miután a weboldal betöltődött (pl. szeretnénk egy objektumot módosítani vagy törölni, esetleg egy új objektumot akarunk a fába beszúrni). Erre biztosítanak lehetőséget a JavaScript DOM-műveletei. Ezen a kurzuson nem tárgyaljuk a JavaScriptet, viszont a Szkriptnyelvek kurzuson részletesen tanulhatunk a különböző DOM-manipulációs lehetőségekről.