Praegusel ajal struktureeritakse HTML-dokumendid peamiselt div-elementide abil. Nende konteinerite vormindamine ja paigutamine toimub tavaliselt CSS-iga. Selline lähenemine on mõistetavalt ekraanilugejate jaoks kasutu, kuna need ei suuda tuvastada konkreetsete sisu osade tähendust. Uute struktureerimiselementide abil on see olukord muutumas.
Kaks olulist uut elementi on jaotis (section) ja artikkel (article), mis on selle juhendis fookuses.
Artiklite tähistamine
Artikli elemendi abil saab määrata tekstid (foorumipostitused, ajaleheartiklid jne) artikliteks. Järgmine näide näitab tüüpilise artikli määratlust.
<article> <h1>Veebirakenduste loomine (Osa 09): jQuery mobiilne (1)</h1> <p>jQuery on kahtlemata üks tuntumaid JavaScripti raamistikke. "Tavalistel" veebisaitidel on jQuery juba tuhandeid kordi kasutatud ...</p> ... </article>
Artikli elemendi abil saate sisu semantiliselt struktureerida.
Nagu see võib välja näha, saab seda väga selgelt näidata blogi näitel.
<article>
<header>
<h1>Veebirakenduste loomine (Osa 09): jQuery mobiilne (1)</h1>
<p>Avaldatud: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery on kahtlemata üks tuntumaid JavaScripti raamistikke. "Tavalistel" veebisaitidel on jQuery juba tuhandeid kordi kasutatud ...</p>
...
<footer>
<p><small>Autoriõigus PSD-Tutorials.de poolt</small></p>
</footer>
</article>
Selles näites jaotatakse article elemendi sees tüüpiline peamine ja alaosa ning sellist jaotust kohtab blogides väga sageli.
Sektsioonide loomine
Jätkame section elemendiga. Sektsioonielement jagab lehe erinevateks osadeks. See võib olla jaotised, peatükid, kaardid jne. Sektsiooni abil saab loogiliselt eraldada osi nagu sissejuhatus ja ajakohased teated.Sektsioon jagab sisu tõepoolest sisuliselt oluliste aspektide järgi. Vahe section ja div vahel tuleb ma hiljem selle juhendi lõpus veel käsitlema.
Järgmine näide näitab tüüpilist blogistruktuuri. Selle struktuuri sees on aga midagi, mida paljudes blogides tõesti vaja on, nimelt kommentaaride alaosa. See kommentaaride alaosa on määratletud section elemendina. Üksikud kommentaarid section piirkonnas on aga omakorda piiratud article elemendiga.
<article>
<header>
<h1>Veebirakenduste loomine (Osa 09): jQuery mobiilne (1)</h1>
<p>Avaldatud: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery on kahtlemata üks tuntumaid JavaScripti raamistikke. "Tavalistel" veebisaitidel on jQuery juba tuhandeid kordi kasutatud...</p>
...
<section>
<h2>Kommentaarid</h2>
<article>
<header>
<h3>Kommenteerinud: Uudissõber</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Tund aega tagasi</time></p>
</header>
<p>Aitäh õpetuse eest!</p>
</article>
<article>
<header>
<h3>Kommenteerinud: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Kaks tundi tagasi</time></p>
</header>
<p>Suurepärane! See aitab mul edasi.</p>
</article>
</section>
</article>Siinkohal tuleb veel kord mainida, et ma räägin siin kasutatavatest elementidest nagu header, footer jne veel üksikasjalikumalt. Selles punktis niipalju: Need elemendid võimaldavad sisu jagada päise ja jaluse piirkonnaks, võimaldades seega dokumentide edasist loogilist struktureerimist.
Teine näide peaks veelgi selgemaks muutma article ja section elementide kombinatsiooni. Tegelikult saab section elementi kasutada artikli jagamiseks loogilisteks sisuosadeks, millel on omad pealkirjad.
<article>
<h1>Rakenduste arendamine</h1>
<p>Siin saate teada, kuidas luua veebirakendusi.</p>
<section>
<h2>Veebirakenduste loomine (Osa 09): jQuery mobiilne (1)</h2>
<p>jQuery on kahtlemata üks tuntumaid JavaScripti raamistikke.</p>
</section>
<section>
<h2>Veebirakenduste loomine (Osa 08): Sissejuhatus kiirreeglitesse jQuery's</h2>
<p>JavaScript on veebisaitide jaoks suurepärane tööriist, kuna sellega saab teha mitmesuguseid huvitavaid asju.</p>
</section>
</article>
Sisemiste section elemendi sees article elementide defineerimine on samuti võimalik. Tüüpiline näide sellest võib olla kommentaariala, nagu juba näidatud. Samuti võite mõelda sektsiooni jaotamiseks blogis käsitletavatesse teemavaldkondadesse.
Ka siin on vastav näide:
<section>
<h1>Rakenduse arendamine</h1>
<article>
<h2>Veebirakenduste loomine (Osa 09): jQuery mobile (1)</h2>
<p>jQuery on kahtlemata üks tuntumaid JavaScripti raamistikke.</p>
</article>
<article>
<h2>Veebirakenduste loomine (Osa 08): Kiirkursus jQuery'sse</h2>
<p>JavaScript on veebilehtedel hea asi, sest sellega saab teha mitmesuguseid huvitavaid asju.</p>
</article>
</section>
Lisaks võivad section elemendi sees olla teised section elemendid. Pesitsemised on lubatud. Siin on veel üks näide:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Tere tulemast</h2>
<p>Oleme rõõmsad...</p>
</section>
<section>
<h2>Õpetused</h2>
<p>Siin on meie uusimad õpetused...</p>
</section>
<aside>
<p>Kontakt</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
See section pesitsemine annab järgmise struktuuri:
1. PSD-Tutorials.de
1.1 Tere tulemast
1.2 Õpetused
1.3 Kontakt
- (c) 2014 PSD-Tutorials.de
Sellised struktureerimised on samuti võimalikud.
Vahe div, article ja section vahel
Tuleb tunnistada, et pole päris lihtne mõista vahet div, article ja section vahel. Tegelikult on article element esialgu mõeldud blogipostituste struktureerimiseks. Section element peaks olema tegelikult article elemendi all. Lisaks peaks section elemendi sees alati olema määratud pealkiri. Isegi kui pealkirja tegelikult ei määrata, peaks olema teoreetiliselt võimalik määrata vastavas elemendis ikkagi pealkiri.
Mõistagi ei ole div elemendid HTML5-s keelatud, vaid peaksid jätkuvalt kasutust leidma. Nad on näiteks huvitavad, kui tuleb elemente kokku võtta.
Lõpetuseks aga veel kord märkus seni esitletud elementide välimuse mõju kohta. Tegelikult vajate vastava vorminduse jaoks CSS-i. Seni näidatud elementide tavaline kasutamine ei too brauseris kaasa mingit efekti. Te kujundate sisu struktuurselt. Kõiki välimusega seotud küsimusi reguleerite stiililehtedega.
