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

Introducció a l'HTML semàntic

Següent ►
►

Què és l'HTML semàntic?

L'HTML semàntic es refereix a l'ús d'etiquetes HTML que tenen un significat clar i específic per a l'usuari i els motors de cerca. Aquestes etiquetes no només defineixen l'aparença del contingut, sinó també la seva estructura i funció dins del document. Això ajuda a millorar l'accessibilitat i la SEO (optimització per a motors de cerca).

Beneficis de l'HTML semàntic

  1. Millora de l'accessibilitat: Els lectors de pantalla i altres eines d'accessibilitat poden interpretar millor el contingut.
  2. SEO optimitzat: Els motors de cerca poden comprendre millor la jerarquia i la rellevància del contingut.
  3. Mantenibilitat: El codi és més fàcil de llegir i mantenir.
  4. Compatibilitat futura: Les etiquetes semàntiques són més propenses a ser compatibles amb futures tecnologies web.

Etiquetes semàntiques comunes

<header>

Defineix una capçalera per a un document o una secció. Normalment conté elements com títols, logotips, o menús de navegació.

<header>
  <h1>Benvinguts al meu lloc web</h1>
  <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>
</header>

<nav>

Defineix una secció que conté enllaços de navegació.

<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>

Representa el contingut principal del document. Només hauria d'haver-hi un element <main> per pàgina.

<main>
  <article>
    <h2>Últimes notícies</h2>
    <p>Aquí trobaràs les últimes notícies del nostre lloc web.</p>
  </article>
</main>

<article>

Defineix un contingut independent i auto-contenidor, com una entrada de blog, un article de notícies, etc.

<article>
  <h2>Comença la nova temporada</h2>
  <p>La nova temporada de la nostra sèrie favorita comença aquesta setmana.</p>
</article>

<section>

Defineix una secció genèrica d'un document. Pot contenir capçaleres, articles, etc.

<section>
  <h2>Sobre nosaltres</h2>
  <p>Som una empresa dedicada a oferir els millors serveis.</p>
</section>

<aside>

Conté informació relacionada amb el contingut principal, però que no és essencial per a la comprensió del mateix, com barres laterals o blocs de cites.

<aside>
  <h3>Notícies relacionades</h3>
  <p>Consulta altres articles relacionats amb aquest tema.</p>
</aside>

<footer>

Defineix un peu de pàgina per a un document o una secció. Normalment conté informació sobre l'autor, enllaços de navegació addicionals, etc.

<footer>
  <p>&copy; 2023 El meu lloc web. Tots els drets reservats.</p>
</footer>

Exercici Pràctic

Instruccions

Crea una pàgina HTML que utilitzi les etiquetes semàntiques descrites anteriorment. La pàgina ha de tenir la següent estructura:

  1. Capçalera amb un títol i un menú de navegació.
  2. Secció principal amb un article que contingui un títol i un paràgraf.
  3. Barra lateral amb informació addicional.
  4. Peu de pàgina amb informació sobre l'autor.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pàgina HTML Semàntica</title>
</head>
<body>
  <header>
    <h1>Benvinguts al meu lloc web</h1>
    <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>
  </header>
  
  <main>
    <article>
      <h2>Últimes notícies</h2>
      <p>Aquí trobaràs les últimes notícies del nostre lloc web.</p>
    </article>
  </main>
  
  <aside>
    <h3>Notícies relacionades</h3>
    <p>Consulta altres articles relacionats amb aquest tema.</p>
  </aside>
  
  <footer>
    <p>&copy; 2023 El meu lloc web. Tots els drets reservats.</p>
  </footer>
</body>
</html>

Resum

En aquesta secció, hem après què és l'HTML semàntic i per què és important. Hem explorat diverses etiquetes semàntiques com <header>, <nav>, <main>, <article>, <section>, <aside>, i <footer>. També hem vist un exemple pràctic de com utilitzar aquestes etiquetes per crear una pàgina HTML ben estructurada i accessible. En el següent tema, aprofundirem en les etiquetes semàntiques específiques com <header>, <nav>, i <footer>.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats