-s i -ipak, kao ne morate ih potpuno odbaciti. Oni su još uvijek najbolji izbor za grupiranje sadržaja isključivo u svrhu oblikovanja stila i drugih slučajeva u krajnjem slučaju.

Semantika teksta u HTML5

HTML5 je uveo mnogo novih semantičkih elemenata koji olakšavaju organizaciju sadržaja. Ne samo da vam pomažu organizirati sadržaj na razini cijelog dokumenta (pogledajte detalje u sljedećem odjeljku), nego i unutar blokova teksta, kao umetnute oznake.

Vjerojatno su najpopularnije semantičke oznake na razini teksta i , ali su postojali i prije HTML5. Među novim inline semantičkim elementima možemo pronaći primjerice , oznaka za datum-vrijeme koje je moguće čitati za čovjeka, i za označeni tekst.

Pogledajte ovaj popis za sve semantičke elemente na razini teksta koji se trenutno koriste.

Skica dokumenta u HTML5

Skica dokumenta je struktura HTML dokumenta. Prikazuje kako su elementi međusobno povezani. Nacrt dokumenta generiran je isključivo elementima mapiranja, kao što su naslovi, naslovi tablica, naslovi obrazaca i drugi u ranijim verzijama HTML-a, kao što su HTML4.01 i XHTML.

U HTML5 je opisani algoritam poboljšan novim elementima odjeljka, i to:

• za odjeljci grupirani oko određene teme
• za cjelovite ili samostalne kompozicije kao što je blog post ili widget
• za navigacijski blokovi
• za komplementarnog sadržaja kao što su bočne trake.

U HTML5 postoji peti element odjeljka, ali nije nov, to je označiti.

i Oznake su također nove, ali ne generiraju nove odjeljke u dokumentu, dijele sadržaj unutar odjeljaka. Ovo znači to svaki element presjeka (tijelo, članak, odjeljak, nav i na stranu) može imati svoje zaglavlje i podnožje.

Savjeti za semantički strukturirani sadržaj

Ako želimo stvoriti dobro strukturirane dokumente, moramo obratiti pozornost na sljedeća pravila:

1. Najudaljeniji element presjeka je uvijek označiti.

2. Sekcije u HTML5 mogu biti ugniježđene.

3. Svaki odjeljak ima vlastitu hijerarhiju naslova. Svaki od njih (čak i unutarnji ugniježđeni dio) može imati h1 označiti.

4. Dok je nacrt dokumenta prvenstveno definiran s 5 elemenata presjeka, potrebno je i odgovarajuće naslove za svaki odjeljak.

5. Uvijek je prvi element zaglavlja (neka je h1 ili oznaka zaglavlja nižeg ranga) koji definira naslov zadanog dijela. Sljedeće oznake naslova unutar istog odjeljka moraju biti u odnosu na ovo. (Ako je prvi naslov h3 unutar elementa presjeka, ne stavljajte h3 nakon toga.)

6. Dijelovi koje definira

, i Oznake ne pripadaju glavnom pregledu HTML dokumenta, one se obično ne prikazuju u početku pomoću pomoćnih tehnologija.

7. Svaki dio (tijelo, odjeljak, članak, na stranu, nav) može imati svoje

i koje definira zaglavlje (kao što su logotip, ime autora, datumi, meta informacije itd.) i podnožje (autorsko pravo, napomene, veze, itd.) tog odjeljka.

Primjer: Semantički pregled

Pogledajmo primjer za nacrt semantičkog dokumenta kako bismo vidjeli jasnije kako funkcionira. Naš primjer primjera rezultirat će sljedećom strukturom dokumenta:

I ovdje je kôd s pravilnim semantičkim dijeljenjem:

  
 
Dobrodošli na našu web stranicu!
 
Ovdje je naš logo i slogan.
 
  
 
 
Naslov članka
 
Podnaslov članka
 
 
 
Prvi logički dio (npr. "Teorija")
 
Stavak 1. u prvom dijelu
 
Neki drugi podnaslovi u prvom odjeljku
 
Stavak 2. u prvom odjeljku
 
 
 
Drugi logički dio (npr. "Praksa")
 
Stavak 1 u drugom dijelu
 
Stavak 2. u drugom dijelu
 
  
    

Ako pogledate isječak koda iznad, vidjet ćete da su zaglavlja i podnožja neobavezna, slobodno možemo odabrati ako ih želimo koristiti ili ne, ali preporuča se uvijek uključiti naslov za svaki odjeljak, inače će odjeljak biti “Untitled” u pregledu dokumenta.

Srećom, na internetu postoji mnogo odličnih alata koji nam omogućuju provjeru nacrta dokumenta, ovaj put ćemo koristiti alat Outliner html5.org.

Ako umetnemo isječak kôda u obrazac koji je dostavio outliner, kliknite gumb “Objasnite ovo!” gumb, vidjet ćemo sljedeći rezultat:

Ovo je dokumentirajte naš uzorak koda, na taj način ga pretraživači pretražuju, a čitači zaslona čitaju ih svojim slabovidnim korisnicima. To je semantičko, dobro strukturirano i nema gadnog “Untitled” odjeljcima.

Ako želite pogledati kako izgleda odjeljak Untitled u Outlineru, samo izbrišite neke oznake naslova u primjeru koda.

Ostali aspekti web-semantike

Semantičke HTML oznake i konture dokumenta samo su mali dio semantike weba. Sadržaj web-stranice može se učiniti još značajnijim uz pomoć WAI-ARIA protokola pristupačnosti i strukturiranih podataka koji se mogu koristiti zajedno s RDFa protokolom, mikropodacima ili JSON-LD oznakom.