La capçalera (en anglès Head)

La capçalera (en anglès Head) és la part d'un document HTML que conté metadades sobre aquest document, com l'autor, la descripció i els enllaços als arxius CSS o JavaScript que s'han d'aplicar al document HTML. És la part del document web que no és visible a l'usuari.

📘 Abans que l’usuari vingui, la web ja ha de saber qui és. I això passa dins del <head>.

El <head> és una part invisibles del codi HTML, però essencial per al correcte funcionament de la pàgina. No es mostra al navegador, però li dóna instruccions sobre codificació, idioma, disseny responsive, SEO i compartir a xarxes.

Elements que poden ser usats dins de <head> : <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>

🔧 Què hem de posar al `<head>`?

Aquestes són les etiquetes bàsiques que no poden faltar:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>El meu manual web</title>
  <meta name="description" content="Guia pas a pas per crear i publicar una pàgina web professional.">
  <meta name="author" content="El teu nom">
  <link rel="stylesheet" href="css/base.css">
</head>

✅ Copia aquest bloc com a punt de partida per a qualsevol pàgina web.

🌐 Meta tags per a xarxes socials

<!-- Open Graph (Facebook, WhatsApp, etc.) -->
<meta property="og:title" content="El meu manual web">
<meta property="og:description" content="Com crear una web pas a pas.">
<meta property="og:image" content="https://tuweb.cat/img/miniatura.jpg">
<meta property="og:url" content="https://tuweb.cat">
<meta property="og:type" content="website">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="El meu manual web">
<meta name="twitter:description" content="Com crear una web pas a pas.">
<meta name="twitter:image" content="https://tuweb.cat/img/miniatura.jpg">

Perquè la teva web es vegi bé quan la comparteixis a WhatsApp, Facebook, LinkedIn o X, afegeix aquests meta tags:📌 Consell: La imatge hauria de ser 1200x630 px per evitar retallats.

🖼️ Favicons: l'icona de la teva web

El favicon és la petita icona que apareix a la pestanya del navegador i quan algú guarda la web a favorits.

Afegim aquests enllaços al <head>:

<!-- Favicon bàsic -->
<link rel="icon" href="assets/icons/favicon.ico" sizes="32x32">

<!-- Per a dispositius moderns -->
<link rel="icon" href="assets/icons/favicon-32.png" sizes="32x32">
<link rel="icon" href="assets/icons/favicon-192.png" sizes="192x192">

<!-- Apple Touch Icon (iPhone) -->
<link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png">

🔧 Genera els teus favicons a: https://realfavicongenerator.net

✅ Activitat: Completa el `<head>`

Completa aquest <head> amb la informació de la teva web:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>________________________</title>
  <meta name="description" content="__________________________________________________">
  <!-- Afegeix el teu autor -->
  <!-- Afegeix el teu favicon -->
  <!-- Afegeix Open Graph per compartir -->
  <link rel="stylesheet" href="css/base.css">
</head>

📝 Pots copiar aquest codi en un editor i omplir-lo pas a pas.

💡 Consell del creador

“Sempre reviso el <head> abans de publicar. És com assegurar-te que el motor del cotxe està ben oliat: si no, pot anar, però no durarà ni funcionarà bé.”

📋 Resum: Checklist del `<head>`

charset="UTF-8"
viewport per a mòbil
title descriptiu
description clara (150-160 caràcters)
Enllaç al CSS
Meta tags Open Graph
Twitter Cards
Favicons en diferents mides

📥 Següent pas

Un cop tens el <head> ben configurat, toca donar forma a la pàgina amb estils CSS.
➡️ Següent mòdul: Disseny i estils (CSS)

🔧 Què hem de posar al <head>?