12. Conceptes bàsics d'HTML

Mark Norman Francis. 8 de juliol del 2008. Darrera modificació: 13 de març de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: en línia, atribut, html, element, etiqueta.

En aquest apartat aprendrem els conceptes bàsics d'HTML: què és, què fa, un resum de la seva història i quina estructura té un document en HTML. Els apartats que trobareu després d'aquest, expliquen cadascuna de les parts específiques de l'HTML amb molta més profunditat.

Els continguts d'aquest apartat són els següents:

• 12.1. Què és l'HTML
• 12.2. Aspecte de l'HTML
• 12.3. La història de l'HTML
• 12.4. L'estructura d'un document HTML
• 12.5. La sintaxi dels elements HTML
• 12.6. Elements de bloc i en línia
• 12.7. Referències de caràcter
• Resum

12.1. Què és l'HTML

La majoria de les aplicacions d'escriptori que poden llegir i escriure fitxers utilitzen un format de fitxer especial. Per exemple, el Microsoft Word entén els fitxers ".doc" i el Microsoft Excel entén els ".xls". Aquests fitxers contenen les instruccions per reconstruir el document quan es torna a obrir i per saber quin és el contingut del document, a més de les "metadades" sobre l'article com per exemple l'autor, la data de l'última modificació del document i fins i tot coses com la llista de canvis realitzats per tal de poder-ne recuperar totes les versions diferents.

Fem servir el terme tècnic "agents d'usuaris" en lloc de "navegadors web". Un agent d'usuari és qualsevol programari que es faci servir per a accedir a les pàgines web en nom dels usuaris. Aquí cal fer una distinció molt important: tots els tipus de navegadors d'escriptori (Internet Explorer, Opera, Firefox, Safari, etc.) i els navegadors alternatius per a altres dispositius (com ara el canal d'Internet de la Wii i els navegadors per a telèfons mòbils com ara Opera Mini i WebKit per a l'iPhone) són agents d'usuari, però no tots els agents d'usuari són navegadors. Els programes automatitzats que utilitzen Google i Yahoo! per indexar el web i que executen en els seus motors de cerca també són agents d'usuari, però no hi ha cap ésser humà que els controli directament.

12.2. Aspecte de l'HTML

L'HTML és només una representació textual del contingut i del seu significat general. Per exemple, el codi per a l'encapçalament "Aspecte de l'HTML" és el següent:

<h2 id="htmllooks">Aspecte de l'HTML</h2>

La part <h2> és un marcador (que es coneix com a "etiqueta") que significa "el que segueix s'ha de considerar com un títol de segon nivell". </h2> és una etiqueta que indica on acaba el títol de segon nivell (i es coneix com a "etiqueta de tancament"). L'etiqueta d'obertura, l'etiqueta de tancament i tot el que hi ha entre elles es coneix com a "element". Molta gent utilitza els termes element i etiqueta indistintament, la qual cosa no és del tot correcta. id="htmllooks" és un atribut; més endavant ja en parlarem, dels atributs.

La majoria dels navegadors incorporen una opció "Codi font" o "Veure el codi font", normalment sota el menú "Veure". Si el vostre navegador incorpora aquesta opció, seleccioneu-la i dediqueu uns moments a mirar el codi font HTML d'aquesta pàgina.

12.3. La història de l'HTML

Quan Tim Berners-Lee va inventar el web, va crear tant el primer servidor web com la primera versió de l'HTML.

L'HTML ha canviat d'una manera molt important des d'aquells primers dies, però una bona part del contingut de l'HTML actual ja es trobava en aquesta primera documentació i més de la meitat de les "etiquetes" descrites en el document "Etiquetes HTML" original encara existeixen.

A mesura que hi va anar havent cada vegada més gent que escrivia pàgines web i alternatives al navegador original, també es van anar afegint més funcions a l'HTML. Moltes es van adoptar universalment (com ara l'element img utilitzat per inserir una imatge en un document, que es va fer servir per primera vegada a NCSA Mosaic). Altres etiquetes eren de propietat i només es feien servir en un o dos navegadors. Cada vegada hi havia una necessitat més gran d'estandardització per tal que els autors d'altres navegadors poguessin tenir un document (conegut com a "especificació") que descrivís de manera definitiva l'aspecte de l'HTML per així poder jutjar si se saltaven algunes parts de la implantació de l'HTML.

