V současné době jsou HTML dokumenty často strukturovány pomocí prvků div. Formátování a pozicování těchto kontejnerů se obvykle provádí pomocí CSS. Pro software jako čtečky obrazovky je tento přístup samozřejmě bezcenný, protože nedokáží rozpoznat, jaký význam mají určité obsahy. Tohle by se mělo změnit novými strukturálními prvky.
Dva z nejdůležitějších nových prvků jsou sekce a článek, které jsou v tomto tutoriálu ve středu pozornosti.
Označení článků
Pomocí prvku article lze označit texty (příspěvky na fórách, novinové články atd.) jako články. Následující příklad ukazuje definici typického článku.
<article> <h1>Vytváření webových aplikací (Část 09): jQuery mobile (1)</h1> <p>jQuery je nepochybně jedním z nejznámějších JavaScriptových rámčeků. Na „klasických“ webových stránkách je jQuery tak již tisíckrát používáno...</p> ... </article>
Díky prvku article můžete strukturovat svůj obsah sémanticky.
Jak by takový obsah mohl vypadat, lze velmi dobře vidět na příkladu blogu.
<article>
<header>
<h1>Vytváření webových aplikací (Část 09): jQuery mobile (1)</h1>
<p>Publikováno: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery je nepochybně jedním z nejznámějších JavaScriptových rámčeků. Na „klasických“ webových stránkách je jQuery tak již tisíckrát používáno...</p>
...
<footer>
<p><small>Copyright by PSD-Tutorials.de</small></p>
</footer>
</article>
V tomto příkladu je uvnitř prvku article provedeno velmi typické rozdělení na záhlaví, hlavní část a zápatí. A takové rozdělení je velmi často vidět v blogu.
Vytváření sekcí
Pokračujeme s prvkem section. Prvek section rozděluje stránku do různých sekcí. Může jít například o sekce, kapitoly, záložky apod. Pomocí section lze logicky oddělit oblasti jako úvod a aktuální zprávy.section slouží k rozdělení obsahu podle skutečných obsahových hledisek. Na rozdíl mezi section a div se mimochodem budu znovu věnovat na konci tohoto tutoriálu.
Následující příklad ukazuje typickou strukturu blogu. Tato struktura však obsahuje ještě něco, co je ve mnoha blocích skutečně potřeba, a to je oblast komentářů. Tato oblast komentářů je definována uvnitř prvku section. Jednotlivé komentáře v rámci oblasti section jsou pak obaleny každý do prvku article.
<article>
<header>
<h1>Vytváření webových aplikací (Část 09): jQuery mobile (1)</h1>
<p>Publikováno: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery je nepochybně jedním z nejznámějších JavaScriptových rámčeků. Na „klasických“ webových stránkách je jQuery tak již tisíckrát používáno...</p>
...
<section>
<h2>Komentáře</h2>
<article>
<header>
<h3>Komentoval/a: Přítel zpráv</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Před hodinou</time></p>
</header>
<p>Díky za tutoriál!</p>
</article>
<article>
<header>
<h3>Komentoval/a: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Před dvěma hodinami</time></p>
</header>
<p>Výborné! To mi pomáhá.</p>
</article>
</section>
</article>Zde ještě jednou poznamenání, že se na prvky použité také jako header, footer apod. samozřejmě ještě podrobněji vrátím. V tomto bodě jen tolik: Tyto prvky umožňují rozdělit obsah na záhlaví a zápatí, umožňují tedy další logickou strukturu dokumentů.
Jiný příklad má dále objasnit kombinaci prvků article a section. Ve skutečnosti lze prvek section použít k rozdělení článku do logických oblastí obsahu, z nichž každá má svůj vlastní nadpis.
<article>
<h1>Vývoj aplikací</h1>
<p>Zde se dozvíte, jak vytvářet webové aplikace.</p>
<section>
<h2>Vytváření webových aplikací (Část 09): jQuery mobile (1)</h2>
<p>jQuery je nepochybně jedním z nejznámějších JavaScriptových rámčeků.</p>
</section>
<section>
<h2>Vytváření webových aplikací (Část 08): Rychlý vstup do jQuery</h2>
<p>JavaScript je pro webové stránky skvělá věc, koneckonců se dají prostřednictvím něj provést všechny druhy zajímavých věcí.</p>
</section>
</article>
Je mimochodem také možné uvnitř prvku section definovat prvky article. Typickým příkladem může být oblast komentářů, jak už bylo ukázáno. Ale také je možné rozdělit sekci na témata, kterým se blog věnuje.
Zde opět příslušný příklad:
<section>
<h1>Vytváření aplikací</h1>
<article>
<h2>Vytváření webových aplikací (část 09): jQuery mobile (1)</h2>
<p>jQuery je jednoznačně jedním z nejznámějších JavaScriptových rámců.</p>
</article>
<article>
<h2>Vytváření webových aplikací (část 08): Rychlé seznámení s jQuery</h2>
<p>JavaScript je pro webové stránky skvělým nástrojem, umožňuje provádět různé zajímavé věci.</p>
</article>
</section>
Dále může být v prvcích, které jsou obsaženy v prvku section, obsaženo jiné section. Tzn. vnořování je povoleno. Zde je příklad:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Vítejte</h2>
<p>Těšíme se...</p>
</section>
<section>
<h2>Návody</h2>
<p>Zde najdete naše nejnovější návody...</p>
</section>
<aside>
<p>Kontakt</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Takovéto vnoření section vytváří následující strukturu:
1. PSD-Tutorials.de
1.1 Vítejte
1.2 Návody
1.3 Kontakt
- (c) 2014 PSD-Tutorials.de
Takové struktury jsou tedy také možné.
Rozdíl mezi div, article a section
Není zcela jednoduché pochopit rozdíl mezi div, article a section. Ve skutečnosti byl prvek article definován primárně pro strukturování blogových příspěvků. Prvek section je vlastně umístěn na úrovni pod article. Navíc by měl být vždy definován nadpis uvnitř prvku section. I když by skutečně nebylo definováno žádné záhlaví, mělo by být teoreticky možné v tomto prvku nadpis uvést.
Samozřejmě, prvky div nejsou v HTML5 zapovězené, stále by měly být používány. Jsou zajímavé například v případech, kdy jde o shlukování prvků dohromady.
Nakonec je tu ještě upozornění ohledně vizuálního dopadu doposud představených prvků. Pro správné formátování potřebujete CSS. Běžné používání zobrazených prvků totiž nemá žádný efekt v prohlížeči. Strukturuje v nich pouze obsah sémanticky. Veškeré vizuální aspekty jsou řešeny pomocí stylopisů.
