Què hi ha en el head? Metadades en HTML

El head és la part d'un document HTML que no es mostra en el navegador web quan es carrega la pàgina. Conté informació com el <title> de la pàgina, els enllaços a CSS (si voleu aplicar estil al vostre contingut HTML amb CSS), enllaços a favicones personalitzades, i altres metadades (dades sobre l'HTML, com qui l’ha escrit, i les paraules clau importants que descriuen el document). En aquest article exposarem tot això i molt més, per a donar-vos una bona base per a treballar amb el marcatge.

Requisits previs: Familiaritat amb HTML, respecte dels continguts a Inici en HTML.
Objectiu: Aprendre sobre la capçalera HTML, quin propòsit té, quins elements importants pot contenir, i quin efecte que poden tenir en el document HTML.

Què és la capçalera d'HTML?

Fem un cop d’ull a aquest document HTML senzill que ja hem vist en l’article anterior:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

La capçalera d'un document HTML és el contingut de l'element <head>. A diferència dels continguts de l'element <body>, que es mostren a la pàgina quan es carrega en un navegador, el contingut de la capçalera no es mostra a la pàgina. La funció de la capçalera, en canvi, és contenir metadades sobre el document. En l'exemple anterior, la capçalera és més aviat curta:

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

En pàgines més extenses, però, la capçalera pot arribar a estar força plena d'elements. Ves a alguns dels teus llocs web favorits i utilitza les eines de desenvolupament per revisar-ne el contingut de les capçaleres. El nostre objectiu aquí no és mostrar com utilitzar tot el que possiblement es pot posar a la capçalera, sinó ensenyar-te com fer servir els elements principals que hi inclouràs, i que t’hi familiaritzis. Comencem!

Afegir un títol

Ja hem vist l'element <title> en acció: es pot emprar per a afegir un títol al document. Però aquest element es podria confondre amb <h1>, que s'utilitza per a afegir un títol d’encapçalament de nivell superior en el contingut del cos (body) del teu document. Això també es coneix de vegades com el títol de la pàgina. Però són coses diferents!

  • L'element <h1> apareix a la pàgina quan el navegador la carrega. En general, n’hi ha d’haver un per pàgina, per a marcar el títol del contingut de la pàgina (el títol de la història, o el titular de la notícia, o el que escaigui).
  • L'element <title> és una metadada que representa el títol del document HTML en general (no del contingut del document).

Aprenentatge actiu: Anàlisi d’un exemple senzill

  1. Per començar aquest aprenentatge actiu, et proposem d’anar al nostre repositori de GitHub i que et descarreguis una còpia de la nostra pàgina title-example.html. Pots fer-ho de diverses maneres:
    1. Copia i enganxa el codi de la pàgina en un arxiu de text nou de l'editor de codi, i a continuació, guarda’l en un lloc adequat.
    2. Prem el botó «Raw» de la pàgina, selecciona File > Save Page As... del menú del teu navegador, i a continuació escull un lloc per a guardar l'arxiu.
  2. Ara obre l'arxiu al teu navegador. Hauries de veure alguna cosa com això:

    Una pàgina web senzilla amb el títol del document HTML en l’element <title> i el títol d’encapçalament de la pàgina <h1> en l’element <h1>.Ara, hauries de tenir clar on apareix el contingut de l’element <h1> i on apareix el contingut de <title>!

  3. També pots provar d’obrir el codi en el teu editor de codi, editar-ne els continguts, i a continuació actualitzar la pàgina en el teu navegador. Juga-hi una mica.

El contingut de l'element <title> també s'utilitza per a altres coses. Per exemple, quan poses a la pàgina un marcador de pàgina (Bookmarks > Bookmark This Page, en Firefox), observa que el nom que se suggereix com a nom del marcador és el contingut de l’element <title>.

Una pàgina web amb un marcador de pagina en Firefox; el nom del marcadode pàgina s’omple automàticament amb el contingut de l’element <title>

