Què hi ha en el head? Metadades en HTML

This translation is incomplete. Please help translate this article from English.

El head d'un document HTML és la part que no es mostra en el navegador web quan es carrega la pàgina. Conté informació tal com el <title> de la pàgina, enllaços a CSS (si voleu l'estil del vostre contingut HTML amb CSS), enllaços a faviconos personalitzats, i altres metadades (dades sobre l'HTML, com qui el va escriure, i les paraules clau importants que descriuen el document.) En aquest article cobrirem tot l'anterior i molt més, per donar-vos una bona base per afrontar el marcat i qualsevol altre codi que hagi de viure al vostre cap.

Requisits previs: Familiaritat bàsica en HTML, com es tracta en Inici en HTML.
Objectiu: Aprendre sobre el head HTML, quin és el seu propòsit, els elements més importants que poden contenir, i l'efecte que poden tenir en el document HTML.

Que és el head d'HTML?

Anem a revisar el senzill document HTML que vam veure en el 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>

El head d'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 del head no es mostrarà a la pàgina. En el seu lloc, el treball del head és la de contenir metadades sobre el document. En l'exemple anterior, el head és bastant petit:

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

En les pàgines de major grandària però, el head pot arribar a estar bastant ple d'elements - Intenteu anar a alguns dels vostres llocs web favorits i utilitzeu les eines de desenvolupament per revisar el seu contingut en el head. El nostre objectiu aquí no és per mostrar com utilitzar tot el que possiblement es pot posar en el head, sinó ensenyar-vos com utilitzar les coses més òbvies que desitgeu incloure en el head, us donarà una certa familiaritat. Comencem.

Afegir un title

Ja hem vist l'element <title> en acció - això pot ser usat per afegir un títol al document. No obstant això, es pot confondre amb l'element <h1>, que s'utilitza per afegir una capçalera de nivell superior per al contingut del vostre cos (body) - 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 es carregat en el navegador - en general això s'ha d'utilitzar un cop per pàgina, per 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 sigui apropiat per al seu ús.)
  • L'element <title> es una metadada que representa el títol del document HTML en general (no el contingut del document.)

Aprenentatge actiu: Revisar un exemple senzill

  1. Per començar aquest aprenentatge actiu, ens agradaria que anéssiu al nostre repositori de Github i descarreguéssiu una còpia de la nostra pàgina title-example.html. Per a això, ja sigui
    1. Copiar i enganxar el codi de la pàgina en un nou arxiu de text en l'editor de codi, a continuació, guardar-ho en un lloc sensible.
    2. Preme el botó "Raw" en la pàgina, seleccioneu File > Save Page As... des del menú del vostre navegador, a continuació, escolliu un lloc per guardar l'arxiu.
  2. Ara obriu l'arxiu en el vostre navegador. Hauriau de veure alguna cosa com això:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Ara, hauria de ser completament obvi on apareix el contingut <h1> , i on apareix el contingut <title>!

  3. També podeu intentar obrir el codi en el vostre editor de codi, editar els continguts d'aquests elements, a continuació, actualitzar la pàgina en el vostre navegador. Divertir-vos amb ella.

El contingut de l'element <title> també s'utilitzen en altres formes. Per exemple, si proveu la pàgina com un marcador (Bookmarks > Bookmark This Page, en Firefox), veureu el contingut <title> que l'omple com a nom del marcador suggerit.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

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

Metadades: l'element <meta>

Les metadades són dades que descriuen les dades i HTML té una forma "oficial" d'afegir metadades a un document - l'element <meta>. Per descomptat, que altres coses sobre les que estem parlant en aquest article també podrian ser pensades com metadades. Hi ha una gran quantitat de diferents tipus d'elements <meta> que es poden incloure en el <head> de la vostra pàgina , però no tractarem d'explicar-vos tots ells en aquesta etapa, ja que acabaria sent massa confús. En el seu lloc, explicarem algunes coses que podeu veure habitualment, només per donar-vos una idea.

Especificar la codificació de caràcters del document

En l'exemple que hem vist més amunt, es va incloure aquesta línia:

<meta charset="utf-8">

Aquest element simplement especifica la codificació de caràcters del document - el joc de caràcters que el document té permès utilitzar. UTF-8 és un conjunt de caràcters universal que inclou gairebé qualsevol caràcter de qualsevol llenguatge 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 creeu! Per exemple, la pàgina podria gestionar Anglès i Japonès molt bé:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Si configureu la vostra codificació de caràcters a ISO-8859-1, per exemple (el joc de caràcters de l'alfabet llatí), el processament de la pàgina estaria tota en mal estat:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

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

Per provar això, reviseu la plantilla HTML obtinguda en l'apartat anterior amb el <title> (la pàgina title-example.html), intenteu canviar el valor meta charset  a la norma ISO-8859-1, i afegir el japones 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 meta actual.

Dos d'aquests elements meta són útils per incloure a la vostra pàgina defineixen l'autor de la pàgina, i proporcionen una descripció concisa de la pàgina. Vegem 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.">

L'especificació d'un autor és útil d'alguna manera: útil per ser capaços d'esbrinar qui va escriure la pàgina, si desitjeu posar-vos en contacte amb ell amb preguntes sobre el contingut. Alguns sistemes de gestió de continguts tenen la facilitat d'extreure automàticament informació sobre la pàgina de l'autor i posar-la a disposició per a tals fins.

L'especificació d'una descripció que inclou paraules clau en relació amb el contingut de la vostra pàgina és útil, ja que té el potencial de fer que la vostra pàgina aparegui més amunt en les cerques rellevants dutes a terme en els motors de cerca (tals activitats es denominen Search Engine Optimization, o SEO.)

Aprenentatge actiu: L'ús de la descripció en els motors de cerca

La descripció també s'utilitza en les pàgines de resultats dels motors de cerca. Anem a través d'un exercici a explorar aquesta

  1. Anar a la front page of The Mozilla Developer Network.
  2. Veure la font de la pàgina (dreta/Ctrl + clic en la pàgina, seleccioneu Veure origen de pàgina en el menú de context.)
  3. Buscar l'etiqueta meta de descripció. 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 busqueu "Mozilla Developer Network" en el vostre motor de cerca favorit (Utilitzem Yahoo.) Us donareu compte de la descripció en el contingut dels elements <meta> i <title> utilitzats en el resultat de la cerca - definitivament val la pena tenir!

    A Yahoo search result for "Mozilla Developer Network"

Nota: A Google, podreu veure algunes pàgines secundàries pertinents del MDN que s'enumeren a continuació de l'enllaç principal de la pàgina d'inici MDN - aquests són anomenats enllaços de lloc, i són configurables en les Google's webmaster tools — una forma de millorar els resultats de cerca del vostre lloc en el motor de cerca de Google.

Nota: Moltes característiques de <meta> simplement no s'utilitzen més. Per exemple, la paraula clau de l'element <meta> - que se suposa que proporcionen paraules clau per als motors de cerca per determinar la rellevància de la pàgina en al  cerca de diferents termes - és ignorat pels motors de cerca, ja que els spammers acaban omplint la llista de paraules clau amb centenars de paraules clau, esbiaixant resultats.

Altres tipus de metadades

A mesura que rastregeu al voltant de la web, trobareu altres tipus de metadades, també. Una gran quantitat de les funcions que apareixen en els llocs web són creacions propietaries, dissenyades per proporcionar a certs llocs (com els llocs de xarxes socials) parts específiques d'informació que poden ser utilitzades.

Per exemple, Open Graph Data és un protocol de metadades que Facebook va inventar per proporcionar valioses metadades per als llocs web. En el codi font MDN, es troba aquesta:

<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 es vincula a MDN en facebook, l'enllaç apareix juntament amb una imatge i 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é les seves pròpies metadades propietaries, tinguen un efecte similar quan es mostra la URL del lloc en twitter.com. Per exemple:

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

Afegir icones personalitzades al vostre lloc

Per enriquir encara més el disseny del vostre lloc web, podeu afegir referències a icones personalitzades en les metadades, i aquests es mostraran en certs contextos.

El favicon humil, que ha existit des de fa molts, molts anys, va ser la primera icona d'aquest tipus, una icona de 16 x 16 píxels utilitzat en múltiples llocs. El favicon es pot afegir a la vostra pàgina:

  1. Guardeu-los en el mateix directori que la pàgina índex del lloc, es guarden en format .ico (la majoria dels navegadors donan suport els favicons en els formats més comuns, com .gif o .png, però si utilitzeu el format ICO assegurar-vos que funciona des d'Internet Explorer 6.)
  2. Afegiu la següent línia en el codi HTML <head> per fer referència a ell:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Els navegadors moderns utilitzen els favicons en diversos llocs, com en la pestanya de la pàgina que està oberta, i en el panell de marcadors quan tens un marcador de pàgina:

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

Hi ha un munt d'altres tipus d'icones a tenir en compte avui dia també. Per exemple, trobareu això en el codi font de la pàgina MDN:

<!-- 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 perquè s'utilitza cada icona - aquests elements cobreixen coses com, proporcionar un icona d'alta resolució agradable per utilitzar quan el lloc web es guarda a la pantalla principal d'un iPad.

No es preocupeu massa sobre l'aplicació de tots aquests tipus d'icona en aquest moment - aquesta és una característica bastant avançada, i no s'espera que tingueu un coneixement d'aquest, per progressar a través del curs. L'objectiu principal aquí és fer-vos saber el que són aquest tipus de coses, en el cas que us els trobeu mentre navegueu pel codi font d'altres llocs web.

Aplicar CSS i JavaScript a HTML

Gairebé tots els llocs web que utilitzeu actualment fan servir CSS perquè tinguin un aspecte fresc, i JavaScript per potenciar la funcionalitat interactiva, 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 de l'element <link> i l'element <script>, respectivament.

  • L'element <link> sempre va dins del head del document. Això pren dos atributs, rel = "stylesheet", indica que es tracta de fulles d'estil del document i href, que conté la ruta d'accés al fitxer de la fulla d'estil:

    <link rel="stylesheet" href="my-css-file.css">
  • L'element <script> no ha d'anar en el head; de fet, sovint és millor posar-lo a la part inferior del cos del document (just abans de l'etiqueta de tancament </body>), per assegurar-se que tot el contingut HTML ha estat llegit pel navegador abans de que tracti d'aplicar JavaScript a ell (si JavaScript intenta accedir a un element que encara no existeix, el navegador generarà 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, prendre una còpia dels nostres arxius meta-example.html, script.js i style.css, i guardeu-los al vostre ordinador en el mateix directori. Assegureu-vos que es guarden amb els noms correctes i extensions d'arxiu.
  2. Obriu el fitxer HTML tant en el vostre navegador, i editor de text.
  3. Seguint la informació aquí proporcionada, afegiu els elements <link> i <script> al vostre HTML, perquè el vostre CSS i JavaScript s'apliquin en l'HTML.

Si es fa correctament, quan guardeu el codi HTML i actualitzeu el vostre navegador veureu 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 es faci clic a qualsevol lloc de la llista, un quadre de diàleg us demanará que introduïu un text per a un nou element de la llista. Quan es prem el botó Acceptar, un nou element de la llista s'afegirà a la llista que conté el text. En fer clic en un element de la llista existent, un quadre de diàleg us permeterà canviar el text de l'element.
  • La CSS ha causat que el fons fora verd, i el text sigui més gran. També ha donat estil a alguns dels continguts que JavaScript ha afegit a la pàgina (la barra vermella amb la vora negra és l'estil de la CSS que s'ha afegit a la llista generada per JS).

Nota: Si us quedeu encallats en aquest exercici i no podeu obtenir la CSS/JS per aplicar, intenteu revisar la nostra pàgina d'exemple css-and-js.html.

Ajustar l'idioma principal del document

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

<html lang="en-US">

Això és útil de moltes maneres. El document serà indexat més eficaçment pels motors de cerca si s'estableix el llenguatge (permetent 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" existeix tant en francès com en anglès, però es pronuncia diferent).

També es poden establir sub-seccions en el document per a ser reconeguts com idiomes diferents. Per exemple, podríem fixar la secció d'idioma japonès per a ser reconegut com el japonès, així:

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

Aquests codis es defineixen per la norma ISO 639-1. Podeu trobar més informació sobre ells en les etiquetes d'idiomes en HTML i XML.

Sumari

Aixó marca el final del nostre recorregut del head HTML - hi ha molt més que podeu fer aquí, però un exhaustiu recorregut seria avorrit i confús en aquesta etapa, i solament volíem donar-vos una idea de les coses més comuns que trobareu allà per ara! En el següent article veurem els fonaments de text HTML.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,