-s in -čeprav, kot ni vam treba popolnoma odvrniti. Še vedno so najboljša izbira za združevanje vsebin izključno za styling namene in druge primere v skrajnih primerih.

Semantika besedila v HTML5

HTML5 je uvedel številne nove semantične elemente, ki omogočajo enostavno organizacijo vsebine. Ne pomagajo vam le pri urejanju vsebine na ravni celotnega dokumenta (glej podrobnosti v naslednjem razdelku), ampak tudi znotraj blokov besedila, kot inline oznake.

Verjetno so najbolj priljubljene semantične oznake besedilne ravni in , vendar so obstajale tudi pred HTML5. Med novimi vrstnimi semantičnimi elementi lahko najdemo npr , za časovno berljivi datumi, in za označeno besedilo.

Oglejte si ta seznam za vse semantične elemente na ravni besedila, ki so trenutno v uporabi.

Oris dokumenta v HTML5

Oris dokumenta je struktura dokumenta HTML. Prikazuje, kako so elementi med seboj povezani. Oris dokumenta je ustvarjen samo z elementi preslikav, kot so naslovi, naslovi tabel, naslovi obrazcev in drugi v starejših različicah HTML-ja, kot so HTML4.01 in XHTML.

V HTML5 je bil opisan algoritem izboljšan z novimi elementi ločevanja, in sicer:

• za razdelkov, ki so združeni v določeno temo
• za popolne ali samostojne kompozicije kot je objava v spletnem dnevniku ali gradnik
• za navigacijskih blokov
• za dopolnilne vsebine, kot so bočne proge.

V HTML5 je element petega razdelka, vendar ni nov, to je oznaka. The

in Oznake so tudi nove, vendar ne ustvarjajo novih delov v dokumentu, razdelijo vsebino v razdelkih. To pomeni da vsak element preseka (telo, članek, razdelek, nav in na stran) lahko ima svojo glavo in nogo.

Nasveti za semantično strukturirano vsebino

Če želimo ustvariti dobro strukturiran dokument, moramo biti pozorni na naslednja pravila:

1. Najbolj oddaljeni element sekcij je vedno oznaka.

2. Razdelki v HTML5 so lahko ugnezdeni.

3. Vsak odsek ima svojo hierarhijo naslovov. Vsak od njih (tudi najskladnejši ugnezdeni odsek) lahko ima h1 oznaka.

4. Čeprav je oris dokumenta v prvi vrsti določen s 5 elementi prerezovanja, potrebuje tudi ustrezne naslove za vsak odsek.

5. Vedno je prvi naslovni element (naj bo h1 ali oznaka z nižjo uvrstitvijo), ki definira naslov danega odseka. Naslednje oznake naslovov znotraj istega odseka morajo biti s tem povezane. (Če je prvi naslov h3 znotraj elementa odseka, potem ne postavite h3.)

6. Odseki, ki jih določa

, in oznake ne pripadajo glavnemu orisu dokumenta HTML, ponavadi jih sprva ne upodabljajo podporne tehnologije.

7. Vsak odsek (telo, del, članek, stran, nav) ima lahko svoje

in oznake, ki določa glavo (kot so logotip, ime avtorja, datumi, meta informacije itd.) in noga (avtorske pravice, opombe, povezave itd.) tega razdelka.

Primer: Semantični oris

Oglejmo si primer za prikaz semantičnega dokumenta, ki bo jasnejši, kako deluje. Naša primerna koda bo povzročila naslednjo strukturo dokumenta:

In tukaj je koda s pravilnim semantičnim razdeljevanjem:

  
 
Dobrodošli na naši spletni strani!
 
Tu je naš logotip in slogan.
 
  
 
 
Naslov člena
 
Podnaslov člena
 
 
 
Prvi logični del (npr. "Teorija")
 
Odstavek 1 v prvem oddelku
 
Nekateri drugi podnaslovi v prvem oddelku
 
Odstavek 2 v prvem oddelku
 
 
 
Drugi logični del (npr. »Praksa«)
 
Odstavek 1 v drugem oddelku
 
Odstavek 2 v drugem oddelku
 
  
    

Če si ogledate zgornji odrezek kode, boste videli, da so glave in noge neobvezni, lahko prosto izbiramo, če jih želimo uporabiti ali ne, vendar je priporočljivo je vedno vključiti naslov za vsak oddelek, drugače bo oddelek “Brez naslova” v orisu dokumenta.

Na srečo obstaja veliko odličnih orodij po vsem internetu, ki nam omogočajo, da preverimo oris dokumenta, tokrat bomo uporabili orodje Outliner za html5.org.

Če vstavimo naš odrezek kode v obrazec, ki ga zagotovi zunanji izvajalec, in kliknemo “Oglejte si to!” gumb, bomo videli naslednji rezultat:

To je dokumentirajte našo vzorčno kodo, tako ga vidijo iskalniki, bralci zaslona pa jo berejo svojim slabovidnim uporabnikom. Semantična je, dobro strukturirana in ni grobe “Brez naslova” v njem.

Če želite videti, kako izgleda odsek Untitled v Outlinerju, samo izbrišite nekaj naslovnih oznak v primerni kodi.

Drugi vidiki spletne semantike

Semantične oznake HTML in orisi dokumentov so le majhen del spletne semantike. Vsebina spletne strani je lahko še bolj smiselna s pomočjo protokola dostopnosti WAI-ARIA in strukturiranih podatkov, ki se lahko uporabljajo skupaj s protokolom RDFa, mikropodatki ali oznako JSON-LD.