El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

HTML Semàntic

Següent ►
►

El HTML semàntic és un concepte clau en l'accessibilitat web, ja que ajuda a estructurar el contingut de manera que sigui comprensible tant per als usuaris com per a les tecnologies assistencials. En aquesta secció, explorarem què és el HTML semàntic, per què és important i com implementar-lo correctament.

Què és el HTML Semàntic?

El HTML semàntic utilitza etiquetes que descriuen el significat del contingut que contenen. Això contrasta amb les etiquetes no semàntiques, que no proporcionen informació sobre el contingut. Les etiquetes semàntiques ajuden a:

  • Millorar l'accessibilitat: Les tecnologies assistencials poden interpretar millor el contingut.
  • Millorar el SEO: Els motors de cerca poden indexar el contingut de manera més efectiva.
  • Facilitar el manteniment del codi: El codi és més llegible i comprensible per als desenvolupadors.

Etiquetes Semàntiques Comunes

A continuació es mostren algunes de les etiquetes semàntiques més utilitzades en HTML5:

Etiqueta Descripció
<header> Defineix un encapçalament per a un document o secció.
<nav> Conté enllaços de navegació.
<article> Representa un contingut independent i auto-contenidor.
<section> Defineix una secció en un document.
<aside> Conté contingut que està relacionat amb el contingut principal però no és essencial.
<footer> Defineix un peu de pàgina per a un document o secció.
<main> Conté el contingut principal del document.

Exemple Pràctic

Vegem un exemple de com utilitzar etiquetes semàntiques en un document HTML:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de HTML Semàntic</title>
</head>
<body>
    <header>
        <h1>Benvinguts al Meu Bloc</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">Inici</a></li>
            <li><a href="#about">Sobre Nosaltres</a></li>
            <li><a href="#contact">Contacte</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>El Meu Primer Article</h2>
            <p>Aquest és el contingut del meu primer article. Aquí explico...</p>
        </article>
        <aside>
            <h3>Notícies Relacionades</h3>
            <p>Algunes notícies relacionades amb el tema...</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2023 El Meu Bloc</p>
    </footer>
</body>
</html>

Explicació del Codi

  • <header>: Conté l'encapçalament principal del document.
  • <nav>: Inclou els enllaços de navegació del lloc.
  • <main>: Conté el contingut principal del document.
  • <article>: Representa un article independent dins del document.
  • <aside>: Proporciona informació addicional relacionada amb el contingut principal.
  • <footer>: Inclou el peu de pàgina del document.

Exercici Pràctic

Exercici: Crea una pàgina HTML que utilitzi etiquetes semàntiques per estructurar un perfil d'usuari. Inclou seccions per a la informació personal, una llista d'habilitats i un apartat de contactes.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perfil d'Usuari</title>
</head>
<body>
    <header>
        <h1>Perfil de Joan</h1>
    </header>
    <main>
        <section>
            <h2>Informació Personal</h2>
            <p>Nom: Joan Garcia</p>
            <p>Ocupació: Desenvolupador Web</p>
        </section>
        <section>
            <h2>Habilitats</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
        <section>
            <h2>Contacte</h2>
            <p>Email: [email protected]</p>
            <p>Telèfon: 123-456-7890</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Perfil de Joan</p>
    </footer>
</body>
</html>

Conclusió

El HTML semàntic és essencial per crear llocs web accessibles i ben estructurats. Utilitzant etiquetes semàntiques, podem millorar l'experiència de l'usuari, facilitar la navegació per a les tecnologies assistencials i optimitzar el SEO. En el proper tema, explorarem com crear formularis accessibles per a tots els usuaris.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats