Skip to main content

Layout i Metadades

Aquest capítol explora les etiquetes estructurals modernes de HTML5 i com utilitzar el <head> per afegir informació important no visible directament a la pàgina.

Etiquetes de Layout en HTML5​

Representa l'encapçalament d'una pàgina o secció. Sol incloure el logotip, títol, menú de navegació...

<header>
  <img src="./logo.png" alt="Logotip" />
  <nav>...</nav>
</header>

Agrupa els enllaços de navegació i millora l'accessibilitat.

<nav>
  <ul>
    <li><a href="#">Inici</a></li>
    <li><a href="#">Productes</a></li>
  </ul>
</nav>

<main>​

Contingut principal de la pàgina, exclou header i footer. Ajuda a SEO i accessibilitat.

<main>
  <section>
    <h1>Producte destacat</h1>
    <p>Descripció...</p>
  </section>
</main>

<section>​

Divideix el contingut en blocs lògics amb títol propi.

<section>
  <h2>Característiques</h2>
  <p>Text explicatiu...</p>
</section>

<article>​

Contingut autònom i reutilitzable com notícies, posts de blog, etc.

<article>
  <h2>Notícia destacada</h2>
  <p>Contingut complet...</p>
</article>

Peu de pàgina amb informació complementària.

<footer>
  <p>&copy; 2023 Joan Sanfeliu</p>
  <nav>
    <ul>
      <li><a href="#">Política de privacitat</a></li>
    </ul>
  </nav>
</footer>

L'element <head>​

Conté metadades i enllaços externs com fonts, estils o scripts.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <title>Títol de la pàgina</title>
  <meta name="description" content="Descripció breu de la pàgina" />
  <meta name="keywords" content="HTML, CSS, JS, metadades" />
  <meta name="author" content="Joan Sanfeliu" />
  <link rel="stylesheet" href="styles.css" />
  <script src="script.js"></script>
</head>

El títol <title>​

El contingut que apareix a la pestanya del navegador i als motors de cerca.

Bona pràctica:

  • Clar i descriptiu
  • 50–60 caràcters màxim
  • Únic per cada pàgina
  • Incloure paraules clau útils

Favicon​

Icona petita que representa el lloc web a la pestanya, barra de marcadors o historial.

<link rel="icon" type="image/x-icon" href="favicon.ico" />

Formats recomanats: .ico o .png
Resolucions habituals: 16x16, 32x32, 48x48

<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Metadades importants​

Charset​

<meta charset="UTF-8" />

Viewport (resolució per mòbils)​

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Descripció de la pàgina​

<meta name="description" content="Web de desenvolupament frontend" />

Paraules clau (SEO antic)​

<meta name="keywords" content="frontend, html, css, javascript" />

Autor​

<meta name="author" content="Joan Sanfeliu" />

Open Graph i Twitter Cards​

Milloren com es veuen els enllaços compartits a xarxes socials.

<!-- Facebook (OG) -->
<meta property="og:title" content="Títol de la pàgina" />
<meta property="og:description" content="Descripció de la pàgina" />
<meta property="og:image" content="https://example.com/imatge.jpg" />

<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Títol de la pàgina" />
<meta name="twitter:description" content="Descripció de la pàgina" />
<meta name="twitter:image" content="https://example.com/imatge.jpg" />

Aquest mòdul et dona eines per estructurar webs professionals, millorar la seva accessibilitat, SEO i compartir-les de forma correcta a xarxes socials. És un pas clau per fer pàgines completes i coherents.