Capçalera <head> </head>

L’etiqueta <head> actua com un contenidor per a informació global sobre el document. Serveix principalment per definir el títol, la descripció, les paraules clau, entre altres elements rellevants del document.

Amb l’excepció del títol, cap element dins de <head> es considera part del contingut visible del document i, per tant, no es mostra.

En el <head>, es poden especificar scripts i fitxers de fulles d’estil.

Parts de <head>

  • <title>: Defineix el títol del document i és l’única etiqueta obligatòria dins d’aquesta secció.
  • <link>: Serveix per definir enllaços externs que amplien el document, com fulles d’estil o icones.
  • <meta>: S’utilitza per identificar propietats del document, com l’autor, el codi de caràcters, etc.
  • <style>: S’utilitza per incrustar regles CSS directament dins del document HTML.
  • <script>: Permet afegir scripts al document.

Per exemple: 

<!DOCTYPE html>
<html lang="ca">

<head>
    <!-- Metadades del document -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Títol de la pàgina -->
    <title>El Meu Lloc Web</title>

    <!-- Enllaços a fulles d'estil (CSS) -->
    <link rel="stylesheet" href="estil.css">

    <!-- Enllaços a icones (favicon) -->
    <link rel="icon" href="favicon.png">

    <!-- Metadades per SEO (Optimització per motors de cerca) -->
    <meta name="description" content="Una breu descripció del teu lloc web">
    <meta name="keywords" content="HTML, CSS, JavaScript, web">
    <meta name="author" content="El Teu Nom">

    <!-- Metadades per xarxes socials -->
    <meta property="og:title" content="El Meu Lloc Web">
    <meta property="og:description" content="Una breu descripció del teu lloc web">
    <meta property="og:image" content="imatge.jpg">
    <meta property="og:url" content="https://www.exemple.com">

    <!-- Enllaços a scripts (JavaScript) -->
    <script src="script.js"></script>
</head>

<body>
    <!-- Contingut de la pàgina -->
    <h1>Benvinguts al Meu Lloc Web</h1>
    <p>Aquí pots afegir el teu contingut principal.</p>
</body>
</html>

En el codi anterior trobem:

1.- Metadades del Document

  • <meta charset="UTF-8">: Especifica la codificació de caràcters del document com a UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la vista de la pàgina per a dispositius mòbils.

2.- Títol de la Pàgina

  • <title>: Defineix el títol de la pàgina que apareixerà a la barra de títols del navegador.

3.- Enllaços a Fulles d’Estil (CSS)

  • <link rel="stylesheet" href="estil.css">: Connecta la pàgina amb un fitxer d’estil extern.

4.- Enllaços a Icones (Favicon)

  • <link rel="icon" href="favicon.png">: Estableix la icona que apareixerà a la pestanya del navegador.

5.- Metadades per SEO

  • <meta name="description" content="Una breu descripció del teu lloc web">: Proporciona una descripció del contingut de la pàgina per als motors de cerca.
  • <meta name="keywords" content="HTML, CSS, JavaScript, web">: Indica paraules clau relacionades amb el contingut de la pàgina.
  • <meta name="author" content="El Teu Nom">: Especifica l’autor del document.

6.- Metadades per Xarxes Socials

  • <meta property="og:title" content="El Meu Lloc Web">: Defineix el títol per a compartir en xarxes socials.
  • <meta property="og:description" content="Una breu descripció del teu lloc web">: Proporciona una descripció per a xarxes socials.
  • <meta property="og:image" content="imatge.jpg">: Defineix una imatge per a xarxes socials.
  • <meta property="og:url" content="https://www.exemple.com">: URL per a xarxes socials.

E7.- nllaços a Scripts (JavaScript)

  • <script src="script.js"></script>: Connecta la pàgina amb un fitxer de script extern.

Totes aquestes etiquetes i metadades són útils per millorar la compatibilitat, la visibilitat als motors de cerca i la interacció amb xarxes socials del teu lloc web.