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

Header, Nav, i Footer

Següent ►
►

En aquest tema, explorarem tres dels elements semàntics més importants introduïts amb HTML5: <header>, <nav>, i <footer>. Aquests elements ajuden a estructurar el contingut de la pàgina de manera més clara i significativa, tant per als usuaris com per als motors de cerca.

Què són els elements semàntics?

Els elements semàntics són aquells que no només defineixen l'aparença del contingut, sinó també el seu significat. Això facilita la comprensió del contingut per part dels navegadors i els motors de cerca, millorant així l'accessibilitat i el SEO.

  1. L'element <header>

Definició

L'element <header> s'utilitza per contenir informació introductòria o de navegació d'una secció o pàgina web. Pot incloure títols, logotips, menús de navegació, etc.

Exemple

<header>
  <h1>Benvingut al meu lloc web</h1>
  <img src="logo.png" alt="Logotip del lloc web">
  <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>

Explicació

  • <h1>: Títol principal de la pàgina.
  • <img>: Logotip del lloc web.
  • <nav>: Menú de navegació que conté una llista d'enllaços.

  1. L'element <nav>

Definició

L'element <nav> s'utilitza per contenir un conjunt d'enllaços de navegació. Aquest element és especialment útil per a menús de navegació principals o secundaris.

Exemple

<nav>
  <ul>
    <li><a href="#home">Inici</a></li>
    <li><a href="#services">Serveis</a></li>
    <li><a href="#portfolio">Portafoli</a></li>
    <li><a href="#contact">Contacte</a></li>
  </ul>
</nav>

Explicació

  • <ul>: Llista no ordenada que conté els elements de navegació.
  • <li>: Cada element de la llista representa un enllaç de navegació.
  • <a>: Enllaç a una secció específica de la pàgina o a una altra pàgina.

  1. L'element <footer>

Definició

L'element <footer> s'utilitza per contenir informació de peu de pàgina, com ara drets d'autor, enllaços a polítiques de privacitat, i informació de contacte.

Exemple

<footer>
  <p>&copy; 2023 El meu lloc web. Tots els drets reservats.</p>
  <nav>
    <ul>
      <li><a href="#privacy">Política de privacitat</a></li>
      <li><a href="#terms">Termes i condicions</a></li>
      <li><a href="#contact">Contacte</a></li>
    </ul>
  </nav>
</footer>

Explicació

  • <p>: Paràgraf que conté informació de drets d'autor.
  • <nav>: Menú de navegació amb enllaços a seccions importants del lloc web.

Exercici Pràctic

Instruccions

Crea una pàgina HTML que utilitzi els elements <header>, <nav>, i <footer>. La pàgina ha de tenir un títol, un logotip, un menú de navegació amb almenys tres enllaços, i un peu de pàgina amb informació de drets d'autor i enllaços a la política de privacitat i termes i condicions.

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 d'exemple</title>
</head>
<body>
  <header>
    <h1>Benvingut al meu lloc web</h1>
    <img src="logo.png" alt="Logotip del lloc web">
    <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>
    <h2>Contingut principal</h2>
    <p>Aquesta és la secció principal del contingut de la pàgina.</p>
  </main>

  <footer>
    <p>&copy; 2023 El meu lloc web. Tots els drets reservats.</p>
    <nav>
      <ul>
        <li><a href="#privacy">Política de privacitat</a></li>
        <li><a href="#terms">Termes i condicions</a></li>
        <li><a href="#contact">Contacte</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

Conclusió

Els elements <header>, <nav>, i <footer> són fonamentals per a la creació de pàgines web ben estructurades i accessibles. Utilitzar aquests elements semàntics no només millora l'experiència de l'usuari, sinó que també facilita la tasca dels motors de cerca i altres eines d'accessibilitat per comprendre millor el contingut de la pàgina.

◄ 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