Trenutno se HTML dokumenti večinoma strukturirajo z uporabo elementov div. Oblikovanje in pozicioniranje teh vsebnikov se običajno izvaja s pomočjo CSS. Za programsko opremo, kot so bralniki zaslona, je ta pristop seveda neuporaben, saj ne morejo prepoznati, kakšen pomen imajo določene vsebine. To naj bi se spremenilo z novimi elementi za strukturiranje.
Dva najpomembnejša nova elementa sta sekcija (section) in članek (article), ki sta v tem vadnem programu v središču pozornosti.
Označevanje člankov
Z uporabo elementa article lahko besedila (forumski prispevki, članki v časopisu itd.) označimo kot članek. Naslednji primer prikazuje definicijo tipičnega članka.
<article> <h1>Ustvarjanje spletnih aplikacij (Del 09): jQuery mobilno (1)</h1> <p>jQuery je nedvomno ena najbolj znanih JavaScript knjižnic. Na „klasičnih“ spletnih straneh je jQuery že tisočkrat uporabljen ...</p> ... </article>
Zahvaljujoč elementu article lahko svoje vsebine semantično strukturirate.
Kako takšno strukturiranje lahko izgleda, se lahko lepo prikaže na primeru bloga.
<article>
<header>
<h1>Ustvarjanje spletnih aplikacij (Del 09): jQuery mobilno (1)</h1>
<p>Objavljeno dne: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery je nedvomno ena najbolj znanih JavaScript knjižnic. Na „klasičnih“ spletnih straneh je jQuery že tisočkrat uporabljen ...</p>
...
<footer>
<p><small>Avtorske pravice pripadajo spletni strani PSD-Tutorials.de</small></p>
</footer>
</article>
V tem primeru so znotraj elementa article izvedene tipične razdelitve na glavo, glavno vsebino in zgornji del strani. Takšna razdelitev je pogosto prisotna v blogih.
Ustvarjanje sekcij
Nadaljujemo z elementom section. Element section razdeli stran na različne odseke. Lahko gre na primer za odseke, poglavja, zavihke itd. S pomočjo sectiona je mogoče ločiti logične sklope, kot so uvod in trenutne novice.section služi razdelitvi vsebin glede na dejanske vsebinske vidike. Na razliko med section in div bom sicer še enkrat spregovoril na koncu tega vadnika.
Naslednji primer prikazuje tipično strukturo bloga. Vendar ta struktura vsebuje še nekaj, kar je v mnogih blogih dejansko potrebno, in sicer območje za komentarje. To območje komentarjev je določeno znotraj elementa section. Posamezni komentarji znotraj območja elementa section pa so oviti v vsak svoj element article.
<article>
<header>
<h1>Ustvarjanje spletnih aplikacij (Del 09): jQuery mobilno (1)</h1>
<p>Objavljeno dne: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery je nedvomno ena najbolj znanih JavaScript knjižnic. Na „klasičnih“ spletnih straneh je jQuery že tisočkrat uporabljen...</p>
...
<section>
<h2>Komentarji</h2>
<article>
<header>
<h3>Pripomogel Newsfriend</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Pred eno uro</time></p>
</header>
<p>Hvala za vadnico!</p>
</article>
<article>
<header>
<h3>Pripomogel Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Pred dvema urama</time></p>
</header>
<p>Odlično! To mi bo pomagalo.</p>
</article>
</section>
</article>Še enkrat opozarjam, da bom seveda podrobneje govoril o tukaj uporabljenih elementih, kot so header, footer in podobno. Zaenkrat naj povem le toliko: S temi elementi je mogoče vsebino razdeliti na vrhnji in spodnji del strani, torej omogočajo nadaljnjo logično strukturiranje dokumentov.
Drugi primer naj bo kombinacija elementov article in section. Element section je namreč mogoče uporabiti za razdelitev članka v logične vsebinske sklope, ki imajo vsak svoje naslove.
<article>
<h1>Razvoj aplikacij</h1>
<p>Tukaj izveste, kako ustvariti spletne aplikacije.</p>
<section>
<h2>Ustvarjanje spletnih aplikacij (Del 09): jQuery mobilno (1)</h2>
<p>jQuery je nedvomno ena najbolj znanih JavaScript knjižnic.</p>
</section>
<section>
<h2>Ustvarjanje spletnih aplikacij (Del 08): Hiter začetek z jQuery</h2>
<p>JavaScript je za spletne strani čudovita reč, saj je mogoče z njim početi marsikaj zanimivega.</p>
</section>
</article>
Tudi znotraj elementa section je mogoče določiti elemente article. Tipičen primer za to je lahko območje za komentarje, kot je bilo že prikazano. Možna je tudi razdelitev sekcije glede na tematska področja, ki se jih obravnava na blogu.
Tudi tukaj je ponovno ustrezni primer:
<section>
<h1>App-razvoj</h1>
<article>
<h2>Ustvarjanje spletnih aplikacij (del 09): jQuery mobile (1)</h2>
<p>jQuery je nedvomno ena najbolj znanih JavaScript knjižnic.</p>
</article>
<article>
<h2>Ustvarjanje spletnih aplikacij (del 08): Hitro spoznavanje jQuery</h2>
<p>JavaScript je za spletne strani super stvar, saj omogoča izvajanje različnih zanimivih stvari.</p>
</article>
</section>
V section-elementu so lahko vsebovani drugačni section-elementi. Vgrajevanja so torej dovoljena. Tudi za to je primer:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Dobrodošli</h2>
<p>Veselimo se...</p>
</section>
<section>
<h2>Vodiči</h2>
<P>Tukaj so naši najnovejši vodiči...</p>
</section>
<aside>
<p>Kontakt</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
To vgrajevanje section ustvari naslednjo strukturo:
1. PSD-Tutorials.de
1.1 Dobrodošli
1.2 Vodiči
1.3 Kontakt
- (c) 2014 PSD-Tutorials.de
Takšne strukturiranja so torej prav tako mogoča.
Razlika med div, article in section
Po priznanju ni ravno lahko jasno razumeti ločitve med div, article in section. Dejansko je article-element sprva določen za strukturiranje blog objav. Section-element je dejansko postavljen eno raven pod article. Znotraj section-elementa naj bi bil vedno določen tudi naslov. Tudi če dejansko ni določenega naslova, bi moralo biti teoretično mogoče navesti naslov znotraj ustrezne rubrike.
Seveda div-elementi tudi v HTML5 niso zanič, temveč bi jih morali še naprej uporabljati. Zanimivi so na primer, kadar gre za združevanje elementov.
Zadnje, a ne nazadnje, je opozorilo glede vizualnih učinkov doslej predstavljenih elementov. Dejansko za ustrezno oblikovanje potrebujete CSS. Običajna uporaba prikazanih elementov nima učinka v brskalniku. Semantično strukturirate vsebino. Vse kar zadeva videz, urejate preko slogovnih datotek.
