Aktuálne sa väčšina HTML dokumentov zvyčajne štrukturuje pomocou elementov div. Formátovanie a pozíciu týchto kontajnerov zvyčajne zabezpečuje CSS. Pre softvér ako čítačky obrazovky je tento postup samozrejme nepoužiteľný, pretože nevedia rozpoznať, aký význam majú určité obsahy. To sa má zmeniť pomocou nových štruktúrovaných prvkov.
Dva z najdôležitejších nových prvkov sú sekcia a článok, na ktoré sa budeme v tomto návode zameriavať.
Označovanie článkov
Pomocou prvku article môžete označiť texty (príspevky na fórach, novinové články atď.) ako články. Nasledujúci príklad ukazuje definíciu typického článku.
<article> <h1>Vytváranie web aplikácií (časť 09): jQuery mobile (1)</h1> <p>jQuery je nepochybne jedným z najznámejších JavaScriptových frameworkov. Na „klasických“ webových stránkach je jQuery už tisíckrát nasadený ...</p> ... </article>
article môžete teda svoj obsah štruktúrovať z hľadiska významov.
Ako to môže vyzerať, je možné veľmi dobre demonštrovať na príklade blogu.
<article>
<header>
<h1>Vytváranie web aplikácií (časť 09): jQuery mobile (1)</h1>
<p>Publikované: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery je nepochybne jedným z najznámejších JavaScriptových frameworkov. Na „klasických“ webových stránkach je jQuery už tisíckrát nasadený ...</p>
...
<footer>
<p><small>Autorské práva PSD-Tutorials.de</small></p>
</footer>
</article>
V tomto príklade sa v rámci prvku article často používa typické rozdelenie na hlavičku, hlavnú časť a päty. Takéto rozdelenie je veľmi časté v blogoch.
Vytváranie sekcií
Pokračujeme s prvkom section. Prvok section rozdeľuje stránku na rôzne sekcie. Môže ísť napríklad o sekcie, kapitoly, karty atď. Pomocou section je možné logicky oddeliť oblasti ako Úvod a aktuálne správy.section slúži na rozdelenie obsahu podľa skutočných obsahových kritérií. Rozdiel medzi section a div budem neskôr v tomto návode podrobne vysvetľovať.
Nasledujúci príklad ukazuje typickú štruktúru blogu. Táto štruktúra však obsahuje ešte niečo, čo je v mnohých blogoch skutočne potrebné, a to je časť s komentármi. Táto časť s komentármi je definovaná v rámci prvku section. Jednotlivé komentáre v rámci oblasti section sú zase uzavreté v jednotlivých prvkoch article.
<article>
<header>
<h1>Vytváranie web aplikácií (časť 09): jQuery mobile (1)</h1>
<p>Publikované: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery je nepochybne jeden z najznámejších JavaScriptových frameworkov. Na „klasických“ webových stránkach je jQuery už tisíckrát nasadený...</p>
...
<section>
<h2>Komentáre</h2>
<article>
<header>
<h3>Komentoval: Newsfriend</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Pred hodinou</time></p>
</header>
<p>Ďakujem za návod!</p>
</article>
<article>
<header>
<h3>Komentoval: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Pred dvoma hodinami</time></p>
</header>
<p>Super! Toto mi pomáha.</p>
</article>
</section>
</article>Tu ešte raz dávam do pozornosti, že elementy používané aj tu ako header, footer atď. budem samozrejme neskôr detailne vysvetľovať. Na tomto mieste len toľko: Tieto prvky umožňujú rozdelenie obsahu na hlavu a päty, takže umožňujú ďalšiu logickú štruktúru dokumentov.
Iný príklad jasne ilustruje kombináciu prvkov article a section. V skutočnosti je možné prvok section využiť na logické členenie článku na obsahové oblasti s vlastnými nadpismi.
<article>
<h1>Vývoj aplikácií</h1>
<p>Tu zistíte, ako vytvárať web aplikácie.</p>
<section>
<h2>Vytváranie web aplikácií (časť 09): jQuery mobile (1)</h2>
<p>jQuery je nepochybne jeden z najznámejších JavaScriptových frameworkov.</p>
</section>
<section>
<h2>Vytváranie web aplikácií (časť 08): Rýchly štart s jQuery</h2>
<p>JavaScript je pre webové stránky skvelá vec, pretože sa dajú dosiahnuť rôzne zaujímavé veci.</p>
</section>
</article>
Taktiež je možné vnútri prvku section definovať prvky article. Typickým príkladom môže byť časť s komentármi, ako bolo už uvedené. No možná je aj logické rozdelenie sekcie na témy, ktoré sú spracované v blogu.
Tu je opäť príslušný príklad:
<section>
<h1>Vývoj aplikácií</h1>
<article>
<h2>Vytváranie webových aplikácií (časť 09): jQuery mobile (1)</h2>
<p>jQuery je nepochybne jedným z najznámejších JavaScriptových rámcov.</p>
</article>
<article>
<h2>Vytváranie webových aplikácií (časť 08): Rýchly štart s jQuery</h2>
<p>JavaScript je pre webové stránky veľmi užitočný, veď ním sa dajú robiť všelijaké zaujímavé veci.</p>
</article>
</section>
Okrem toho, v elemente sekcie môžu byť obsiahnuté ďalšie sekcia-elementy. Vnorené elementy sú teda povolené. Tu je ďalší príklad:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Vitajte</h2>
<p>>Tešíme sa...</p>
</section>
<section>
<h2>Návody</h2>
<p>Tu nájdete naše najnovšie návody...</p>
</section>
<aside>
<p>Kontakt</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Takto vnorená sekcia vytvára nasledujúcu štruktúru:
1. PSD-Tutorials.de
1.1 Vitajte
1.2 Návody
1.3 Kontakt
- (c) 2014 PSD-Tutorials.de
Podobné štruktúry sú teda rovnako možné.
Rozdiel medzi div, article a sec
Priznajme si, že nie je úplne jednoduché pochopiť rozdiel medzi div, article a section. Skutočne, prvotným určením elementu article bolo štruktúrovanie blogových príspevkov. Element section je v skutočnosti situovaný o úroveň nižšie ako article. Vnútri elementu section by mal byť vždy definovaný nadpis. Aj keď sa skutočne žiadny nadpis neurčí, malo by byť teoreticky možné špecifikovať nadpis v rámci príslušného elementu.
Samozrejme, elementy div nie sú ani v HTML5 nepopulárne a majú sa stále používať. Zaujímavé sú napríklad vtedy, keď ide o zoskupovanie prvkov.
Na záver však ešte raz dodávame upozornenie týkajúce sa vizuálnych účinkov doteraz predstavených prvkov. Pre ich správne formátovanie potrebujete CSS. Normálne použitie zobrazených prvkov totiž nemá žiadny účinok v prehliadači. Semanticky štruktúrujete len obsah. To, čo sa týka vizuálu, upravujete pomocou štýlových předložiek.
