Ebben a leckében azon elemeket tekintjük át, amelyek az oldal szerkezetének precíz leírásában segíthetnek.
A következőkben megismerkedünk az úgynevezett oldalszerkezet elemekkel, amelyekkel precízen megadhatjuk az oldalrészek szemantikus jelentését.
Az egyes elemek és tulajdonságok bemutatásánál felhasználtuk és kiegészítettük Nemes Adriána A HTML5 szabvány lehetőségeinek bemutatása (ELTE IK, 2011) című diplomamunkájának részleteit (Témavezető: Abonyi-Tóth Andor).
Sajnos – a téma jellegéből adódóan –a tageket nem feltétlenül tudjuk lineárisan bemutatni, mivel ezen tagekre a többszörös egymásba ágyazás is jellemző. Így a szövegben lesznek előre- és hátrautalások is.
Mire használjuk?
Már a bevezetőben is láttuk, hogy a HTML oldalak két fő részre tagolódnak, a <head>, illetve <body> részre. Ez utóbbiban kell elhelyeznünk azokat a jelölőket, amelyek az oldalon megjelenő tartalmakat (szöveg, kép, táblázat stb.) írják le.
Paraméterek:
Az eseménykezelők működését illetően a JavaScript-programozásba történő betekintéssel együtt lenne érdemes elmélyedni, de ez a terület már nem része jelen tananyagunknak.
Mire használjuk?
A címsorok (heading) a szövegszerkesztő alkalmazásokban az oldalak logikai felosztását, a fejezetek meghatározását teszik lehetővé. Előnyük, hogy automatikusan tudunk tartalomjegyzéket generálni a címsorok struktúrájából. A HTML oldalaknál részben hasonló feladatot látnak el. Segítségükkel tagolhatjuk a tartalmunkat fejezetekre és alfejezetekre, és a navigációt is segítik.
A képernyőolvasót használóknak lehetőségük van arra, hogy az oldalon szereplő címsorokat kigyűjtsék külön ablakban, és ezen lista segítségével navigáljanak az oldalon. Gyakorlatilag ily módon a címsorok az oldal tartalomjegyzékét mutatják be a vak felhasználóknak.
A HTML nyelvben a címsorokat a <h1>, <h2>, <h3>, <h4>, <h5> vagy <h6> tagekkel adhatjuk meg. Például a <h1> az adott tartalmi blokk fő címsora, <h2> egy alcím, <h3> egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsorszintet használhatunk.
A HTML5 szabvány előtt nagyon kellett figyelni arra, hogy a címsorszintek az oldalon logikusan legyenek egymásba ágyazva, vagyis egyes szintű címsorral kezdjünk, annak lehet további kettes címsora, de például nem használhatunk úgy hármas szintű címsort, hogy ne lett volna előtte kettes szintű címsor. Ez akkor jelentett főként problémát, ha nem lehetett tudni előre, hogy egy szerver által generált tartalmi blokk milyen kontextusba generálódik, ott volt-e előtte valamilyen szintű címsor, és ha igen, milyen.
A HTML5-öt támogató alkalmazásoknál a címsorszinteket az elemek egymásba ágyazása szerint is kiértékeli a böngésző. Vagyis ha van egy fő tartalmi blokkunk, amelyben van egy egyes címsor, de annak a tartalmi blokknak van egy beágyazott tartalmi egysége szintén egyes címsorral, akkor ez utóbbit kettes szintű címsorként veszi figyelembe, és így tovább
A tag paraméterei: globális attribútumok
Hallhatjuk, hogy a címsorok felolvasásánál a JAWS bemondja azt is, hogy hányadik címsorszintről van szó.
Bár a <main> elem a HTML5 specifikációban a csoportosító elemek között kapott helyet, számunkra úgy logikus, ha az oldalszerkezet elemekkel együtt mutatjuk be.
Mire használjuk?
Az oldal fő tartalmi egységének megjelölésére szolgál. Csak egy ilyen elemet helyezhetünk el a dokumentumban, és ez az elem nem lehet gyerekeleme a később bemutatandó oldalszerkezet elemeknek (<article>, <aside>, <footer>, <header>, <nav>).
Paraméterek: globális attribútumok
Akadálymentességi irányelv, hogy a felhasználóknak legyen lehetőségük az ismétlődő blokkok elkerülésére az oldalakon. Ez praktikusan azt (is) jelenti, hogy a képernyőolvasó programot használó (vak, gyengénlátó) felhasználóknak ne kelljen minden egyes alkalommal végighallgatniuk az HTML-kódban elől szereplő navigációs linkeket, hanem ugorhassanak mindjárt a tartalomra egy link követésével. Ez a link a fő tartalmi egységre mutat, amelyet korábban a webfejlesztők (alkalmas tag hiányában) a <div> elemmel csoportosítottak, pl. <div id="main">, <div id="tartalom"> stb. módon. Láthatjuk, hogy a HTML5 szabványban már megvan az erre szolgáló tag, tehát a továbbiakban ne használjuk erre a <div> elemet, hanem alkalmazzuk helyette a <main> taget!
A tartalomra ugrás céljára használt linket a képernyőolvasó programot használók számára kell elérhetővé tennünk, a vizuális böngészőprogramokban nem kell ennek megjelennie. Ezt elérhetjük úgy, hogy a linket kipozícionáljuk a képernyőről. Így a vizuális böngészőprogramokban láthatatlan lesz, de a képernyőolvasót használók számára elérhető marad.
<a href="#tartalom" style="position:absolute;left:-9999px">Ugrás a tartalomra</a>
Mire használjuk?
Az article tagekben helyezhetjük el az oldal tartalmi egységeit. Ez lehet egy fórumbejegyzés, egy újságcikk, blogbejegyzés, vagy bármilyen más független tartalom.
A tag paraméterei: globális attribútumok
<article>
<h1>Cikk címe</h1>
<p>Cikk tartalma...</p>
</article>
Lehet saját fejléce és lábléce. Egy cikk fejléce tartalmazhatja például a cikk címét, alcímét, publikálás dátumát a fejlécet jelző <header> tag-ek között. A láblécbe <footer> pedig kerülhet a szerző neve, elérhetősége.
<article>
<header>
<h1>Cikk címe</h1>
</header>
<p>Cikk tartalma...</p>
<footer>
<p>Szerző: Gipsz Jakab, a Magyar Érdekfeszítő Társaság alapítója.</p>
</footer>
</article>
Az <article> elemek egymásba ágyazhatók. A beágyazott <article> elem egy olyan cikket reprezentál, amely szorosan kapcsolódik a külső cikkhez. Például egy blogbejegyzés esetén a felhasználók által írt kommentek beágyazott <article> elembe kerülhetnek.
Ezt mutatja az alábbi példakód:
<article>
<header>
<h1>Városi legendák</h1>
</header>
<p>A legenda szerint a Terminátor 2 Elektromodulator dva címmel futott a
szlovák mozikban, és a Hasta la vista ottani megfelelője az Ahoj, Poplacsek volt.
A szlovákok azonban nem is ismerik poplaček szót.</p>
<section>
<h1>Hozzászólások</h1>
<article>
<footer>
<p>Eszter szerint</p>
<p><time datetime="2012-10-10T19:10-08:00"></time></p>
</footer>
<p>És mi a helyzet az Elektromodulátor Dva kifejezéssel?</p>
</article>
<article>
<footer>
<p>Imi szerint</p>
<p><time datetime="2012-10-10T19:15-08:00"></time></p>
</footer>
<p>Hallottam, hogy van olyan verzió is, hogy "Motoroví Modulovy".</p>
</article>
</section>
</article>
Mire használjuk?
A header taggel fejléc adható meg. Ez a rész tartalmaz bevezető információt a weboldalról vagy annak egy részéről. Lehet szokványos fejléc vagy akár valamilyen összetett adat.
A tag paraméterei: globális attribútumok
<header>
<h1>A HTML5 szabvány</h1>
</header>
A fejléc nem egy külön része az oldalnak, hanem az egyes részeknek lehet saját fejléce.
<section>
<header>
<h1>A header tag</h1>
</header>
<p>A header tag lehet fejléce egy section tagnek is.</p>
</section>
Mire használjuk?
A <footer> a lábléc jelölésére alkalmas tag. Nemcsak az oldal egészére, de akár egy különálló részre vonatkozóan is. Ebből kifolyólag akár többször is használható egy oldalon belül. A lábléc általában a webhellyel kapcsolatos információkat tartalmazza, mint például a készítő neve, kapcsolódó dokumentumok linkjei, szerzői jogi információk stb.
A tag paraméterei: globális attribútumok
<footer>
<p>Fotó: Gipsz Jakab</p>
</footer>
Tipikus tartalma a szerző, dátum vagy bármilyen kontakt információ.
<footer>
<nav>
<p><a href="/impressum.html">Impresszum</a> —
<a href="/aszf.html">Általános szerződési feltételek</a> —
<a href="/index.html">Főoldal</a></p>
</nav>
<p>Copyright © 2013 Gipsz Jakab</p>
</footer>
Mire használjuk?
A <section> elem az oldal egy nagyobb részét foglalja magába. Azonos témához tartozó elemek csoportosítására való, melynek közös címe van. Az azonos témakörbe tartozó elemeket foglalja egy csoportba. Például egy <section> tagbe tartoznak a fejezetek, fülekkel ellátott oldalak egyes füleinek tartalma. Egy honlap például felbontható szakaszokra az alábbiak szerint: bemutatkozás, hírek, elérhetőség.
A tag paraméterei: globális attribútumok
<section>
<h1>Bevezető</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id dictum diam. </p>
</section>
<section>
<h1>Magamról</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Vivamus ornare cursus sem non porttitor.</p>
</section>
<section>
<h1>Fotóim</h1>
<img src="img1.jpg" alt="alternatív szöveg">
<img src="img2.jpg" alt="alternatív szöveg">
</section>
A <section> tageket egymásba lehet ágyazni.
<section>
<h1>Fő címsor</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<section>
<h1>Alszakasz fő címsora</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</section>
A <section> tagnek lehet fejléce és lábléce, azaz elhelyezhető benne <header> és <footer> tag is.
<section>
<header>Cím</header>
<p>szöveg</p>
<footer>lábléc</footer>
</section>
A <section> elem egy különálló részt mutat a dokumentumból, amely saját címmel rendelkezik. Hasonlóan működik, mint a <div>, amikor elválaszt egy darabot az oldalból. De a <section> nem azonos stílusú dobozok megjelenítésére való. Arra ott van a <div> tag. Nem szabad abban az esetben használni a <section> taget, amikor az <article> az <aside> vagy a <nav> tag a megfelelőbb választás.
Mire használjuk?
A <nav> elem az oldal azon részének van fenntartva, amely más oldalakra, vagy az adott lap egy bizonyos területére mutató linkeket tartalmaz. Nem kell tartalmaznia az oldalon előforduló összes linket, csak azt, amelyik az ahhoz a részhez tartozik.
A tag paraméterei: globális attribútumok
Fontos fogalmak a web-fejlesztés témakörben:
<nav>
<h1>Menü</h1>
<ul>
<li><a href="#">Menüpont 1.</a></li>
<li><a href="#">Menüpont 2.</a></li>
<li><a href="#">Menüpont 3.</a></li>
<li><a href="#">Menüpont 4.</a></li>
</ul>
</nav>
A <nav>tag tipikus tartalma linkek listája, de előfordulhatnak benne más elemek is, mint például címsorok. A <nav> taget célszerű fejlécbe vagy láblécbe elhelyezni.
<header>
<nav>
<a href="main.html">Főoldal</a>
<a href="introduction.html">Bemutatkozás</a>
<a href="newsletter.html">Hírlevél</a>
</nav>
</header>
Mire használjuk?
Az <aside> tag tartalma kapcsolatban áll az oldal fő részével, érintőlegesen kapcsolódik a körülötte levő tartalomhoz. Általában oldalsáv formájában jelenik meg, ami olyan elemeket tartalmaz, mint kapcsolódó kommentek/linkek vagy címkefelhők. Szintén jól használható idézetek megjelenítésére, vagy szószedet készítésére, mely a cikkben szereplő idegen kifejezéseket magyarázza el.
A tag paraméterei: globális attribútumok
<article>
<header>
<h1>Lorem ipsum</h1>
</header>
<p>Vestibulum lacinia, enim nec aliquam facilisis, lacus HTML mollis eros,
et varius libero sapien ut diam. Sed sit amet ultrices eros. Phasellus non
nisi sed nisi viverra pulvinar. Donec placerat ante CSS velit pulvinar eleifend.
Nulla ut sodales libero.
Donec a rutrum risus.</p>
<aside>
<dl>
<dt>HTML</dt>
<dd>Leíró nyelv weblapok készítésére (HyperText Markup Language)</dd>
<dt>CSS</dt>
<dd>Stílusleíró nyelv (Cascading Style Sheets)</dd>
</dl>
</aside>
</article>
Mire használjuk?
Kontakt információ megadására használható, amely a legközelebbi <article>, vagy a <body> elemre vonatkozik. Tipikus, hogy a <footer> elemben kerül elhelyezésre.
A tag paraméterei: globális attribútumok
<footer> <address> Bővebb információért kérjük lépjen velünk kapcsolatba a következő elérhetőségen: <a href="mailto:info@gipszjakab.hu">Gipsz Jakab</a>. </address> <p><small>© copyright Gipszilon Kft..</small></p> </footer>
Az alábbi példában a fent bemutatott oldalszerkezet elemek mindegyikét használtuk az oldal struktúrájának leírásához.
A fenti példát kipróbálva láthatjuk, hogy ezen elemek többségének nincs semmilyen látványos hatása, ebben az esetben is a szemantika a lényeg, vagyis hogy az elemek szerepét precízen leírjuk. Ahhoz, hogy ezen elemek megjelenését át tudjuk alakítani, mélyebb tudásra lesz szükségünk a stíluslapok területén, így erre visszatérünk pár fejezettel később.
Most viszont folytassuk a HTML5 lehetőségeinek megismerését!
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.