L'IETF (Internet Engineering Task Force, un organisme definidor d'estàndards que es preocupa per la interoperabilitat a través d'Internet) va publicar l'any 1993 un esborrany de proposta d'HTML. Aquesta proposta va caducar l'any 1994 sense haver-se convertit en un estàndard, però va fer que l'IETF creés un grup de treball per estudiar l'estandardització de l'HTML.

L'any 1995 es va redactar "HTML 2.0", que aprofitava idees de l'esborrany de l'HTML original. Dave Raggett va escriure una proposta alternativa coneguda com a HTML+; aquesta proposta es va utilitzar com a base per a molts dels elements nous implantats pels navegadors (com ara el mètode per a inserir imatges en documents, que es va fer servir per primera vegada a NCSA Mosaic).

Més tard en aquell mateix any va aparèixer un esborrany d'HTML 3.0, però es va deixar de treballar en aquesta versió a causa de la manca de suport per part dels creadors de navegadors quant a la direcció que s'havia de seguir. HTML 3.2 va suprimir moltes de les funcions noves de la versió 3.0 i, en lloc d'aquestes, va adoptar moltes de les creacions dels navegadors més populars d'aleshores: Mosaic i Netscape Navigator.

L'any 1997, W3C va publicar l'HTML 4.0 com a recomanació que adoptava més extensions específiques de navegadors, però que també intentava racionalitzar i perfeccionar l'HTML. Això es va fer marcant diversos elements com a desaprovats (deprecated), la qual cosa significa que els elements són obsolets i que, tot i que encara apareixen en aquesta versió, s'eliminaran en una revisió posterior. Això es va fer per impulsar un ús millor i més semàntic de l'HTML en documents.

L'any 1999 es va publicar l'HTML 4.01, amb algunes errates corregides l'any 2001. L'any 2000, el W3C també va publicar l'especificació XHTML 1.0, que era l'HTML reestructurat per ser un document XML vàlid.

L'any 2004 el Web Hypertext Application Technology Working Group (WHATWG) va iniciar el treball per desenvolupar l'especificació d'HTML5. El gener de 2008 es va publicar el primer "esborrany de treball" d'HTML5, que posteriorment assoliria l'estatus de "candidate recommendation" el desembre de 2012. El document és mantingut pel HTML Working Group del W3C.

12.4. L'estructura d'un document HTML

El document HTML5 vàlid més petit possible seria alguna cosa similar a això:

<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="utf-8">
    <title>Pàgina d'exemple</title>
  </head>
  <body>
    <h1>Hola món</h1>
  </body>
</html>

El document comença amb un element de tipus de document o doctype. Aquest element descriu el tipus d'HTML que s'utilitza per tal que els agents d'usuari puguin determinar com cal interpretar el document i saber si segueix les normes que diu que seguirà.

Tot seguit es pot veure l'etiqueta d'obertura de l'element html. Aquest és un element que inclou tot el document. L'etiqueta html de tancament és l'última cosa que hi ha en qualsevol document HTML.

Dintre de l'element html hi ha l'element head. Aquest és un element que conté informació sobre el document (les metadades). Aquest element es descriu més detalladament en el següent apartat. A la capçalera hi ha l'element title, que defineix el títol "Pàgina d'exemple" de la barra del menú.

Després de l'element head hi ha l'element body, que és l'element que inclou el contingut real de la pàgina; en aquest cas només hi ha un element d'encapçalament de nivell u (h1), que conté el text "Hola món". I aquest és tot el nostre document.

Tal com es pot veure, sovint els elements contenen altres elements. El cos del document inclourà inevitablement molts altres elements. Les divisions de pàgina creen l'estructura general del document i contindran subdivisions. Aquestes contindran títols, paràgrafs, llistes, etc. Els paràgrafs poden contenir elements que creïn enllaços cap a altres documents, cites, èmfasi... A mesura que aneu avançant en aquesta sèrie anireu sabent més coses sobre aquests elements.

12.5. La sintaxi dels elements HTML

