Šiuo metu HTML dokumentai daugiausia struktūruojami naudojant div elementus. Tada šių konteinerių formatavimas ir pozicionavimas dažniausiai atliekamas naudojant CSS. Toks požiūris yra beprasmiškas šio tipo programinei įrangai, pvz., skaitomiesiems, nes jie negali nustatyti, kokia reikšmė turi tam tikri turinio elementai. Tai turėtų pasikeisti naudojant naujus struktūrizavimo elementus.
Dvi svarbiausios naujosios elementų yra skyrius (section) ir straipsnis (article), kurie yra šiame vadove.
Žymėti straipsnį
Naudodami article elementą galite nurodyti tekstus (forumo pranešimus, laikraščių straipsnius ir kt.) kaip straipsnius. Šiame pavyzdyje parodytas tipinio straipsnio apibrėžimas.
<article> <h1>Kurti saityno programas (Dalis 09): jQuery mobili (1)</h1> <p>jQuery be abejo yra vienas iš žinomiausių JavaScript karkasų. "Klasikinėse" svetainėse jau tūkstančius kartų naudojamas jQuery ...</p> ... </article>
Dėka article elemento galite semantiškai struktūrizuoti savo turinį.
Kaip tai gali atrodyti, labai gražiai galima parodyti blogo pavyzdyje.
<article>
<header>
<h1>Kurti saityno programas (Dalis 09): jQuery mobili (1)</h1>
<p>Paskelbta: <time pubdate="pubdate">2014-05-24</time></p>
</header>
<p>jQuery be abejo yra vienas iš žinomiausių JavaScript karkasų. "Klasikinėse" svetainėse jau tūkstančius kartų naudojamas jQuery ...</p>
...
<footer>
<p><small>Autorinių teisių savininkas: PSD-Tutorials.de</small></p>
</footer>
</article>
Šiame pavyzdyje, article elemente, tipiškai yra atliekama įprasta klasifikacija į antraštės, pagrindinius ir apatinio rodinio sritis. Tokia klasifikacija dažnai randama tinklaraščiuose.
Sukurti sekcijas
Toliau su section elementu. Section elementas padalina puslapį į įvairias sekcijas. Tai gali būti sekcijos, skyriai, skirtukai ir pan. Skirtingos sekcijos, pavyzdžiui, įvadas ir naujienos, gali būti loginiu būdu atskirtos naudojant section. Taigi, section yra naudojamas turinio suskirstymui pagal faktinį turinį. Apie skirtumą tarp section ir div kalbėsiu vėliau šiame vadove.
Pavyzdyje parodyta tipinė blogo struktūra. Tačiau ši struktūra dar turi kažką, ką dažnai reikia daugelyje blogų, t. y. komentarų sritį. Ši komentarų sritis yra apibrėžta section elemente. Atskiri komentarai section srityje vėlumas yra įdėti į kiekvieną article elementą.
<article>
<header>
<h1>Kurti saityno programas (Dalis 09): jQuery mobili (1)</h1>
<p>Paskelbta: <time pubdate="pubdate">2014-05-24</time></p>
</header>
<p>jQuery be abejo yra vienas iš žinomiausių JavaScript karkasų. "Klasikinėse" svetainėse jau tūkstančius kartų naudojamas jQuery ...</p>
...
<section>
<h2>Komentarai</h2>
<article>
<header>
<h3>Komentaras nuo: Newsfriend</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Prieš valandą</time></p>
</header>
<p>Dėkojame už vadovą!</p>
</article>
<article>
<header>
<h3>Komentaras nuo: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Prieš dvi valandas</time></p>
</header>
<p>Puiku! Tai man labai padėjo.</p>
</article>
</section>
</article>Dar kartą noriu paminėti, kad čia taip pat naudojamų elementų kaip header, footer ir kt. apie juos kalbėsiu išsamiau vėliau. Tiesiog šiuo metu pakanka pasakyti: Šie elementai leidžia suskirstyti turinį į viršutinį ir apatinį plotį, taigi leidžia dar vieną loginį dokumentų struktūrizavimo galimybę.
Kitas pavyzdys turėtų iliustruoti article ir section elementų derinį. Iš tiesų, section elementą galima naudoti straipsnio suskirstymui į loginius turinio blokus, kurie turi atskiras antraštės.
<article>
<h1>Programų kūrimas</h1>
<p>>Čia sužinosite, kaip sukurti internetines programas.</p>
<section>
<h2>Kurti saityno programas (Dalis 09): jQuery mobili (1)</h2>
<p>jQuery be abejo yra vienas iš žinomiausių JavaScript karkasų.</p>
</section>
<section>
<h2>Kurti saityno programas (Dalis 08): Greitas pradžios vadovas jQuery</h2>
<p>JavaScript tinklalapiams yra puiki priemonė, juk leidžia kurti įvairias įdomias dalykas.</p>
</section>
</article>;
Beje, taip pat galima aprašyti article ir section elementų derinį. Tipinis pavyzdys gali būti komentarų sritis, kaip jau buvo parodyta. Tačiau taip pat įmanomas skyriaus suskirstymas į temų sritis, kurias nagrinėjate tinklaraštyje.
Taip pat čia yra atitinkamas pavyzdys:
<section>
<h1>App-Plėtra</h1>
<article>
<h2>Kurti internetines programas (Dalis 09): jQuery mobile (1)</h2>
<p>jQuery be abejo yra vienas iš žinomiausių JavaScript karkasų.</p>
</article>
<article>
<h2>Kurti internetines programas (Dalis 08): Įvadas į jQuery</h2>
<p>JavaScript yra puiki priemonė tinklalapiams, galų gale, su juo galima padaryti įvairiausių įdomių dalykų.</p>
</article>
</section>
Be to, section elemente gali būti kiti section elementai. Maišymasis yra leidžiamas. Taip pat pateikiamas pavyzdys:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Sveiki atvykę</h2>
<p>>Džiaugiames...</p>
</section>
<section>
<h2>Pamokos</h2>
<p>Čia rasite mūsų naujausias pamokas...</p>
</section>
<aside>
<p>Kontaktai</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Šis section maišymasis sudaro šią struktūrą:
1. PSD-Tutorials.de
1.1 Sveiki atvykę
1.2 Pamokos
1.3 Kontaktai
- (c) 2014 PSD-Tutorials.de
Tokios struktūrizacijos taip pat yra įmanomos.
Skyriaus div, article ir section skirtumai
Pripažinkime, kad nėra lengva suprasti skirtumą tarp div, article ir section. Iš tikrųjų article elementas buvo apibrėžtas pirmiausia struktūruoti tinklaraščio įrašus. Section elementas yra iš esmės viena lygio žemiau nei article. Be to, section elemente visada turėtų būti nurodytas antraštė. Net jei iš tikrųjų antraštė neapibrėžta, teoriškai, bet kada galėtų būti nurodyta antraštė šioje elemente.
Žinoma, div elementai HTML5 vis dar nėra neleidžiami, jie turėtų būti naudojami kaip ir anksčiau. Jie yra įdomūs, pavyzdžiui, kai reikia apjungti elementus.
Pabaigai, dar kartą paminėčiau, kad iki šiol pristatytų elementų vizualinės įtakos aspektas. Iš tikrųjų, jums reikės CSS tinkamos formatavimo. Paprastas pateiktų elementų naudojimas naršyklėje neturi jokio veiksmo. Čia jūs semantiškai struktūruojate turinį. Visa tai, kas susiję su išvaizda, tvarkysite stiliaus lapais.
