Pastiši momentā HTML dokumenti lielākoties tiek strukturizēti, izmantojot div elementus. Šo konteineru formatēšanu un pozicionēšanu parasti veic ar CSS. Šāda pieeja ir lieka cilvēkiem ar ekrānlasītājiem, jo tie nevar noteikt, kāda nozīme ir konkrētiem saturam. Šo situāciju mainīs jaunās strukturizēšanas elementi.
Nozīmīgākie jaunie elementi ir sadaļa un raksts, kas ir šī pamācību centrā.
Raksturot rakstu
Ar article elementu var norādīt tekstus (foruma ieraksti, laikraksta raksti utt.) kā rakstu. Nākamais piemērs parāda tipiska raksta definīciju.
<article> <h1>Mobilās lietotnes izveide (9. daļa): jQuery mobile (1)</h1> <p>jQuery ir neskaitāmu reižu izmantots JavaScript bibliotēka. „Klasiskajās“ tīmekļa lapās jQuery jau ir lietots tūkstošiem reižu ...</p> ... </article>
Pateicoties article elementam, jūs varat strukturēt savu saturu semantiski.
Kā tas var izskatīties, ļoti labi var redzēt uz bloga piemēra.
<article>
<header>
<h1>Mobilās lietotnes izveide (9. daļa): jQuery mobile (1)</h1>
<p>Publicēts: <time pubdate="pubdate">2014. gada 24. maijs</time></p>
</header>
<p>jQuery ir neskaitāmu reižu izmantots JavaScript bibliotēka. „Klasiskajās“ tīmekļa lapās jQuery jau ir lietots tūkstošiem reižu ...</p>
...
<footer>
<p><small>Autortiesības pieder PSD-Tutorials.de</small></p>
</footer>
</article>
Šajā piemērā tipiski tiek veikta galvenās, pamatdalības un apakšdalības norādietīšana article elementā. Un šāda veida sadalījums bieži sastopams blogos.
Izveidot sadaļas
Turpinot ar section elementu. Section elements sadala lapu dažādos sadaļās. Tas var būt sadaļas, nodaļas, cilnes utt. Izmantojot section, piemēram, ievada un pašreizējās ziņas daļas var loģiski atdalīt viena no otras.Sadaļa tiek izmantota, lai sadalītu saturu pēc faktiski satura kritērijiem. Par atšķirību starp section un div es runāšu vēlreiz šajā apmācībā s gala daļā.
Nākamais piemērs parāda tipisku bloga struktūru. Tomēr šajā struktūrā ir arī kaut kas, kas patiešām ir nepieciešams daudzām blogu platformām, proti, komentāru sadaļa. Šī komentāru sadaļa ir definēta section elementā. Atsevišķie komentāri section daļā tiek ietverti katrā article elementā.
<article>
<header>
<h1>Mobilās lietotnes izveide (9. daļa): jQuery mobile (1)</h1>
<p>Publicēts: <time pubdate="pubdate">2014. gada 24. maijs</time></p>
</header>
<p>jQuery ir neskaitāmu reižu izmantots JavaScript bibliotēka. „Klasiskajās“ tīmekļa lapās jQuery jau ir lietots tūkstošiem reižu...</p>
...
<section>
<h2>Komentāri</h2>
<article>
<header>
<h3>Komentārs no: Jaunaisdraugs</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Pirms stundas</time></p>
</header>
<p>>Paldies par pamācību!</p>
</article>
<article>
<header>
<h3>Komentējis: Bekers</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Pirms divām stundām</time></p>
</header>
<p>>Lietderīgs! Tas man palīdz!</p>
</article>
</section>
</article>Vēlreiz vēlos atzīmēt, ka par elementiem, kas tiek izmantoti šeit, piemēram, header, footer utt., es runāšu plaši turpmāk. Šajā posmā tikai tik: Šie elementi ļauj sadalīt saturu galvas un apakšas daļās un nodrošina vēl vienu loģisku dokumentu struktūru.
Cits piemērs, kas padarīs saprotamu article un section elementu apvienojumu, ir domāts. Patiesībā section elementu var izmantot, lai sadalītu rakstu loģiskos saturu apgabalos, kuriem ir savas virsrakstus.
<article>
<h1>Lietotņu izstrāde</h1>
<p>>Šeit uzziniet, kā izveidot tīmekļa lietotnes.</p>
<section>
<h2>Mobilās lietotnes izveide (9. daļa): jQuery mobile (1)</h2>
<p>jQuery ir neskaitāmu reižu izmantots JavaScript bibliotēka.</p>
</section>
<section>
<h2>Mobilās lietotnes izveide (8. daļa): Ātrā uzsākšanās ar jQuery</h2>
<p>JavaScript ir jauka lieta tīmekļa lapām, jo ar to var paveikt daudz interesantas lietas.</p>
</section>
</article>
Ir iespējams arī section elementā definēt article elementus. Šādu piemēru var redzēt komentāru sadaļā, kā jau tika parādīts. Iedomājieties sadaļu sadalījumu par tēmas jomām, kurās tiek runāts blogā.
Arī šeit ir atbilstošs piemērs:
<section>
<h1>App izstrāde</h1>
<article>
<h2>Web-Apps izveide (Sērija 09): jQuery mobilais (1)</h2>
<p>jQuery ir bez šaubām viens no pazīstamākajiem JavaScript ietvariem.</p>
</article>
<article>
<h2>Web-Apps izveide (Sērija 08): Ievads jQuery</h2>
<p>JavaScript ir lielisks resurss tīmekļa lapām, jo ar to var darīt daudz interesantu lietu.</p>
</article>
</section>
Papildus vienā "section" elementā var būt iekļauti citi "section" elementi. Norāde var būt ieplatīta. Par to arī piemērs:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Laipni lūgti</h2>
<p>Mēs priecājamies...</p>
</section>
<section>
<h2>Pamācības</h2>
<p>>Šeit ir mūsu jaunākās pamācības...</p>
</section>
<aside>
<p>Kontakti</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Šāda "section" iepludināšana rada šādu struktūru:
1. PSD-Tutorials.de
1.1 Laipni lūgti
1.2 Pamācības
1.3 Kontakti
- (c) 2014 PSD-Tutorials.de
Tādas strukturēšanas ir tāpat iespējamas.
Atšķirība starp div, article un section
Izprast atšķirību starp div, article un section noteikti nav viegli. Patiesībā "article" elements pirmkārt tika definēts blogu ierakstu strukturēšanai. "Section" elements faktiski atrodas vienā līmenī zem "article". Iekšā "section" elementā vienmēr vajadzētu definēt virsrakstu. Pat ja faktiski virsraksts netiek definēts, teorētiski joprojām vajadzētu būt iespējai norādīt virsrakstu attiecīgajā elementā.
"Div" elementi HTML5 joprojām nav noliedzami, bet tie joprojām jāizmanto. Tos var interesanti izmantot, piemēram, kad ir nepieciešams apkopot elementus.
Visbeidzot, vēlreiz norāde par līdz šim prezentēto elementu vizuālajām ietekmēm. Patiesībā jums ir nepieciešams CSS atbilstošam formatējumam. Parādīšanu lietotajiem elementiem nav efekta pārlūkā. Jūs strukturējat saturu semantiski. Visu, kas saistīts ar izskatu, regulējat ar stilu lapām.
