-s és -s, mint nem kell őket teljesen árokba hozni. Még mindig a legjobb választás a tartalom csoportosítására kizárólag stílusos célokra és más utolsó esetben.

Szövegszemantika HTML5-ben

A HTML5 számos új szemantikai elemet vezetett be, amelyek lehetővé teszik a könnyű tartalomszervezést. Nem csak segítenek a tartalom teljes szervezésében a teljes dokumentum szintjén (lásd részletesen a következő részben), hanem a szövegblokkok belsejében lévő címkékként is.

Valószínűleg a legnépszerűbb szövegszintű szemantikus címkék és , de a HTML5 előtt is léteztek. Az új inline szemantikai elemek közül például a , címke emberi olvasható dátum-idők, és mert kiemelt szöveg.

Tekintse meg ezt a listát a jelenleg használt szövegszintű szemantikai elemeknél.

Dokumentum vázlat HTML5-ben

A dokumentum vázlata egy HTML dokumentum szerkezete. Azt mutatja, hogy az elemek hogyan kapcsolódnak egymáshoz. A dokumentum vázlata kizárólag az olyan elemek leképezésével jött létre, mint a fejlécek, a táblázatok címei, a formanyomtatványok és mások a HTML korábbi verzióiban, mint például a HTML4.01 és az XHTML.

A HTML5-ben a vázlási algoritmust új szekcionáló elemek fejlesztették ki, nevezetesen:

• mert egy adott téma köré csoportosított szakaszok
• mert teljes vagy önálló készítmények például egy blogbejegyzést vagy egy widgetet
• mert navigációs blokkok
• mert kiegészítő tartalmat, például oldalsávokat.

A HTML5-ben van egy ötödik szekcióelem, de ez nem új, ez az címke. A

és A címkék szintén újak, de nem hoznak létre új dokumentumokat a dokumentumban, a szekcióban lévő tartalmakat felosztják. Ez azt jelenti minden szakaszoló elem (test, cikk, szakasz, nem és félre) lehet saját fejléc és lábléc.

Tippek a szemantikusan strukturált tartalomhoz

Ha jól strukturált dokumentumot szeretnénk létrehozni, figyelemmel kell kísérni a következő szabályokat:

1. A legkülső szakaszolóelem mindig a címke.

2. A HTML5 szekciói beágyazhatók.

3. Minden szekciónak saját fejléc hierarchiája van. Mindegyikük (még a legbelsőbb beágyazott rész) is rendelkezik h1 címke.

4. Míg a dokumentum vázlatát elsősorban az 5 szekcióelem határozza meg, az egyes szekciókhoz megfelelő címsorokra is szükség van.

5. Mindig az első fejezetelem (legyen h1 vagy alacsonyabb rangú címsor), amely meghatározza az adott szakasz fejlécét. Az alábbi fejezetcímkéknek ugyanabban a szakaszban kell lenniük. (Ha az első fejléc egy metszetelemben h3, akkor ne tegyen h3-at.)

6. A

, és a A címkék nem tartoznak a HTML-dokumentum fő vázlatos körébe, általában nem támogató technológiákkal állítják elő őket.

7. Mindegyik rész (test, szakasz, cikk, félre, nav) saját

és címkék, amelyek meghatározzák a fejlécet (például logót, szerző nevét, dátumát, meta-adatait stb.) és a láblécet (szerzői jog, megjegyzések, hivatkozások stb.).

Példa: Szemantikus vázlat

Lássunk egy példát egy szemantikus dokumentum vázlatára, hogy világosabb legyen, hogyan működik. Példakódunk a következő dokumentumszerkezetet eredményezi:

És itt van a megfelelő szemantikus szelvényű kód:

  
 
Üdvözöljük honlapunkon!
 
Itt van a logó és a szlogen.
 
  
 
 
A cikk címe
 
Cikk c) alcíme. \ T
 
 
 
Első logikai rész (például "Theory")
 
Az első szakasz első bekezdése
 
Néhány egyéb alfejezet az első részben
 
Az első szakasz 2. bekezdése
 
 
 
Második logikai rész (pl. "Gyakorlat")
 
1. bekezdés a második szakaszban
 
2. bekezdés a második szakaszban
 
  
    

Ha megnézi a fenti kódrészletet, látni fogja, hogy a fejlécek és a láblécek nem kötelezőek, szabadon választhatjuk, hogy szeretnénk-e használni, vagy nem, de ez erőteljesen ajánlott, hogy minden fejezethez mindig tartalmazzon egy címet, különben a szakasz lesz “Névtelen” a dokumentum vázlatában.

Szerencsére számos nagyszerű eszköz van az interneten keresztül, amelyek lehetővé teszik számunkra, hogy ellenőrizzük a dokumentum vázlatát, ezúttal a html5.org Outliner eszközt használjuk.

Ha a kódrészletet az outliner által biztosított formanyomtatványba helyezzük, és a gombra kattintunk “Ezt vázolja fel!” gomb, az alábbi eredményt fogjuk látni:

Ez a a minta kódjának vázlata, így látják a keresőmotorok, és a képernyőolvasók elolvassák a látássérült felhasználóknak. Szemantikus, jól strukturált, és nincs csúnya “Névtelen” szakaszok.

Ha meg szeretné nézni, hogyan néz ki egy Untitled szekció az Outlinerben, csak törölje a címkód néhány címét a példakódban.

A webes szemantika egyéb aspektusai

A szemantikai HTML-címkék és a dokumentum-körvonalak csak egy kis része a webes szemantikának. A WAI-ARIA hozzáférhetőségi protokoll és a RDFa protokoll, a mikrodata vagy a JSON-LD jelölővel együtt használható strukturált adatok segítségével egy weboldal tartalmát még jelentősebbé teheti..