Introducere
HTML semantic se referă la utilizarea elementelor HTML care transmit semnificație despre structura și conținutul paginii web, nu doar despre aspectul său. Utilizarea corectă a HTML-ului semantic îmbunătățește accesibilitatea, SEO-ul și mentenabilitatea site-ului web.
De ce este important HTML-ul semantic?
- Accesibilitate: Ajută tehnologiile de asistență să interpreteze corect conținutul.
- SEO: Motoarele de căutare înțeleg mai bine structura și conținutul paginii.
- Mentenabilitate: Face codul mai ușor de citit și de întreținut.
- Consistență: Promovează o structură consecventă între diferite pagini și site-uri web.
Elemente semantice cheie în HTML5
1. <header>
Reprezintă un container pentru conținut introductiv sau un set de linkuri de navigare.
<header>
<h1>Titlul Site-ului</h1>
<nav>
<ul>
<li><a href="#acasa">Acasă</a></li>
<li><a href="#despre">Despre</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
2. <nav>
Definește o secțiune de legături de navigare.
<nav>
<ul>
<li><a href="#produse">Produse</a></li>
<li><a href="#servicii">Servicii</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</nav>
3. <main>
Specifică conținutul principal al documentului. Ar trebui să existe doar un element <main>
pe pagină.
<main>
<h1>Titlul Principal al Paginii</h1>
<p>Conținutul principal al paginii merge aici.</p>
</main>
4. <article>
Reprezintă o compoziție independentă într-un document, cum ar fi o postare de blog sau un articol de știri.
<article>
<h2>Titlul Articolului</h2>
<p>Conținutul articolului...</p>
</article>
5. <section>
Definește o secțiune în document, de obicei cu un titlu tematic.
<section>
<h2>Secțiunea Despre Noi</h2>
<p>Informații despre compania noastră...</p>
</section>
6. <aside>
Reprezintă conținut tangențial la conținutul principal, cum ar fi o bară laterală.
<aside>
<h3>Articole Recente</h3>
<ul>
<li><a href="#">Articol 1</a></li>
<li><a href="#">Articol 2</a></li>
</ul>
</aside>
7. <footer>
Definește un footer pentru un document sau o secțiune.
<footer>
<p>© 2024 Compania Mea. Toate drepturile rezervate.</p>
</footer>
8. <figure>
și <figcaption>
Utilizate pentru a încapsula conținut media cu o descriere.
<figure>
<img src="imagine.jpg" alt="Descriere imagine">
<figcaption>Aceasta este o descriere a imaginii.</figcaption>
</figure>
9. <time>
Reprezintă o dată sau o oră specifică.
<p>Evenimentul va avea loc pe <time datetime="2024-04-01T20:00">1 aprilie 2024 la ora 20:00</time>.</p>
Exemple de utilizare incorectă vs. corectă
Incorect (non-semantic):
<div class="header">
<h1>Titlul Site-ului</h1>
</div>
<div class="nav">
<ul>
<li><a href="#acasa">Acasă</a></li>
<li><a href="#despre">Despre</a></li>
</ul>
</div>
<div class="main-content">
<div class="article">
<h2>Titlu Articol</h2>
<p>Conținut articol...</p>
</div>
</div>
<div class="footer">
<p>Copyright 2024</p>
</div>
Corect (semantic):
<header>
<h1>Titlul Site-ului</h1>
</header>
<nav>
<ul>
<li><a href="#acasa">Acasă</a></li>
<li><a href="#despre">Despre</a></li>
</ul>
</nav>
<main>
<article>
<h2>Titlu Articol</h2>
<p>Conținut articol...</p>
</article>
</main>
<footer>
<p>Copyright 2024</p>
</footer>
Cele mai bune practici pentru utilizarea HTML-ului semantic
- Utilizați elementele corect: Alegeți elementul potrivit pentru scopul său.
- Nu vă bazați doar pe clase pentru semantică: Utilizați elemente semantice în locul div-urilor cu clase descriptive.
- Structurați conținutul logic: Utilizați heading-uri (
<h1>
–<h6>
) într-o ordine ierarhică logică. - Utilizați
<article>
pentru conținut independent: Ideal pentru postări de blog, comentarii, produse, etc. - Separați conținutul principal de cel secundar: Utilizați
<main>
pentru conținutul principal și<aside>
pentru conținut secundar. - Markup-ul formularelor: Utilizați
<label>
,<fieldset>
și<legend>
pentru a structura formularele. - Utilizați atribute ARIA când este necesar: Pentru a îmbunătăți accesibilitatea când HTML-ul semantic nu este suficient.
Exemplu de pagină web complet semantică
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site-ul Meu Semantic</title>
</head>
<body>
<header>
<h1>Site-ul Meu Semantic</h1>
<nav>
<ul>
<li><a href="#acasa">Acasă</a></li>
<li><a href="#despre">Despre</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="acasa">
<h2>Bine ați venit</h2>
<p>Aceasta este pagina principală a site-ului nostru semantic.</p>
</section>
<section id="despre">
<h2>Despre Noi</h2>
<article>
<h3>Istoria Noastră</h3>
<p>Am început activitatea în anul 2010...</p>
</article>
<article>
<h3>Misiunea Noastră</h3>
<p>Ne propunem să oferim cele mai bune servicii...</p>
</article>
</section>
<section id="contact">
<h2>Contactați-ne</h2>
<form>
<label for="nume">Nume:</label>
<input type="text" id="nume" name="nume" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="mesaj">Mesaj:</label>
<textarea id="mesaj" name="mesaj" required></textarea>
<button type="submit">Trimite</button>
</form>
</section>
</main>
<aside>
<h3>Articole Recente</h3>
<ul>
<li><a href="#">Articol 1</a></li>
<li><a href="#">Articol 2</a></li>
</ul>
</aside>
<footer>
<p>© 2024 Site-ul Meu Semantic. Toate drepturile rezervate.</p>
</footer>
</body>
</html>
Concluzie
Utilizarea HTML-ului semantic este crucială pentru crearea de site-uri web moderne, accesibile și optimizate pentru motoarele de căutare. Prin folosirea corectă a elementelor semantice, vă asigurați că site-ul vostru este bine structurat, ușor de înțeles atât pentru utilizatori, cât și pentru mașini, și pregătit pentru viitoarele evoluții ale web-ului.
Lasă un răspuns