"Semantiskā tīmeklis" jēdziens jau tiek izmantots gandrīz inflācijāri. Daudziem cilvēkiem pat nav apziņas, kas ir šis daudzsološais semantikas jēdziens. Patiesībā tas ir diezgan vienkārši: pateicoties semantikai, no milzīgām datu masām ir iespējams izvilkt faktiski nepieciešamos/vēlamos informācijas gabalus.
Ļaujiet konkrētam piemēram demonstrēt semantikas svaru. Digitālās fotogrāfijas ir lielisks rīks. To var nekavējoties pēc uzņemšanas parādīt visai pasaulē, izmantojot internetu. Privātā jomā darbojas arī profesionālā vide. Attēla aģentūras, muzeji, bibliotēkas un fotogrāfi piedāvā attēlus, gleznas vai arī digitālas vērtīgas rakstu versijas caur profesionālām attēlu datu bāzēm. Attiecīgajās tīmekļa vietnēs ir meklētājprogrammas, ar kuru palīdzību platformu var pārlūkot. Populārākais piemērs tīmekļa 2.0 attēls meklēšanas sistēmā noteikti ir Flickr.
Šajā punktā kļūst skaidrs viens no klasiskās Tīmekļa pasaulē esošajiem trūkumiem: jo šobrīd nodrošinātās informācijas sapratu var cilvēki, bet mašīnas – piemēros redzamajā piemērā meklētājas – nevar pareizi interpretēt.
Mašīnas var izlasīt informāciju tikai tad, ja tā ir pieejama. Un tieši tas ir izšķirošais punkts, kur iestājas semantika.
Dokumentu strukturēšana
<h1> Nodaļa </h1> <p> Rindkopa </p> <h2> Apakšnodaļa </h2> <p> Apakšnodaļas rindkopa </h2> <h3>
HTML piedāvā dokumentu struktūrēšanai elementus h1 līdz h6. Ar tiem nav iespējams izveidot patiešām dziļi iegremdētu struktūru. Jo HTML neietver elementu h7 vai h8. Tāpēc tiek izmantots HTML5, ieviešot dažus papildu strukturēšanas elementus.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Šie elementi tiks iepazīti šajā pamācībā. Tomēr pirms tam ir jāpiemin: no šo elementu vizuālās puses nav gaidāmi brīnumi. Lai vietnes, kas balstās uz semantiskajiem elementiem, izskatās pievilcīgas, ir nepieciešams izmantot CSS. Un par to mēs runāsim vēlāk.
Daži semantiskie elementi jums jau ir pazīstami, pat ja, iespējams, no pirmā acu uzmetiena tie nenozīmē neko saistību ar semantiku. Šeit ir piemērs šādam elementam:
<progress min="0" max="100" value="40"></progress>
Ar to tiek radīts ielādes laikmetis. (Šis progress elements šajā sērijā jau ir ticis plaši izklāstīts).
Šis elements ļauj ļoti vienkārši radīt saturu, kas var tikt piešķirts attiecīgajam kontekstam. Jo programmatūrai ir uzreiz skaidrs, ka tā attiecas uz ielādes joslu. To nevar teikt par risinājumiem, kas izmanto JavaScript, lai ģenerētu ielādes joslu.
Semantiskas elementu struktūras
div elementi. Lai varētu formatēt šos elementus, pielieto CSS klasēm vai identifikatoriem. Šo principu izmanto arī HTML5. Patiesībā Google veiktais pētījums ir parādījis, ka daudzos dokumentos vienmēr tiek izmantotas tās pašas klases.
Piemērs:
<div class="nav"></div>
Daudzi attīstītāji, piemēram, izmanto nav, lai šajā div elementā ievietotu navigāciju. Savukārt HTML5 šādi izskatās:
<nav>Saturs</nav>
Ar nav elementu skaidrs, ka tas pārstāv ne tikai saiti sarakstu. Patiesībā šis elements apraksta būtisku bloku, kurā vietnes navigācijas informācija ir iekļauta īpatsvarā noteiktā kontekstā.
Mūsdienu strukturēšana
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Meklēt</div>
<div id="nav">Galvenā izvēlne</div>
</div>
<div id="content">
<h1>Šeit ir saturs</h1>
<div class="section">
<h2>Apakšvirsraksts</h2>
<h3>Sekcija</h3>
<!-- Šeit ir saturs -->
</div>
<div class="section">
<h2>Apakšvirsraksts</h2>
<!-- Šeit ir saturs -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Apakšizvēlne</div>
</div>
<div id="footer">Kājene</div>
</body>
Jūs iespējams jau esat iepazinušies ar šādām div konstrukcijām. Lai struktūra būtu loģiska attīstītājiem, tās piešķir atbilstošas klases vai ID tiem "runājošiem" nosaukumiem. Tātad attīstītājiem, piemēram, skaidrs, ka ID saturam zem footer atspoguļo saturu, kas pieder lapas kājenes daļai. Problema ir tā, ka nosaukumi var iemiesot vietnes struktūru, bet vietnes semantika nav tālu. Tieši šeit jaunās HTML elementi sāk darboties. Jo šie elementi pirmoreiz sniedz īstu dokumentu vai vietņu strukturēšanu.
Lai labāk saprastu, rūpīgi apskatiet šo HTML5 dokumentu:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Meklēt</div>
<nav>Galvenā izvēlne</nav>
</header>
<article>
<h1>Šis ir saturs</h1>
<section>
<h2>Apakšvirsraksts</h2>
<h3>Sekcija</h3>
<!-- Šeit ir saturs -->
</section>
<section>
<h2>Apakšvirsraksts</h2>
<!-- Šeit ir saturs -->
</section>
</article>
<aside>
<nav>Apakšizvēlne</nav>
</aside>
<footer>Kājene</footer>
</body>
header elementā.
Tāpat tagad ir pieejami section un article elementi, kas ļauj daudz labāk strukturēt īstos lapas saturus. Kā redzat, ir vērts padziļināti apskatīt HTML5 iespējas attiecībā uz dokumentu semantisko struktūrēšanu.