El contingut de <title> també s'utilitza en els resultats de cerca, com es veu a continuació.

Metadades: l'element <meta>

Les metadades són dades que descriuen dades i HTML té una manera «oficial» d'afegir metadades a un document: l'element <meta>. Per descomptat, que altres coses sobre les quals parlem en aquest article també podrien considerar-se metadades. Hi ha una gran quantitat de tipus d'elements <meta> diferents que es poden incloure en la capçalera (<head>) de la teva pàgina, però no provarem d'explicar-los tots en aquesta etapa, podria acabaria sent massa confús. En lloc d’això, explicarem algunes coses amb què et pots trobar habitualment, només per a donar-te’n una idea.

Especificar la codificació de caràcters del document

En l'exemple que hem vist més amunt, s’hi ha inclòs aquesta línia:

<meta charset="utf-8">

Aquest element simplement especifica la codificació de caràcters del document: el conjunt de caràcters que el document pot utilitzar. UTF-8 és un conjunt de caràcters universal que inclou gairebé qualsevol caràcter de qualsevol idioma humà. Això vol dir que la vostra pàgina web serà capaç de gestionar la visualització de qualsevol idioma. Per tant, és una bona idea establir això a cada pàgina web que creïs! Per exemple, la pàgina podria gestionar anglès i japonès igualment bé:

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt universal de codificació de caràcters, o utf-8. Tots dos idiomes es veuen igual de bé,En canvi, si configures la teva codificació de caràcters segons ISO-8859-1, per exemple (el conjunt de caràcters de l'alfabet llatí), la representació de la teva pàgina s’esgavellaria del tot:

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt de caràcters per a l’alfabet llatí. Els caràcters japonesos no es veuen correctament.

Aprenentatge actiu: Experimentar amb la codificació de caràcters

Per provar això, torneu a la plantilla HTML que heu obtingut en l'apartat anterior amb el <title> (la pàgina title-example.html), canvieu el valor charset de meta per la norma ISO-8859-1, i afegiu el japonès a la vostra pàgina. Aquest és el codi que fem servir:

<p>Japanese example: ご飯が熱い。</p>

Afegir un autor i una descripció

Molts elements <meta> inclouen els atributs name i content:

  • name especifica el tipus d'element meta que és; quin tipus d'informació conté.
  • content especifica el contingut concret de l’element meta.

Aquests dos elements meta són útils d’incloure a la teva pàgina perquè defineixen l'autor de la pàgina i proporcionen una descripció concisa de la pàgina. Vegem-ne un exemple:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

Especificar l’autor de la pàgina és bo en molts sentits: és útil per a esbrinar qui ha escrit la pàgina, per si us hi voleu posar en contacte i fer-li preguntes sobre el contingut. Alguns sistemes de gestió de continguts disposen de funcions que extreuen automàticament la informació de l'autor de la pàgina i la poden a disposició amb aquesta finalitat.

Especificar una descripció que inclou paraules clau relacionades amb el contingut de la pàgina és útil perquè té el potencial de fer que la pàgina aparegui més amunt en les cerques rellevants que els motors de cerca executen (aquestes activitats es denominen Search Engine Optimization, o SEO.)

Aprenentatge actiu: La utilitat de la descripció per als motors de cerca

Les pàgines de resultats dels motors de cerca també fan servir aquestes descripcions. Vegem-ho amb un exemple.

  1. Ves a la pàgina d’inici de The Mozilla Developer Network.
  2. Ves al codi font de la pàgina (botó dret/Ctrl + clic sobre la pàgina, selecciona l’opció Veure l’origen de la pàgina del menú contextual).
  3. Busca la descripció en l'etiqueta meta. S'assembla a això:
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
    information about Open Web technologies including HTML, CSS, and APIs for both
    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  4. Ara busca «Mozilla Developer Network» amb el teu motor de cerca favorit (nosaltres fem servir Yahoo). Observa, a partir del contingut dels elements <meta> i <title> utilitzats en el resultat de la cerca que, definitivament, paga la pena tenir aquests elements de descripció!

    A Yahoo search result for "Mozilla Developer Network"

Nota: A Google veuràs que a continuació de l'enllaç principal de la pàgina d'inici s'enumeren algunes pàgines secundàries rellevants del projecte MDN; són els anomenats enllaços de llocs web, i es configuren en les Google's webmaster tools; és una manera de millorar els resultats de cerca del teu lloc web en el motor de cerca de Google.

Nota: Moltes característiques de <meta> senzillament ja no s'utilitzen. Per exemple, l'element <meta> paraula clau, que se suposa que proporciona als motors de cerca paraules clau per a determinar la rellevància d’aquella pàgina respecte dels termes de cerca, els motors de cerca l’ignoren perquè els spammers omplien la llista de paraules clau amb centenars de paraules clau que esbiaixaven els resultats.

Altres tipus de metadades

Trobareu altres tipus de metadades a mesura que volteu per la web. Una gran quantitat de les funcions que apareixen en els llocs web són creacions propietàries, dissenyades per a proporcionar a certs llocs web (com els llocs web de les xarxes socials) parts específiques d'informació que poden utilitzar.

Per exemple, Open Graph Data és un protocol de metadades que Facebook va inventar per proporcionar als llocs web metadades enriquides. En el codi font de MDN Web Docs trobaràs això:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Un efecte d'això és que quan a Facebook es fa un enllaç a MDN Web Docs, l'enllaç apareix amb una imatge i una descripció: una experiència més rica per als usuaris.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.

Twitter també té metadades propietàries pròpies, que tenen un efecte similar quan a twitter.com es mostra l’URL del lloc web. Per exemple:

<meta name="twitter:title" content="Mozilla Developer Network">

Afegir icones personalitzades al teu lloc web

Per enriquir encara més el disseny del teu lloc web, en les metadades pots afegir referències a icones personalitzades, que es mostraran en certs contextos.

La humil icona de web (favicon), que existeix de fa molts, molts anys, va ser la primera icona d'aquest tipus, una icona de 16 x 16 píxels utilitzada en múltiples llocs. Pots afegir una icona de web a la teva pàgina si:

  1. La deses en el mateix directori que la pàgina índex del lloc web, en format .ico (la majoria dels navegadors admetem les icones de web en els formats més comuns, com .gif o .png, però si utilitzes el format ICO t’assegures que funciona des d'Internet Explorer 6).
  2. Afegeixes al bloc de codi <head> de l’HTML la línia següent per a fer-hi referència:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Els navegadors moderns utilitzen les icones de web en diversos llocs, com en la pestanya de la pàgina activa, i en el panell de marcadors, quan hi ha un marcador de pàgina:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

Avui dia hi ha un munt d'altres tipus d'icones que també pots tenir en compte. Per exemple, en el codi font de la pàgina MDN trobaràs això:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

Els comentaris expliquen per a què s'utilitza cada icona; aquests elements cobreixen coses com ara proporcionar una agradable icona en alta resolució quan deses el lloc web a la pantalla principal d'un iPad.

No et preocupis gaire pel que fa a l'aplicació de tots aquests tipus d'icona en aquest moment; aquesta característica és bastant avançada i no s'espera que en tingueu un coneixement per a poder progressar en el curs. L'objectiu principal aquí és fer-te saber què són aquests tipus de coses, per si te les trobes quan navegues pel codi font d'altres llocs web.

Aplicar CSS i JavaScript a HTML

Gairebé tots els llocs web que utilitzes actualment fan servir CSS perquè presentin un aspecte fresc, i JavaScript per a potenciar-hi les funcions interactives, com ara reproductors de vídeo, mapes, jocs, i molt més. Aquests s'apliquen amb més freqüència a una pàgina web amb l'ús dels elements <link> i <script>, respectivament.

  • L'element <link> sempre va dins de la capçalera (head) del document. Pot prendre dos atributs, rel="stylesheet", que indica que es tracta del full d'estil del document, i href, que conté la ruta d'accés al fitxer del full d'estil:

    <link rel="stylesheet" href="my-css-file.css">
  • L'element <script> no ha d'anar a la capçalera; de fet, sovint és millor posar-lo a la part inferior del cos (body) del document (just abans de l'etiqueta de tancament </body>), per assegurar-se que el navegador ha llegit tot el contingut HTML abans d'intentar aplicar-hi JavaScript (si JavaScript intenta accedir a un element que encara no existeix, el navegador genera un error.)

    <script src="my-js-file.js"></script>

    Nota: L'element <script> pot semblar un element buit, però no ho és, i per tant necessita una etiqueta de tancament. En lloc d'apuntar a un arxiu script extern, també es pot optar per posar el script dins de l'element <script>.

Aprenentatge actiu: Aplicar CSS i JavaScript a una pàgina

  1. Per iniciar aquest aprenentatge actiu, pren una còpia dels arxius meta-example.html, script.js i style.css, i desa’ls en el mateix directori del teu ordinador. Assegura’t que es desen amb els noms i les extensions d'arxiu correctes.
  2. Obre el fitxer HTML en el teu navegador i en l’editor de text.
  3. Seguint la informació que et proporcionem aquí, afegeix els elements <link> i <script> al teu HTML perquè els teus CSS i JavaScript s'apliquin a l’HTML.

Si ho fas correctament, quan deses el codi HTML i actualitzes el navegador observaràs que les coses han canviat:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • El JavaScript ha afegit una llista buida a la pàgina. Ara bé, quan fas clic a qualsevol lloc de la llista, un quadre de diàleg et demana que introdueixis un text per a un element nou a la llista. Quan prems el botó Acceptar, a la llista s'afegeix un element de llista nou que conté aquest text. En fer clic en un element de la llista, un quadre de diàleg et permet canviar el text de l'element.
  • El CSS ha pintat de verd el fons i ha augmentat la mida del text. També ha aplicat estil a alguns dels continguts que JavaScript ha afegit a la pàgina (la barra vermella amb la vora negra és l'estil del codi CSS que s'ha afegit a la llista que ha generat el JS).

Nota: Si t’encalles amb aquest exercici i no se t’hi apliquen el CSS/JS, revisa la nostra pàgina d'exemple css-and-js.html.

Ajustar l'idioma principal del document

Per acabar, paga la pena esmentar que es pot establir (i realment s'hauria d'establir) l'idioma de la teva pàgina. Això es pot fer afegint l'atribut lang en l'etiqueta d'obertura HTML (com es veu en el meta-example.html).

<html lang="en-US">

Això és útil en molts sentits. Els motors de cerca indexen més eficaçment el document si s'hi estableix el llenguatge (permeten que aparegui correctament en els resultats específics de l'idioma, per exemple), i és útil per a les persones amb discapacitat visual que utilitzen lectors de pantalla (per exemple, la paraula «six» hi és tant en francès com en anglès, però es pronuncia diferent).

També post fer que diverses subseccions del teu document reconeguin idiomes diferents. Per exemple, podem establir que es reconegui una secció de japonès per a la part del nostre document que està escrita en japonès, així:

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

Aquests codis els defineix la norma ISO 639-1. Pots trobar més informació sobre aquests codis en les Language tags in HTML and XML.

Resum

Arribem al final del nostre recorregut per la capçalera d’un document HTML; s’hi poden fer moltes més coses, però un recorregut exhaustiu seria avorrit i en aquesta etapa podria embolicar, i per ara només volem donar-te una idea de les coses més comunes que s’hi poden trobar! En l’article següent veurem els elements bàsics d’un text HTML.