Tal com ja hem vist, un element bàsic en HTML consisteix en dos marcadors al principi i al final d'un bloc de text. Hi ha alguns elements que no envolten el text, i en la majoria dels casos els elements poden contenir subelements (com l'html que conté head i body a l'exemple anterior).

Els elements també poden tenir atributs, que poden modificar el comportament de l'element i introduir-hi un significat addicional.

<div id="masthead">
   <h1>Conceptes bàsics del 
      <abbr title="llenguatge de marcat d'hipertext">HTML</abbr>
   </h1>
</div>

En aquest exemple hi ha un element div (divisió de pàgina, una manera de partir els documents en blocs lògics) amb un atribut id afegit que té el valor de masthead. L'element div conté un element h1 (encapçalament de primer nivell o més important), que alhora conté text. Part d'aquest text està inclòs en un element abbr (que s'utilitza per a especificar l'expansió de les sigles), que té l'atribut title, el valor del qual està definit com a llenguatge de marcat d'hipertext.

Molts dels atributs d'HTML són comuns per a tots els elements, tot i que alguns són específics d'un o diversos elements concrets. Aquests tenen sempre la forma paraulaclau="valor". El valor ha d'aparèixer sempre entre cometes senzilles o dobles (en algunes circumstàncies es poden ometre les cometes, però això no és una pràctica recomanable pel que fa a la predictibilitat, la comprensió i la claredat; s'han de posar sempre els valors entre cometes).

La majoria dels atributs i els seus valors possibles estan definits per les especificacions HTML; no és possible crear atributs propis sense invalidar l'HTML, ja que això podria confondre els agents d'usuari i provocar problemes a l'hora d'interpretar correctament la pàgina web. Les úniques excepcions reals són els atributs id i class; els seus valors estan totalment sota el vostre control, ja que serveixen per a afegir significat i semàntica propis als vostres documents.

Un element que es troba dintre d'un altre element es coneix com un "fill" d'aquest element. Així, doncs, en l'exemple anterior, abbr és un fill de l'element h1, que alhora és un fill de div. I a la inversa, l'element div seria un "pare" de l'element h1. Aquest concepte de pare/fill és molt important, ja que és la base de CSS i es fa servir molt en JavaScript.

12.6. Elements de bloc i en línia

En l'HTML hi ha dues categories generals d'elements que corresponen a dos tipus de continguts i estructures que representen aquests elements: elements de bloc i elements en línia.

Alguns elements de bloc comuns inclouen els paràgrafs, les llistes, els títols i les taules.

Un element en línia no farà que aparegui una línia nova en el document; són els tipus d'elements que apareixen dins un paràgraf de text. Alguns elements en línia comuns inclouen els vincles d'hipertext, les paraules o frases destacades o les cites curtes.

12.7. Referències de caràcter

Un últim aspecte que cal mencionar d'un document HTML és la manera d'incloure-hi caràcters especials. En l'HTML, els caràcters <, > i & són especials. Aquests caràcters inicien i finalitzen parts del document HTML, i no representen els caràcters de "més petit que", "més gran que" i "et".

Un dels primers errors que pot cometre un autor de webs és fer servir un caràcter "et" en un document i llavors veure que hi apareix alguna cosa inesperada. Per exemple, si s'escriu la frase "Imperial units measure weight in stones&pounds" pot ser que en alguns navegadors es vegi "...stones£s".

Això passa perquè en l'HTML la cadena literal "&pound;" és en realitat una referència de caràcter. Una referència de caràcter és una manera d'incloure en un document un caràcter que és difícil o impossible d'escriure des d'un teclat, o en una codificació de document concreta.

El símbol "et" (&) introdueix la referència i el punt i coma (;) l'acaba. No obstant això, molts agents d'usuari poden ser molt condescendents a l'hora de perdonar errors en l'HTML, com per exemple el d'oblidar el punt i coma, i interpretaran "&pound" com una referència de caràcter. Les referències poden ser números (referències numèriques) o paraules abreujades (referències d'entitats).

Resum

En aquest apartat hem après els conceptes bàsics de l'HTML, d'on prové i algunes idees sobre l'estructura d'un document HTML. Tot seguit explicarem la secció <head> d'un document HTML més detalladament i després continuarem explicant el contingut de <body>.

Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada.

: :