Cod Semantic HTML: Structurarea Conținutului Web (Curs HTML și CSS pentru începători, partea 7)

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?

1. Accesibilitate: Ajută tehnologiile de asistență să interpreteze corect conținutul.
2. SEO: Motoarele de căutare înțeleg mai bine structura și conținutul paginii.
3. Mentenabilitate: Face codul mai ușor de citit și de întreținut.
4. 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>&copy; 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

1. Utilizați elementele corect: Alegeți elementul potrivit pentru scopul său.
2. Nu vă bazați doar pe clase pentru semantică: Utilizați elemente semantice în locul div-urilor cu clase descriptive.
3. Structurați conținutul logic: Utilizați heading-uri (<h1> – <h6>) într-o ordine ierarhică logică.
4. Utilizați <article> pentru conținut independent: Ideal pentru postări de blog, comentarii, produse, etc.
5. Separați conținutul principal de cel secundar: Utilizați <main> pentru conținutul principal și <aside> pentru conținut secundar.
6. Markup-ul formularelor: Utilizați <label>, <fieldset> și <legend> pentru a structura formularele.
7. 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>&copy; 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.