Termenul "web semantic" este folosit în prezent aproape inflaționist. Mulți oameni nu realizează cu adevărat ce înseamnă această semantică lăudată. În realitate, este destul de simplu: datorită semanticelor, informațiile necesare/dorite pot fi extrase din cantități imense de date.
Un exemplu concret ar trebui să demonstreze importanța semanticelor. Fotografiile digitale sunt un lucru minunat. Imediat după capturare, le puteți prezenta pe Internet întregii lumi. Ceea ce este valabil în viața privată s-a stabilit și demult în cadrul profesional. Agențiile de imagini, muzeele, bibliotecile și fotografi oferă fotografii, tablouri sau chiar versiuni digitale ale textelor valoroase prin baze de date de imagini profesionale. Pe site-urile respective există apoi casete de căutare, prin intermediul cărora platforma poate fi căutată. Cea mai populară exemplu de motor de căutare a imaginilor în Web 2.0 este cu siguranță Flickr. 
Cei care au folosit deja astfel de motoare de căutare de imagini cunosc limitele acestora: Dacă introduceți, de exemplu, termenul Kohl, primiți afișate fotografii din diferite domenii. Astfel, căutarea de imagini Yahoo! afișează fotografii cu o măcăleândră, un jucător de tenis numit Kohl și fostul cancelar Helmut Kohl.
La acest punct, una dintre dezavantajele World Wide Web-ului clasic devine clară: În prezent, informațiile furnizate pot fi înțelese de oameni, dar nu pot fi interpretate corect de către mașini - în exemplul prezentat, adică motoarele de căutare.
Mașinile pot citi informațiile doar dacă acestea există într-adevăr. Și tocmai acesta este punctul crucial în care intervine semantică.
Structurarea documentelor
În versiunile anterioare de HTML, nu exista pur și simplu o modalitate de a structura documentele semantic. Dacă doreați să structurați o pagină web, aveați la dispoziție practic doar titluri și paragrafe de text. Aici este un exemplu tipic pentru structura unei pagini web clasice:
<h1> Capitol </h1> <p> Paragraf </p> <h2> Subcapitol </h2> <p> Paragraf în subcapitol </p> <h3>
HTML pune la dispoziție elemente de structurare pentru documente, printre care se numără h1 până la h6. Cu toate acestea, cu acestea nu se poate crea o structură foarte în profunzime. Pentru că un element h7 sau h8 nu este prevăzut în HTML. Aici intervine HTML5 și introduce unele elemente de structurare suplimentare.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Aceste elemente sunt prezentate în acest tutorial. Înainte de aceasta, totuși, o remarcă: Nu vă așteptați la minuni vizuale de la aceste elemente. Pentru ca site-urile bazate pe elemente semantice să arate bine, CSS trebuie să fie utilizat. Iar despre asta, bineînțeles, vom discuta mai târziu.
Probabil ați întâlnit deja unele elemente semantice, chiar dacă la prima vedere acestea nu au legătură cu semantică. Aici este un exemplu pentru un astfel de element:
<progress min="0" max="100" value="40"></progress>
Acest lucru generează o bara de încărcare. (Elementul progress a fost prezentat deja pe larg în această serie). 
Acest element demonstrează cât de ușor pot fi create conținuturi care pot fi atribuite unui anumit context. De fapt, pentru software-ul este clar că este vorba despre o bara de încărcare. În cazul soluțiilor care se bazează pe JavaScript pentru generarea unei bare de încărcare, acest lucru nu este valabil.
Structuri de elemente semantice
În documente HTML "normale", structurarea conținutului se bazează pe elementele div. Aceste elemente sunt atribuite clase sau ID-uri pentru a putea fi formate cu CSS. Această metodă este utilizată și în HTML5. De fapt, un sondaj efectuat de Google a arătat că în multe documente se folosesc întotdeauna aceleași clase.
Un exemplu:
<div class="nav"></div>
Mulți dezvoltatori folosesc, de exemplu, nav, pentru a plasa navigarea în interiorul acestui element div. În HTLM5, arată astfel:
<nav>Conținut</nav>
Prin elementul nav devine clar că nu este vorba numai despre o listă de hyperlinkuri. De fapt, acest element descrie un bloc de conținut în care se află informații despre navigarea site-ului web într-un anumit context specific.
Structurare modernă
Cum arată în mod tipic structura unui document HTML? În principiu, aceasta seamănă, indiferent de conținutul paginii, Acesta include în general următoarele secțiuni:
• Antet
• Meniul principal
• Zona de conținut
• Subsol
O pagină web care recurge la elementele div pentru structurare ar putea arăta astfel:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Căutare</div>
<div id="nav">Meniul principal</div>
</div>
<div id="content">
<h1>Asta este conținutul</h1>
<div class="section">
<h2>Subtitlu</h2>
<h3>Sectiune</h3>
<!-- Aici se află conținutul -->
</div>
<div class="section">
<h2>Subtitlu</h2>
<!-- Aici se află conținutul -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Meniu secundar</div>
</div>
<div id="footer">Subsol</div>
</body>
Astfel de construcții div le cunoașteți poate deja. Pentru ca structura să fie logică pentru dezvoltatori, ele atribuie zonelor div clase sau ID-uri corespunzătoare, care au denumiri "vorbitoare". Astfel, pentru dezvoltatori, este clar, de exemplu, că în zona div cu ID-ul footer sunt stocate conținuturi care fac parte din subsolul paginii. Problema este că numele ar putea sugera structura site-ului, dar site-ul nu este structurat semantic. Aici intervin noile elemente HTML. Acestea permit o structurare reală a documentelor sau a paginilor web.
Pentru a înțelege mai bine, aruncați o privire la următorul document HTML5:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Căutare</div>
<nav>Meniul principal</nav>
</header>
<article>
<h1>Aceasta este conținutul</h1>
<section>
<h2>Subtitlu</h2>
<h3>Sectiune</h3>
<!-- Aici se află conținutul -->
</section>
<section>
<h2>Subtitlu</h2>
<!-- Aici se află conținutul -->
</section>
</article>
<aside>
<nav>Meniu secundar</nav>
</aside>
<footer>Subsol</footer>
</body>
Desigur, voi explora în viitoarele tutoriale elementele folosite aici. Totuși, o privire asupra acestui exemplu arată deja avantajele elementelor utilizate. Acum se pot marca în sfârșit zonele paginii cu astfel de elemente, special concepute pentru ele. Tot ce aparține antetului paginii poate fi inclus într-un element header.
De asemenea, elementele section și article sunt disponibile acum, prin intermediul cărora se poate structura mult mai bine conținutul real al paginilor. Așa cum vedeți, merită să examinați cu atenție posibilitățile pe care le oferă HTML5 în ceea ce privește structurarea semantică a documentelor.
