Aipatu bezala, HTML5ek etiketa semantikoak sartzen ditu; ez dute eragiten ikuste-kontuetan; baina, elementuen edukia semantikoki zehaztuta, bilakatzaileak optimizatu egiten dira SEOrentzat (Search Engine Optimization).
Horren beharra izan arren, orain arte ez da izan baliabiderik sarea ezaugarri semantiko horrekin hornitzeko. HTML5 bertsioa horretarako garatu da: alde batetik, web-orrien edukiei egitura zehatzagoa emateko eta, bestetik, diskriminazio-irizpideak izateko eta edukiak katalogatzeko. Hortaz, testu ez diren hainbat eduki (irudiak, ahotsa, bideoak, grafikoak…) erraz irakur eta araka daitezke; horrela, arakatze-algoritmoek eraginkorrago aritzea lortzen dute.
Web sarea eraikitzeko, web semantikoa aurrerapauso nabarmena da: erabiltzaile, egile eta aplikazioek webgunea erabiltzeko moduan, hau da, edukiak sortu, antolatu eta kudeatzeko moduan, eragiten duelako.
Etiketen semantikaren garrantzia aztertu ondoren, ikus dezagun horiek nola funtzionatzen duten.
HTML lengoaian, etiketei tags esaten zaie; programatzen hasteko elementurik funtsezkoenak dira. Beraz, horiek nola erabili aztertuko dugu:
<XXX>: Etiketaren hasiera da beti; kasuan, <p>
</XXX>: Etiketaren amaiera da beti; kasuan, </p>
Etiketa guztiak letra xehez edo larriz idatz daitezke; nolanahi ere, beti irizpide bera aplikatzea gomendatzen da. Kontuan izan etiketan idazten denak elementu osoan duela eragina.
Web-orrien egitura oso sinplea da, eta ezin da aldatu, nabigatzaileak esanahia ulertzeko arazorik ez izateko. Ezer baino lehen, dokumentuaren hasieran, honako etiketa hau jarriko dugu:
<!DOCTYPE html>
Etiketa horrek, nabigatzaileari zer dokumentu mota den eta zer arau erabiliko diren jakinarazten dio. Horrenbestez, nabigatzaileak jakin badaki HTML kodea garatzen ari garela eta HTML5 bertsiokoa dela. Aurreko bertsioetan, etiketak askozaz korapilatsuagoak ziren.
Horrez gain, <html> </html>
etiketak beharrezkoak dira dokumentuaren hasieran eta amaieran, non hasi eta bukatzen den adierazteko.
Dokumentuaren barruan, atal hauek ezarri behar dira:
Lehen esan bezala, HTML kodeaz arituko garela adierazteko, <html> </html> etiketak jarri beharko ditugu testu-dokumentuan, irudian ikusten den moduan.
<html> [Dokumentu osoa] </html>
Era berean, dokumentuan aipatutako atal biak banatzeko, beste etiketa batzuk behar ditugu:
<head> </head>
etiketak erabiliko ditugu, eta, horien barruan, beste atal batzuk egongo dira. Etiketa horiek logoak, orri-estiloak, izenburua… zehaztuko dituzte. Goiburuko informazioa ez da argitaratzen nabigatzailean. Nolanahi ere, web-orriaren izenburua agertuko da. Izenburua laburra eta esanguratsua izatea gomendatzen da; izan ere, edonork ikusiko du, nabigatzailearen laster-marketan “Gogokoak” atalean sartu ondoren. <title> Orriaren izenburua</title>
<body> </body>
etiketak erabiliko ditugu, eta, horien barruan, edukiak (testua, irudiak, estekak…). Haien formatuari eta kokapenari dagozkien elementuak ere ipiniko ditugu.