Introducció

HTML (HyperText Markup Language) és el llenguatge de marcat utilitzat per crear i estructurar el contingut de les pàgines web. Cada vegada que visites un lloc web, el navegador descarrega un o diversos documents HTML i els interpreta per construir la pàgina que apareix a la pantalla.

Tot i que el resultat final sigui una pàgina amb colors, imatges, animacions o botons interactius, HTML únicament descriu quins elements formen part del document i quin és el seu significat. El disseny visual correspon a CSS, mentre que la interactivitat i el comportament dinàmic s’implementen mitjançant JavaScript.

HTML no és un llenguatge de programació. No serveix per crear algoritmes ni per executar lògica complexa. La seva funció és descriure el contingut i donar-li significat perquè el navegador, els cercadors i les tecnologies de suport puguin interpretar-lo correctament.

Aprendre HTML constitueix el primer pas per desenvolupar aplicacions web. Tots els altres llenguatges i tecnologies del desenvolupament web es recolzen sobre ell.

Coneixement previ

• Ús bàsic de fitxers i carpetes.
• Ús elemental d’un navegador web.

Referències

• MDN Web Docs - HTML
• WHATWG HTML Living Standard
• W3C - Markup Validation Service

Índex

1. Què és HTML?
   1.1. Origen d’HTML
   1.2. Llenguatge de marcat
   1.3. HTML al navegador
2. Els fitxers HTML
   2.1. Crear un fitxer HTML
3. Sintaxi bàsica
   3.1. Elements
   3.2. Etiquetes
   3.3. Atributs
   3.4. Elements buits
4. Estructura d’un document HTML
   4.1. La declaració DOCTYPE
   4.2. L’element html
   4.3. L’element head
   4.4. L’element body
5. Comentaris
6. Encapçalaments i paràgrafs
7. Format del text
8. Enllaços
   8.1. Enllaços absoluts
   8.2. Enllaços relatius
   8.3. Obrir un enllaç en una pestanya nova
   8.4. Enllaços a una adreça de correu electrònic
   8.5. Enllaços telefònics
   8.6. Enllaços a seccions
9. Imatges
10. Llistes
    10.1. Llistes no ordenades
    10.2. Llistes ordenades
    10.3. Llistes de descripció
    10.4. Llistes imbricades
11. Taules
    11.1. Estructura
    11.2. Capçalera, cos i peu
    11.3. Altres opcions
12. Formularis
    12.1. Etiquetes
    12.2. Controls
    12.3. Llistes desplegables
    12.4. Àrees de text
    12.5. Botons
    12.6. Agrupar controls
    12.7. Validació de dades
13. Contenidors
    13.1. Element div
    13.2. Element span
14. HTML semàntic
    14.1. Elements semàntics
15. Validació de documents
16. Entorns de desenvolupament per a HTML
17. Exercicis

1. Què és HTML

HTML (HyperText Markup Language) és un llenguatge de marcat utilitzat per definir l’estructura i el significat del contingut d’una pàgina web.

La seva funció consisteix a indicar què representa cada part d’un document. Per exemple, permet identificar un títol, un paràgraf, una imatge, una taula o un formulari. Posteriorment, el navegador interpreta aquesta informació i genera la representació visual que veu l’usuari.

HTML constitueix el nucli de qualsevol pàgina web. Sense ell, el navegador no disposaria d’informació suficient per organitzar correctament el contingut.

A diferència d’un llenguatge de programació, HTML no executa instruccions ni implementa algoritmes. Tampoc no permet realitzar operacions matemàtiques, utilitzar estructures condicionals o repetir instruccions mitjançant bucles. La seva finalitat és exclusivament descriure l’estructura del document.

Els documents HTML estan formats per elements, i cada element es representa mitjançant una o diverses etiquetes.

Per exemple:

<h1>Introducció a HTML</h1>

<p>HTML permet estructurar el contingut d'una pàgina web.</p>

En aquest exemple:

• L’element <h1> identifica un encapçalament de primer nivell.
• L’element <p> identifica un paràgraf.

El text contingut entre ambdues etiquetes serà interpretat pel navegador i mostrat a la pantalla.

Tot i que el navegador sol representar visualment cada element amb un format determinat, HTML no defineix el disseny de la pàgina, únicament descriu la seva estructura.

1.1. Origen d’HTML

HTML va ser desenvolupat per Tim Berners-Lee el 1991 mentre treballava al CERN (Organització Europea per a la Investigació Nuclear).

El seu objectiu era crear un sistema que permetés compartir documents científics mitjançant enllaços entre ells, donant origen a la World Wide Web (WWW).

La primera versió d’HTML era molt senzilla i disposava d’un nombre reduït d’etiquetes destinades principalment a estructurar documents de text mitjançant títols, paràgrafs, llistes i enllaços. A mesura que la Web va anar creixent, va sorgir la necessitat d’incorporar nous elements que permetessin crear pàgines cada vegada més completes i interactives.

Com a conseqüència, HTML ha evolucionat al llarg dels anys mitjançant diferents versions, cadascuna ampliant les capacitats del llenguatge.

Tot i que durant molts anys es va parlar d’HTML5 com la versió més recent del llenguatge, actualment l’especificació ja no evoluciona mitjançant versions numerades.

El desenvolupament d’HTML està definit per l’estàndard HTML Living Standard, mantingut per l’organització WHATWG (Web Hypertext Application Technology Working Group). Es tracta d’un estàndard viu que incorpora millores i noves funcionalitats de forma contínua, evitant la publicació de noves versions com passava anteriorment.

Per aquest motiu, en la documentació actual encara és freqüent trobar referències a HTML5, tot i que tècnicament el llenguatge continua evolucionant sota l’estàndard HTML Living Standard.

1.2. Llenguatge de marcat

Un llenguatge de marcat utilitza etiquetes per descriure el contingut d’un document.

Aquestes etiquetes no formen part del contingut visible, sinó que proporcionen informació sobre el significat de cada element.

Per exemple, en el fragment següent:

<p>HTML, CSS and JavaScript are the core technologies of web development.</p>
<br>
<p>This is another example of HTML.</p>

Les etiquetes <p> i <br> indiquen al navegador que el primer text correspon a un paràgraf i després hi ha un salt.

El navegador no interpreta aquestes etiquetes com a text que s’hagi de mostrar a l’usuari. En lloc d’això, les utilitza per construir l’estructura de la pàgina.

1.3. HTML al navegador

Quan un usuari accedeix a una pàgina web, el navegador sol·licita al servidor el document HTML corresponent.

Un cop rebut, comença un procés d’interpretació en què analitza totes les etiquetes presents al document per construir una representació interna coneguda com a DOM (Document Object Model).

A partir d’aquesta estructura, el navegador podrà aplicar posteriorment els estils definits mitjançant CSS i executar el codi JavaScript associat a la pàgina.

2. Els fitxers HTML

Els documents HTML són fitxers de text el contingut dels quals està format per etiquetes HTML. Aquests fitxers poden crear-se amb qualsevol editor de text, tot i que l’habitual és utilitzar un editor de codi, ja que proporciona eines que faciliten l’escriptura, l’organització i la validació del codi.

A diferència d’altres llenguatges de programació, HTML no requereix un procés de compilació ni la instal·lació d’eines específiques per executar-se. Un cop creat el fitxer, n’hi ha prou amb obrir-lo mitjançant un navegador web perquè aquest interpreti el seu contingut i mostri el resultat.

2.1. Crear un fitxer HTML

Comença creant una carpeta on emmagatzemar el projecte. Per exemple:

primer-html/

Dins d’aquesta carpeta crea un fitxer anomenat index.html

L’estructura inicial del projecte serà la següent:

primer-html/
└── index.html

L’extensió .html identifica els documents HTML. Quan un navegador detecta un fitxer amb aquesta extensió, sap que l’ha d’interpretar com una pàgina web.

Tot i que un document HTML pot rebre qualsevol nom, és habitual utilitzar index.html per a la pàgina principal d’un lloc web. Molts servidors web cerquen automàticament un fitxer amb aquest nom quan un usuari accedeix a un directori sense indicar un document concret.

Obre el fitxer index.html amb un editor de text i escriu el contingut següent:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>La meva primera pàgina web</title>
</head>
<body>
    <h1>Hola, món</h1>
    <p>Aquesta és la meva primera pàgina HTML.</p>
</body>
</html>

No cal comprendre encara el significat de cadascuna d’aquestes etiquetes; en els apartats següents s’explicaran detalladament.

Un cop desat el fitxer, ja és possible obrir-lo fent doble clic sobre ell. Si els fitxers HTML estan associats a un navegador, aquest s’obrirà automàticament mostrant el contingut del document.

També pots fer clic amb el botó dret sobre el fitxer i seleccionar l’opció Obre amb, triant el navegador que prefereixis.

En carregar-se el document, el navegador interpretarà el codi HTML i mostrarà una pàgina similar a la següent.

Si fas qualsevol modificació al fitxer HTML, caldrà desar els canvis i actualitzar la pàgina del navegador per visualitzar el nou resultat.

Durant el desenvolupament d’aplicacions web és habitual treballar amb l’editor de text i el navegador oberts simultàniament. D’aquesta manera és possible modificar el document, desar-lo i comprovar immediatament l’efecte dels canvis realitzats.

3. Sintaxi bàsica

Tot document HTML està format per elements. Cada element representa una part del contingut de la pàgina, com un títol, un paràgraf, una imatge o un enllaç.

Per definir aquests elements s’utilitzen etiquetes, que indiquen al navegador on comença i on acaba cadascun d’ells. A més, molts elements poden incorporar atributs, que permeten proporcionar informació addicional o modificar el seu comportament. Finalment, apareix el contingut que tindrà l’element.

Tot i que els termes element, etiqueta i atribut solen utilitzar-se com a sinònims, en realitat fan referència a conceptes diferents.

3.1. Elements

Un element HTML és la unitat bàsica que compon un document HTML.

Cada element representa un tipus de contingut concret dins la pàgina.

Per exemple, el fragment següent conté dos elements diferents:

<h1>Introducció a HTML</h1>

<p>HTML permet estructurar el contingut d'una pàgina web.</p>

• El primer element h1 representa un encapçalament de nivell 1.
• El segon element p representa un paràgraf.

Un element HTML sol estar format per tres parts:

• Una etiqueta d’obertura.
• El contingut.
• Una etiqueta de tancament.

Per exemple:

<p>Això és un paràgraf.</p>

En aquest element podem distingir les seves tres parts:

El conjunt d’aquestes tres parts constitueix l’element HTML.

Els elements HTML poden contenir text, altres elements HTML o tots dos alhora.

Per exemple:

<p>
    Aprèn <strong>HTML</strong> pas a pas.
</p>

En aquest cas, l’element <p> conté text i un altre element HTML (<strong>).

3.2. Etiquetes

Les etiquetes són les marques que delimiten un element HTML.

La majoria d’elements utilitzen dues etiquetes:

• Una etiqueta d’obertura.
• Una etiqueta de tancament.

L’etiqueta d’obertura <p> indica on comença l’element.

L’etiqueta de tancament </p> indica on acaba.

La diferència entre ambdues consisteix que l’etiqueta de tancament incorpora una barra inclinada (/) immediatament després del caràcter <.

<p>Contingut del paràgraf.</p>

Entre ambdues apareix el contingut de l’element.

És important respectar sempre l’ordre correcte d’obertura i tancament de les etiquetes.

Tot i que molts navegadors són capaços d’interpretar documents amb errors, una estructura incorrecta pot provocar resultats inesperats i dificultar el manteniment del codi.

També és important tancar les etiquetes respectant l’ordre en què van ser obertes.

L’exemple següent és incorrecte:

<p>
    <strong>Text important</p>
</strong>

La forma correcta seria:

<p>
    <strong>Text important</strong>
</p>

Pot resultar útil imaginar les etiquetes HTML com si fossin parèntesis. Cada obertura ha de tenir el seu corresponent tancament i ambdós han de respectar l’ordre en què apareixen.

3.3. Atributs

Els atributs proporcionen informació addicional sobre un element HTML.

S’escriuen sempre dins l’etiqueta d’obertura i permeten modificar el comportament de l’element o afegir informació complementària.

La seva sintaxi general és la següent: <element atribut="valor">

Per exemple:

<meta charset="UTF-8">

En aquest cas:

• <meta> representa metainformació dins l’element head.
• charset és un atribut.
• "UTF-8" és el valor de l’atribut, en aquest cas, la codificació de caràcters.

Els atributs estan formats per dues parts:

• El nom de l’atribut.
• El seu valor.

El valor se sol escriure entre cometes dobles.

<img src="logo.png" alt="Logotip">

En aquest exemple apareixen dos atributs:

Un mateix element pot contenir diversos atributs.

<input type="email" id="correu" name="correu">

Cada atribut proporciona una informació diferent al navegador.

No tots els elements admeten els mateixos atributs. Alguns són comuns a la majoria d’elements HTML, mentre que d’altres únicament poden utilitzar-se amb etiquetes concretes.

3.4. Elements buits

Tot i que la majoria d’elements HTML tenen una etiqueta d’obertura i una de tancament, n’hi ha alguns que no contenen contingut intern.

Aquests elements reben el nom d’elements buits.

Per exemple:

<img src="paisatge.jpg" alt="Paisatge de muntanya">

L’element <img> no conté cap contingut entre una etiqueta d’obertura i una de tancament, ja que tota la informació necessària s’especifica mitjançant atributs.

Altres exemples d’elements buits són:

<br>
<hr>
<meta charset="UTF-8">
<link rel="stylesheet" href="estils.css">
<input type="text">

Tots aquests elements representen informació o realitzen una funció específica, però no contenen text ni altres elements HTML al seu interior.

En versions antigues d’XHTML era habitual escriure aquests elements utilitzant una barra final.

<br />
<img src="foto.jpg" alt="Fotografia" />

En HTML5 aquesta barra final és opcional i normalment s’omet.

Per tant, la forma recomanada és:

<br>

<img src="foto.jpg" alt="Fotografia">

4. Estructura d’un document HTML

Tot i que una pàgina web pot contenir centenars o fins i tot milers de línies de codi, tots els documents HTML comparteixen una estructura bàsica. Aquesta estructura indica al navegador com està organitzat el document i quina informació conté.

Si observes el codi realitzat en l’apartat anterior, podràs veure que no totes les etiquetes tenen la mateixa importància; cadascuna exerceix una funció diferent. Algunes descriuen la configuració del document, mentre que d’altres contenen el contingut que finalment visualitzarà l’usuari.

L’estructura bàsica que ha de tenir un document HTML:

4.1. La declaració DOCTYPE

La primera línia d’un document HTML sol ser la declaració <!DOCTYPE html>.

Tot i que la seva sintaxi s’assembla a una etiqueta HTML, en realitat no és un element HTML, sinó una declaració que informa al navegador del tipus de document que interpretarà.

Actualment, aquesta declaració indica que el document utilitza HTML5, la versió actual del llenguatge.

En versions antigues d’HTML existien diferents declaracions DOCTYPE, molt més llargues i complexes, que feien referència a diferents variants del llenguatge. Des de l’arribada d’HTML5 totes van ser substituïdes per la declaració actual, molt més senzilla.

Si s’omet aquesta declaració, alguns navegadors poden interpretar la pàgina utilitzant un mode de compatibilitat destinat a versions antigues del llenguatge. Aquest comportament pot provocar diferències en la representació de la pàgina.

Per aquest motiu, tot document HTML modern ha de començar amb la declaració.

4.2. L’element html

L’element <html> és l’element arrel de qualsevol document HTML.

Tots els altres elements del document han de trobar-se al seu interior.

Podem imaginar l’element <html> com el contenidor principal de tota la pàgina.

Dins d’ell s’organitzen dos grans blocs:

• L’element <head>, que conté informació sobre el document.
• L’element <body>, que conté el contingut visible de la pàgina.

<html lang="ca">

    <head>
        ...
    </head>

    <body>
        ...
    </body>

</html>

Si s’observa l’etiqueta principal, apareix un concepte nou: els atributs. L’etiqueta html conté un atribut lang.

Aquest atribut indica l’idioma principal del document i en aquest cas, el seu valor ca representa català.

La seva utilització facilita el treball dels navegadors, els motors de cerca i les tecnologies d’assistència, com els lectors de pantalla.

Alguns exemples d’idiomes que es poden utilitzar:

Sempre que sigui possible, és recomanable indicar correctament l’idioma principal del document.

4.3. L’element head

L’element <head> conté informació sobre el document que no forma part del contingut visible de la pàgina.

La seva funció consisteix a proporcionar informació que utilitzaran el navegador, els motors de cerca i altres programes que processen el document.

Dins l’element <head> solen trobar-se elements com:

• El títol de la pàgina.
• La codificació de caràcters.
• Enllaços a fulls d’estil CSS.
• Fitxers JavaScript.
• Icones del lloc web (favicon).
• Metadades utilitzades per cercadors i xarxes socials.

Tot i que aquests elements no apareixen directament a la pàgina, són imprescindibles per al correcte funcionament del document.

Per exemple, l’element <title> defineix el text que apareix a la pestanya del navegador.

<title>La meva primera pàgina web</title>

Si modifiquem aquest contingut i tornem a carregar la pàgina, observarem que canvia el títol mostrat a la pestanya del navegador.

4.4. L’element body

L’element <body> conté tot el contingut que el navegador mostrarà a l’usuari.

Al seu interior se situen la majoria d’elements HTML que aprendràs a utilitzar més endavant.

Dins l’element <body> poden aparèixer nombrosos tipus de contingut, entre ells:

• Encapçalaments.
• Paràgrafs.
• Imatges.
• Enllaços.
• Llistes.
• Taules.
• Formularis.
• Contingut multimèdia (vídeos, sons, etc.).

Tot allò que l’usuari veu i amb què interactua en una pàgina web es troba, directament o indirectament, dins l’element <body>.

És important no confondre l’element <body> amb l’element <head>.

Mentre que <head> conté informació sobre el document, <body> conté el contingut de la pàgina.

5. Comentaris

Els comentaris permeten incloure anotacions dins el codi HTML sense que siguin interpretades pel navegador ni mostrades a l’usuari.

La seva principal finalitat és documentar el codi, facilitar-ne la comprensió i deixar informació útil per a altres desenvolupadors o per a un mateix quan es torni a revisar el document temps després.

La sintaxi d’un comentari HTML és la següent: <!-- Això és un comentari -->

Tot el contingut situat entre <!-- i --> serà ignorat pel navegador.

Per exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <title>Exemple</title>
</head>
<body>

    <!-- Títol principal de la pàgina -->
    <h1>Benvingut</h1>

    <!-- Primer paràgraf -->
    <p>Aquest és un document HTML.</p>

</body>
</html>

Els comentaris poden ocupar una sola línia o diverses línies.

Comentari d’una línia:

<!-- Comentari d'una línia -->

Comentari de diverses línies:

<!--
Aquest comentari ocupa
diverses línies.
Pot utilitzar-se per explicar
una part complexa del document.
-->

Els comentaris resulten especialment útils per:

• Descriure la finalitat d’una secció del document.
• Indicar tasques pendents.
• Explicar decisions de disseny.
• Desactivar temporalment part del codi durant les proves.

També és possible comentar temporalment un bloc de codi per evitar que el navegador el processi.

<!--
<h2>Notícies</h2>

<p>Contingut temporalment deshabilitat.</p>
-->

Aquesta tècnica pot resultar útil durant el desenvolupament, tot i que no s’ha d’utilitzar per ocultar informació sensible, ja que els comentaris continuen formant part del codi font de la pàgina i qualsevol usuari pot visualitzar-los.

6. Encapçalaments i paràgrafs

La major part del contingut d’una pàgina web està format per text. HTML proporciona diferents elements per organitzar-lo de manera lògica i facilitar-ne la comprensió tant als usuaris com als navegadors i motors de cerca.

Els dos elements fonamentals per estructurar text són els encapçalaments i els paràgrafs.

Els encapçalaments representen els títols i subtítols del document.

HTML disposa de sis nivells d’encapçalament, des de <h1> fins a <h6>.

<h1>Encapçalament de nivell 1</h1>
<h2>Encapçalament de nivell 2</h2>
<h3>Encapçalament de nivell 3</h3>
<h4>Encapçalament de nivell 4</h4>
<h5>Encapçalament de nivell 5</h5>
<h6>Encapçalament de nivell 6</h6>

Cada nivell representa una posició dins la jerarquia del document.

L’element <h1> correspon al títol principal de la pàgina.

Els elements <h2> representen els apartats principals.

Els elements <h3> desenvolupen un apartat de nivell superior, i així successivament.

Per exemple:

<h1>Introducció a HTML</h1>

<h2>Origen d'HTML</h2>

<p>...</p>

<h2>Estructura d'un document</h2>

<h3>L'element head</h3>

<p>...</p>

<h3>L'element body</h3>

<p>...</p>

Els encapçalaments s’han d’utilitzar per definir l’estructura lògica del contingut i no únicament per la seva aparença visual.

Un error freqüent consisteix a utilitzar un <h3> perquè “es veu més petit” o un <h1> perquè “es veu més gran”. La mida i l’aspecte del text s’han de modificar mitjançant CSS.

L’element <p> representa un paràgraf de text.

<p>HTML és un llenguatge de marcat utilitzat per estructurar documents web.</p>

Cada vegada que es crea un nou paràgraf s’ha d’utilitzar un nou element <p>.

<p>Primer paràgraf.</p>

<p>Segon paràgraf.</p>

<p>Tercer paràgraf.</p>

Tot i que al codi font existeixin diverses línies en blanc o múltiples espais consecutius, el navegador els interpreta com un únic espai.

Per exemple, el codi següent:

<p>
    HTML          permet

    estructurar            pàgines web.
</p>

es visualitzarà de la mateixa manera que:

<p>HTML permet estructurar pàgines web.</p>

Aquest comportament es deu al fet que HTML no utilitza els espais ni els salts de línia per organitzar visualment el contingut.

7. Format del text

A més d’organitzar el contingut mitjançant encapçalaments i paràgrafs, HTML proporciona diferents elements per indicar el significat de determinades parts del text.

És important comprendre que aquests elements descriuen el contingut des d’un punt de vista semàntic. Tot i que la majoria de navegadors els representin utilitzant negretes o cursives, la seva finalitat principal no és modificar l’aspecte visual del text.

El disseny definitiu d’una pàgina correspon a CSS.

L’element <strong> indica que un fragment del text té una importància especial.

<p>
És imprescindible desar el document abans d'actualitzar el navegador.
</p>

<p>
És <strong>imprescindible</strong> desar el document abans d'actualitzar el navegador.
</p>

Habitualment els navegadors representen aquest element en negreta.

L’element <em> representa un text que s’ha d’emfatitzar dins una frase.

<p>
HTML <em>no és</em> un llenguatge de programació.
</p>

Normalment es mostra en cursiva, tot i que el seu significat va més enllà de l’aparença visual.

L’element <mark> permet ressaltar una part del text.

<p>
L'examen inclourà preguntes sobre <mark>formularis HTML</mark>.
</p>

Generalment el navegador representa aquest element amb un fons groc.

L’element <small> s’utilitza per representar informació secundària, aclariments o notes legals.

<p>
Preu: 120 € <small>IVA inclòs.</small>
</p>

L’element <del> representa contingut que ha estat eliminat del document.

<p>
Preu anterior: <del>80 €</del>
</p>

L’element <ins> indica contingut afegit posteriorment.

<p>
Preu actual: <ins>65 €</ins>
</p>

HTML disposa d’elements específics per escriure fórmules matemàtiques, expressions químiques o referències.

Superíndex:

<p>x<sup>2</sup></p>

Resultat:

x²

Subíndex:

<p>H<sub>2</sub>O</p>

Resultat:

H₂O

L’element <br> insereix un salt de línia dins un mateix paràgraf.

<p>
Primera línia.<br>
Segona línia.<br>
Tercera línia.
</p>

S’ha d’utilitzar únicament quan el propi contingut requereixi un salt de línia, per exemple en adreces postals, poemes o lletres de cançons.

No s’ha d’emprar per separar paràgrafs.

L’element <hr> representa una separació temàtica entre dos blocs de contingut.

<h2>Capítol 1</h2>

<p>Contingut del primer capítol.</p>

<hr>

<h2>Capítol 2</h2>

<p>Contingut del segon capítol.</p>

Habitualment el navegador representa aquest element mitjançant una línia horitzontal.

8. Enllaços

Un dels elements més importants d’HTML és l’enllaç o hipervincle. Gràcies a ells és possible navegar entre diferents pàgines web, accedir a documents, descarregar fitxers o desplaçar-se a una secció concreta d’una mateixa pàgina.

Els enllaços són l’origen de la World Wide Web (WWW). De fet, el terme HyperText que forma part del nom d’HTML fa referència precisament a la possibilitat de connectar documents mitjançant enllaços.

En HTML els enllaços es creen mitjançant l’element <a>, també conegut com a àncora (anchor).

La sintaxi bàsica d’un enllaç és la següent:

<a href="https://www.fpcode.es">
    FPCode
</a>

El navegador mostrarà el text FPCode com un enllaç sobre el qual l’usuari podrà fer clic.

En aquest exemple podem identificar els elements següents:

L’atribut href (Hypertext Reference) és obligatori, ja que indica el recurs al qual s’accedirà quan l’usuari premi sobre l’enllaç.

8.1. Enllaços absoluts

Un enllaç absolut especifica l’adreça completa del recurs.

<a href="https://developer.mozilla.org/ca/docs/Web/HTML">
    Documentació d'HTML
</a>

L’adreça inclou el protocol (https://), el nom del domini i la ruta completa del recurs.

Els enllaços absoluts solen utilitzar-se per accedir a pàgines pertanyents a altres llocs web.

Altres exemples:

<a href="https://www.google.es">Google</a>

<a href="https://www.wikipedia.org">Viquipèdia</a>

8.2. Enllaços relatius

Quan el recurs pertany al mateix lloc web, normalment s’utilitzen rutes relatives.

Una ruta relativa indica la ubicació del recurs prenent com a referència el document actual.

Suposem l’estructura de carpetes següent:

meu-web/
│
├── index.html
├── contacte.html
├── quant-a.html
├── productes/
│   ├── portatils.html
│   └── impressores.html
└── imatges/
    └── logo.png

Des de index.html podríem accedir a contacte.html mitjançant:

<a href="contacte.html">
    Contacte
</a>

I accedir a la pàgina de portàtils mitjançant:

<a href="productes/portatils.html">
    Portàtils
</a>

Les rutes relatives permeten desplaçar-se entre diferents carpetes del projecte.

Com hem vist, des de index.html podem accedir a productes/portatils.html. No obstant això, si estem situats dins el fitxer productes/portatils.html i volem tornar a la pàgina principal, hem de pujar un nivell mitjançant ..

<a href="../index.html">
    Inici
</a>

Les rutes relatives presenten diversos avantatges:

• Faciliten traslladar el lloc web a un altre servidor.
• No depenen del nom del domini.
• Simplifiquen el manteniment del projecte.

Per aquest motiu són les més utilitzades per enllaçar pàgines internes.

8.3. Obrir un enllaç en una pestanya nova

Per defecte, en fer clic sobre un enllaç el navegador substitueix la pàgina actual per la nova.

Si es vol obrir l’enllaç en una pestanya nova s’ha d’utilitzar l’atribut target.

<a href="https://www.fpcode.es" target="_blank">
    FPCode
</a>

El valor _blank indica al navegador que el recurs s’ha d’obrir en una pestanya o finestra nova, depenent de la configuració del navegador.

Quan s’utilitza target="_blank" és recomanable afegir també l’atribut rel.

<a
    href="https://www.fpcode.es"
    target="_blank"
    rel="noopener noreferrer">
    FPCode
</a>

Aquest atribut millora la seguretat i evita que la nova pàgina pugui accedir a determinades dades de la pàgina d’origen.

8.4. Enllaços a una adreça de correu electrònic

El protocol mailto: permet obrir automàticament el client de correu predeterminat de l’usuari.

<a href="mailto:fpcode.edu@gmail.com">
    Contactar
</a>

En prémer sobre l’enllaç s’obrirà l’aplicació de correu electrònic preparada per redactar un nou missatge dirigit a l’adreça indicada.

També és possible especificar l’assumpte del missatge.

<a href="mailto:fpcode.edu@gmail.com?subject=Consulta">
    Enviar consulta
</a>

8.5. Enllaços telefònics

En dispositius mòbils és habitual utilitzar enllaços que permetin realitzar una trucada telefònica.

Per això s’empra el protocol tel:.

<a href="tel:+34900111222">
    Trucar al 900 111 222
</a>

En un telèfon mòbil, en prémer sobre l’enllaç s’obrirà l’aplicació de trucades amb el número preparat per marcar.

8.6. Enllaços a seccions

Quan un document és molt extens pot resultar útil crear enllaços que permetin desplaçar-se directament a una secció concreta.

Per això s’utilitza l’atribut id.

<h2 id="formularis">
    Formularis
</h2>

Posteriorment pot crear-se un enllaç cap a aquest element.

<a href="#formularis">
    Anar a l'apartat de formularis
</a>

El caràcter # indica que el destí es troba dins el mateix document.

Aquest tipus d’enllaços resulta especialment útil per crear índexs, taules de contingut o botons que permetin tornar al principi de la pàgina.

9. Imatges

Les imatges són un dels recursos més utilitzats en el desenvolupament web. Permeten complementar el contingut textual, il·lustrar conceptes, mostrar fotografies, diagrames, logotips o qualsevol altre recurs gràfic que faciliti la comprensió de la informació.

En HTML les imatges s’insereixen mitjançant l’element <img>. A diferència d’altres elements, les imatges no formen part del document com a text, sinó que el navegador les carrega des d’un fitxer extern i les mostra a la posició indicada dins la pàgina.

La seva sintaxi bàsica és la següent:

<img src="imatges/logo.png" alt="Logotip de FPCode">

Aquest element no conté contingut entre una etiqueta d’obertura i una de tancament, per la qual cosa pertany al grup dels elements buits.

Perquè el navegador pugui mostrar la imatge és necessari indicar, almenys, dos atributs:

• L’atribut src (source) indica la ubicació del fitxer d’imatge que ha de carregar el navegador. El valor de l’atribut pot ser una ruta relativa o una ruta absoluta.
• L’atribut alt (alternative text) proporciona una descripció textual de la imatge.

Aquest últim atribut és molt important; tot i que és opcional, sempre s’hauria d’incloure. Les seves funcions són les següents:

• Descriu la imatge quan no pot carregar-se.
• És utilitzat pels lectors de pantalla per a persones amb discapacitat visual.
• Facilita la comprensió del contingut per part dels motors de cerca.

És possible indicar la mida amb la qual es mostrarà una imatge mitjançant els atributs width i height.

<img
    src="imatges/logo.png"
    alt="Logotip de FPCode"
    width="250"
    height="120">

Els valors s’expressen en píxels.

Quan únicament s’especifica un d’ells, el navegador calcula automàticament l’altre per mantenir les proporcions originals de la imatge.

Tot i que HTML permet definir la mida d’una imatge, actualment aquesta tasca sol realitzar-se mitjançant CSS, ja que ofereix un major control sobre la presentació del contingut.

Els navegadors són capaços de visualitzar diferents formats d’imatge. Cadascun presenta característiques diferents i resulta més adequat per a determinats usos.

Actualment WebP i AVIF ofereixen una millor relació entre qualitat i mida de fitxer, tot i que JPEG i PNG continuen utilitzant-se àmpliament.

10. Llistes

Les llistes permeten agrupar informació relacionada de forma ordenada i estructurada. Són un dels elements més utilitzats en HTML i apareixen amb freqüència en menús de navegació, índexs, enumeracions, passos d’un procediment o relacions d’elements.

HTML proporciona diferents tipus de llistes per adaptar-se a les diferents necessitats. Triar el tipus adequat ajuda a representar correctament el significat de la informació i facilita la seva comprensió tant per part dels usuaris com dels navegadors i tecnologies d’assistència.

Els tres tipus de llistes que ofereix HTML són:

• Llistes no ordenades, quan l’ordre dels elements no és important.
• Llistes ordenades, quan existeix una seqüència o un ordre determinat.
• Llistes de descripció, utilitzades per representar termes i les seves definicions.

10.1. Llistes no ordenades

Les llistes no ordenades es creen mitjançant l’element <ul> (Unordered List).

Cada element de la llista es representa mitjançant un element <li> (List Item).

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

El navegador mostrarà una llista en la qual cada element apareix precedit per un marcador o vinyeta.

En aquest exemple:

• <ul> representa la llista completa.
• <li> representa cadascun dels elements de la llista.

Les llistes no ordenades s’utilitzen quan l’ordre dels elements no altera el significat de la informació.

10.2. Llistes ordenades

Les llistes ordenades es creen mitjançant l’element <ol> (Ordered List).

Igual que les llistes no ordenades, cada element es representa mitjançant un element <li>.

<ol>
    <li>Crear el fitxer HTML.</li>
    <li>Escriure el contingut.</li>
    <li>Desar el document.</li>
    <li>Obrir la pàgina al navegador.</li>
</ol>

El navegador numera automàticament cada element de la llista.

Les llistes ordenades són apropiades quan l’ordre dels elements resulta important.

Per defecte, les llistes ordenades utilitzen números.

No obstant això, mitjançant l’atribut type és possible emprar altres sistemes de numeració.

<ol type="A">
    <li>Primer</li>
    <li>Segon</li>
    <li>Tercer</li>
</ol>

Els valors més habituals són els següents:

També és possible indicar el número inicial de la llista mitjançant l’atribut start.

<ol start="5">
    <li>Cinquè element</li>
    <li>Sisè element</li>
    <li>Setè element</li>
</ol>

El navegador començarà la numeració a partir del valor indicat.

10.3. Llistes de descripció

Les llistes de descripció permeten representar una relació entre un terme i la seva descripció.

Es construeixen mitjançant tres elements:

• <dl> (Description List), que representa la llista.
• <dt> (Description Term), que representa el terme.
• <dd> (Description Details), que representa la descripció del terme.

Per exemple:

<dl>
    <dt>HTML</dt>
    <dd>Llenguatge de marcat utilitzat per estructurar pàgines web.</dd>

    <dt>CSS</dt>
    <dd>Llenguatge utilitzat per definir la presentació visual d'una pàgina web.</dd>

    <dt>JavaScript</dt>
    <dd>Llenguatge de programació que permet afegir interactivitat a les pàgines web.</dd>
</dl>

Aquest tipus de llista resulta especialment útil per crear glossaris, diccionaris de termes, preguntes freqüents o documentació tècnica.

10.4. Llistes imbricades

Un element d’una llista pot contenir una altra llista al seu interior.

Aquest tipus d’estructura rep el nom de llista imbricada.

Per exemple:

<ul>
    <li>
        Desenvolupament Web
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        Bases de Dades
        <ul>
            <li>MySQL</li>
            <li>PostgreSQL</li>
            <li>MongoDB</li>
        </ul>
    </li>
</ul>

Les llistes imbricades permeten representar relacions jeràrquiques entre diferents elements.

11. Taules

Les taules permeten organitzar informació en forma de files i columnes, facilitant la representació de dades relacionades entre si.

Són útils per mostrar informació en format tabular, com estadístiques, inventaris, etc.

11.1. Estructura

Una taula HTML es construeix utilitzant diferents elements, cadascun amb una funció específica.

<table>
    <tr>
        <th>Llenguatge</th>
        <th>Funció</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Estructurar pàgines web.</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Definir la presentació visual.</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>Afegir interactivitat.</td>
    </tr>
</table>

El navegador mostrarà una taula formada per tres columnes i diverses files.

Els elements utilitzats són:

L’estructura d’una taula pot entendre’s com una successió de files, on cada fila conté una o diverses cel·les.

11.2. Capçalera, cos i peu

Quan una taula conté una gran quantitat d’informació, resulta recomanable dividir-la en diferents seccions.

HTML proporciona tres elements per a això:

• <thead>, que representa la capçalera.
• <tbody>, que conté les dades principals.
• <tfoot>, que representa el peu de la taula.

Per exemple:

<table>

    <thead>
        <tr>
            <th>Producte</th>
            <th>Preu</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Monitor</td>
            <td>189 €</td>
        </tr>

        <tr>
            <td>Teclat</td>
            <td>45 €</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total</td>
            <td>234 €</td>
        </tr>
    </tfoot>

</table>

Tot i que una taula pot funcionar correctament sense aquests elements, la seva utilització millora l’organització del document i facilita el treball dels navegadors, tecnologies d’assistència i fulls d’estil.

11.3. Altres opcions

L’element <caption> permet afegir un títol descriptiu a una taula.

S’ha de situar immediatament després de l’etiqueta <table>.

<table>

    <caption>
        Qualificacions de l'alumnat
    </caption>

    <tr>
        <th>Alumne</th>
        <th>Nota</th>
    </tr>

    <tr>
        <td>Anna</td>
        <td>9</td>
    </tr>

</table>

El títol ajuda a comprendre el contingut de la taula abans de llegir les seves dades.

La seva utilització resulta útil quan una pàgina conté diverses taules.

De vegades una cel·la ha d’ocupar diverses columnes. Per a això s’utilitza l’atribut colspan. Si al contrari, es vol que una cel·la ocupi diverses files s’usarà l’atribut rowspan.

Per exemple:

<table>

    <tr>
        <th colspan="3">
            Horari de classe
        </th>
    </tr>

    <tr>
        <th>Hora</th>
        <th>Dilluns</th>
        <th>Dimarts</th>
        <th>Dimecres</th>
    </tr>

    <tr>
        <td>08:00</td>
        <td>Programació</td>
        <td rowspan="2">Bases de Dades</td>
        <td>Entorns de desenvolupament</td>
    </tr>

</table>

En aquest exemple, la primera cel·la ocupa l’espai corresponent a tres columnes. I a l’assignatura Bases de Dades ocuparà dues files per representar que el seu horari és a les 08 i a les 09.

El valor de l’atribut indica el nombre de columnes o files que abastarà la cel·la.

Les taules s’han d’estructurar de manera que tant els usuaris com les tecnologies d’assistència puguin interpretar correctament la informació.

Per a això s’utilitzen els elements <th> per identificar les capçaleres i l’atribut scope, que indica si una capçalera fa referència a una columna o a una fila.

Capçalera de columna:

<th scope="col">Nom</th>

Capçalera de fila:

<th scope="row">HTML</th>

L’atribut scope millora la navegació mitjançant lectors de pantalla, permetent associar correctament cada dada amb la seva capçalera corresponent. A efectes de visualització, el contingut es mostrarà en negreta.

<table>

    <caption>
        Horari setmanal
    </caption>

    <thead>
        <tr>
            <th scope="col">Hora</th>
            <th scope="col">Dilluns</th>
            <th scope="col">Dimarts</th>
            <th scope="col">Dimecres</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <th scope="row">08:00</th>
            <td>Programació</td>
            <td>Bases de Dades</td>
            <td>Sistemes</td>
        </tr>

        <tr>
            <th scope="row">10:00</th>
            <td>Llenguatges de Marques</td>
            <td>Programació</td>
            <td>Itinerari Personal</td>
        </tr>

    </tbody>

</table>

12. Formularis

Els formularis permeten recollir informació introduïda per l’usuari per enviar-la posteriorment a una aplicació web. Són un dels elements més utilitzats a Internet i apareixen en pàgines d’inici de sessió, formularis de contacte, cercadors, processos de compra o registres d’usuaris.

Un formulari està format per diferents controls, com caixes de text, llistes desplegables, botons o caselles de verificació, que permeten a l’usuari introduir o seleccionar informació.

Tot formulari es defineix mitjançant l’element <form>.

<form>
    ...
</form>

Aquest element actua com a contenidor de tots els controls que formen part del formulari.

Habitualment incorpora dos atributs:

• action, que indica l’adreça a la qual s’enviaran les dades.
• method, que especifica el mètode d’enviament.

<form action="/registre" method="post">

</form>

En aquest tutorial no s’estudiarà el funcionament de l’enviament de dades del formulari al servidor.

12.1. Etiquetes

Cada control d’un formulari hauria de disposar d’una etiqueta descriptiva creada mitjançant l’element <label>.

<label for="nom">
    Nom
</label>

<input id="nom" type="text">

L’atribut for de l’element <label> ha de contenir el mateix valor que l’atribut id del control al qual fa referència.

Aquesta associació permet que l’usuari pugui seleccionar el camp fent clic sobre el propi text de l’etiqueta i millora l’accessibilitat del formulari.

12.2. Controls

L’element <input> representa un dels controls més versàtils d’HTML. El seu comportament depèn del valor de l’atribut type.

La seva sintaxi és: <input id="" name="" type="">

Els atributs que apareixen tenen la funció següent:

• id Identifica de forma única el control dins el document HTML. S’utilitza, entre altres coses, per associar-lo amb un element <label> mitjançant l’atribut for.
• name És el nom amb el qual el control s’identifica dins el formulari. Quan el formulari s’envia al servidor, les dades es transmeten utilitzant aquest nom.
• type Indica el tipus de control que ha de crear el navegador, com un camp de text, una contrasenya, una casella de verificació o un botó d’opció.

Com s’ha indicat al principi, aquest control pot adoptar diferents comportaments segons el valor de type.

<form>
    <label for="nom">Nom</label>
    <input id="nom" name="nom" type="text">
    <br><br>

    <label for="correu">Correu electrònic</label>
    <input id="correu" name="correu" type="email">
    <br><br>

    <label for="password">Contrasenya</label>
    <input id="password" name="password" type="password">
    <br><br>

    <label for="edat">Edat</label>
    <input id="edat" name="edat" type="number">
    <br><br>

    <label for="dataNaixement">Data de naixement</label>
    <input id="dataNaixement" name="dataNaixement" type="date">
    <br><br>

    <p>Llenguatges que coneixes:</p>
    <input id="html" name="html" type="checkbox">
    <label for="html">HTML</label>
    <br>
    <input id="css" name="css" type="checkbox">
    <label for="css">CSS</label>
    <br>
    <input id="javascript" name="javascript" type="checkbox">
    <label for="javascript">JavaScript</label>
    <br><br>

    <p>Torn preferit:</p>
    <input id="mati" name="torn" type="radio">
    <label for="mati">Matí</label>
    <br>
    <input id="tarda" name="torn" type="radio">
    <label for="tarda">Tarda</label>
    <br>
    <input id="nit" name="torn" type="radio">
    <label for="nit">Nit</label>

</form>

L’últim control que es mostra, els botons d’opció permeten seleccionar una única alternativa entre diverses. A l’exemple es pot apreciar que els botons pertanyen al mateix grup "torn" d’aquesta manera només es podrà seleccionar una única opció.

12.3. Llistes desplegables

Les llistes desplegables permeten seleccionar un valor entre un conjunt d’opcions. Es creen mitjançant els elements <select> i <option>.

<select>

    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>

</select>

Cada element <option> representa una opció disponible dins la llista.

També és possible agrupar diverses opcions relacionades mitjançant l’element <optgroup>.

<select>

    <optgroup label="Desenvolupament Web">
        <option>HTML</option>
        <option>CSS</option>
    </optgroup>

    <optgroup label="Bases de Dades">
        <option>MySQL</option>
        <option>PostgreSQL</option>
    </optgroup>

</select>

12.4. Àrees de text

Quan l’usuari ha d’escriure un text de diverses línies s’utilitza l’element <textarea>.

<label for="missatge">
    Missatge
</label>

<textarea id="missatge"></textarea>

Aquest element sol emprar-se en formularis de contacte, comentaris o descripcions.

12.5. Botons

Els botons permeten realitzar accions dins el formulari. L’element utilitzat és <button>.

<button>
    Enviar
</button>

També és possible indicar el tipus de botó mitjançant l’atribut type.

<button type="submit">
    Enviar
</button>

<button type="reset">
    Restablir
</button>

• submit envia el formulari.
• reset restaura els valors inicials del formulari.

12.6. Agrupar controls

Quan un formulari conté diversos grups d’informació relacionats resulta recomanable organitzar-los mitjançant els elements <fieldset> i <legend>. La seva utilització millora l’organització del formulari i facilita la seva comprensió per part dels usuaris.

<fieldset>

    <legend>Dades personals</legend>

    <label for="nom">
        Nom
    </label>

    <input id="nom" type="text">

    <label for="correu">
        Correu electrònic
    </label>

    <input id="correu" type="email">

</fieldset>

L’element <fieldset> agrupa diversos controls relacionats, mentre que <legend> proporciona un títol descriptiu per a aquest grup.

12.7. Validació de dades

HTML incorpora mecanismes de validació que permeten comprovar si la informació introduïda per l’usuari compleix determinats requisits abans d’enviar el formulari.

Aquesta validació la realitza automàticament el navegador.

A més d’aquests atributs, alguns tipus de controls realitzen automàticament una validació bàsica del format introduït. Per exemple:

• un camp de tipus email comprova que el text tingui el format d’una adreça de correu electrònic.
• un camp de tipus number únicament admet valors numèrics.

13. Contenidors

Com hem vist fins ara, el cos d’un document HTML pot contenir nombrosos elements, com encapçalaments, paràgrafs, llistes, taules o imatges.

De vegades resulta necessari agrupar diversos d’aquests elements sense que existeixi un element semàntic que descrigui adequadament aquesta part del document. Per a aquestes situacions HTML proporciona els elements <div> i <span>.

13.1. Element div

L’element <div> és un contenidor genèric de bloc que permet agrupar altres elements HTML per tractar-los com una única unitat.

Per exemple, pot utilitzar-se per reunir el contingut d’una notícia, una fitxa d’un producte o un bloc d’informació i així disposar de diferents seccions dins una mateixa pàgina.

<div>
    <h1>Llistat de cursos</h1>
    <div>
        <h2>Curs d'HTML</h2>
        <p>Aprèn a crear l'estructura d'una pàgina web utilitzant HTML.</p>
    </div>
    <div>
        <h2>Curs de JavaScript</h2>
        <p>Aprèn conceptes bàsics de JavaScript i HTML.</p>
    </div>
</div>

En aquest exemple existeix un element <div> principal que agrupa el títol de la pàgina i dos contenidors addicionals, cadascun amb la informació d’un curs.

Per si mateix, l’element <div> no aporta cap significat al contingut ni produeix una aparença visual específica. La seva funció consisteix únicament a organitzar i agrupar altres elements del document.

13.2. Element span

L’element <span> és un contenidor genèric en línia. S’utilitza per agrupar una petita part del contingut d’un document sense modificar-ne el significat.

A diferència de <div>, que sol agrupar blocs complets de contingut, <span> s’empra normalment dins paràgrafs o altres elements per agrupar paraules o fragments de text.

<p>
    El llenguatge <span>HTML</span> és la base de les pàgines web.
</p>

Sempre que existeixi un element semàntic adequat (com els que es veuran al punt HTML semàntic) cal utilitzar-los.

No obstant això, no totes les agrupacions d’elements representen una part concreta de la pàgina. En moltes ocasions simplement es desitja agrupar diversos elements relacionats per formar una unitat d’informació o una secció personalitzada. En aquests casos resulta apropiat utilitzar un element <div>.

Sempre que sigui possible, s’ha d’utilitzar un element semàntic que es veurà al punt següent.

No obstant això, no totes les agrupacions d’elements representen una part concreta de la pàgina, sinó una unitat d’informació, apartat o secció personalitzada.

Els contenidors solen utilitzar-se juntament amb els atributs id i class, que permeten identificar un o diversos contenidors dins el document.

Els atributs id i class s’estudiaran amb més profunditat als tutorials dedicats a CSS i JavaScript, on s’utilitzen per aplicar estils o seleccionar elements del document.

14. HTML semàntic

Durant els primers anys de la Web era habitual construir les pàgines utilitzant gairebé exclusivament elements com <div> i <span>. Tot i que aquesta forma de treballar permetia organitzar el contingut, el codi resultava poc descriptiu, ja que tots aquests elements tenien el mateix significat per al navegador.

HTML incorpora un conjunt d’elements semàntics la finalitat dels quals és descriure el paper que exerceix cada part del document.

Es diu que un document utilitza HTML semàntic quan empra els elements més adequats per representar cada part del seu contingut.

Per exemple, si una zona conté el menú principal de navegació, resulta més apropiat utilitzar l’element <nav> que un simple <div>.

De la mateixa manera, si una part del document representa el contingut principal de la pàgina, s’ha d’utilitzar <main>.

Observa la diferència entre ambdós exemples.

Sense semàntica:

<div>
    <div>Capçalera</div>
    <div>Menú</div>
    <div>Contingut</div>
    <div>Peu de pàgina</div>
</div>

Amb HTML semàntic:

<header> </header>
<nav> </nav>
<main> </main>
<footer> </footer>

Tot i que ambdós documents poden mostrar exactament el mateix resultat visual, el segon proporciona molta més informació sobre l’estructura de la pàgina.

14.1. Elements semàntics

HTML disposa de nombrosos elements semàntics. Els més utilitzats són els següents:

A la següent imatge pots veure com s’estructuren aquests elements.

Aquest element representa la capçalera d’una pàgina o d’una secció.

Normalment conté elements com:

• El logotip del lloc web.
• El títol principal.
• Una breu descripció.
• El menú de navegació.

Per exemple:

<header>
    <h1>FPCode</h1>
    <p>Portal educatiu d'informàtica.</p>
</header>

No s’ha de confondre amb l’encapçalament <h1>. Mentre que <header> representa una zona del document, <h1> representa un títol.

L’element <nav> conté els enllaços principals de navegació de la pàgina. Ve a ser el menú navegable de la pàgina.

<nav>
    <a href="index.html">Inici</a>
    <a href="tutorials.html">Tutorials</a>
    <a href="contacte.html">Contacte</a>
</nav>

No tots els grups d’enllaços s’han de situar dins un <nav>. Aquest element està pensat per als menús principals o per a conjunts d’enllaços que permetin navegar pel lloc web.

L’element <main> representa el contingut principal de la pàgina. Dins d’ell ha de trobar-se la informació que identifica el propòsit del document.

<main>
    <h1>Introducció a HTML</h1>
    <p>HTML és el llenguatge utilitzat per estructurar pàgines web.</p>
</main>

Cada document HTML hauria de contenir un únic element <main>.

L’element <section> representa una secció temàtica dins el document. Habitualment agrupa continguts relacionats sota un mateix encapçalament.

<section>
    <h2>Què és HTML?</h2>
    <p>HTML permet estructurar el contingut d'una pàgina web.</p>
</section>

Una pàgina sol contenir diverses seccions, cadascuna dedicada a un tema diferent.

L’element <article> representa un contingut independent que pot entendre’s per si mateix.

Alguns exemples:

• Una notícia.
• Una entrada d’un blog.
• Un comentari.
• Una publicació d’un fòrum.

<article>
    <h2>Nou tutorial disponible</h2>
    <p>Ja està disponible el curs d'HTML per a estudiants de FP.</p>
</article>

Si aquest contingut es copiés a una altra pàgina mantindria el seu significat de forma independent.

L’element <aside> conté informació complementària relacionada amb el contingut principal.

Per exemple:

• Enllaços relacionats.
• Informació addicional.
• Curiositats.
• Publicitat.
• Recursos de suport.

<aside>
    <h3>També et pot interessar</h3>
    <ul>
        <li>Introducció a CSS</li>
        <li>Primers passos amb JavaScript</li>
    </ul>
</aside>

El contingut de <aside> no forma part de la informació principal del document, tot i que està relacionat amb ella.

L’element <footer> representa el peu d’una pàgina o d’una secció.

Solen incloure informació com:

• Dades de contacte.
• Informació sobre drets d’autor.
• Enllaços legals.
• Data de publicació.

<footer>
    <p>© 2026 FPCode</p>
</footer>

Igual que ocorre amb <header>, un document pot contenir diversos elements <footer>, per exemple, un per a tota la pàgina i d’altres dins de diferents articles.

L’exemple següent mostra una estructura senzilla utilitzant els principals elements semàntics d’HTML.

<body>
    <header>
        <h1>Technology Daily</h1>
        <p>News about computer science and software development.</p>
    </header>

    <nav>
        <a href="home.html">Home</a>
        <a href="news.html">News</a>
        <a href="contact.html">Contact</a>
    </nav>

    <main>
        <article>
            <h2>HTML is over 30 years old</h2>
            <p>Since its creation in 1991, HTML has evolved into the standard language used to structure the content of web pages.</p>
        </article>

        <section>
            <h2>Related Articles</h2>
            <ul>
                <li>History of the Internet</li>
                <li>What is CSS?</li>
                <li>Getting Started with JavaScript</li>
            </ul>
        </section>

        <aside>
            <h3>Featured News</h3>
            <ul>
                <li>New version of a web browser.</li>
                <li>Trends in web development.</li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2026 Technology Daily</p>
    </footer>
</body>

15. Validació de documents

A mesura que una pàgina web creix, és habitual cometre petits errors en escriure el codi HTML. Alguns d’aquests errors poden impedir que una pàgina funcioni correctament, mentre que d’altres poden passar desapercebuts, tot i que facin que el document no compleixi amb els estàndards del llenguatge.

Per detectar aquest tipus de problemes existeixen els validadors HTML, eines que analitzen el codi i comproven si s’ajusta a les especificacions de l’estàndard HTML.

Validar un document no garanteix que una pàgina web sigui correcta des del punt de vista del disseny o la funcionalitat, però sí que ajuda a detectar errors de sintaxi, etiquetes mal utilitzades o atributs incorrectes.

L’eina de validació més utilitzada és W3C Markup Validation Service, un servei gratuït que permet comprovar si un document HTML compleix les recomanacions de l’estàndard. S’hi pot accedir mitjançant l’enllaç següent: 👉 https://validator.w3.org/

Aquest servei inclou diferents formes per validar:

• A partir d’una adreça web.
• Carregant un fitxer HTML.
• Escrivint el codi directament.

Molts editors de codi, com Visual Studio Code, també incorporen extensions que detecten alguns errors HTML mentre s’escriu el document. No obstant això, aquestes eines no substitueixen un validador oficial, ja que únicament realitzen comprovacions bàsiques.

16. Entorns de desenvolupament per a HTML

Per crear documents HTML n’hi ha prou amb utilitzar un editor de text. No obstant això, existeixen editors de codi especialitzats que incorporen eines per facilitar el desenvolupament i que ofereixen compatibilitat amb HTML i molts altres llenguatges de programació.

Alguns dels més utilitzats són Visual Studio Code, Sublime Text, Notepad++, Brackets o els entorns professionals de JetBrains, com WebStorm.

1. Visual Studio Code 👉 https://code.visualstudio.com/download 👈

És un dels editors de codi més utilitzats actualment. Va ser desenvolupat per Microsoft i destaca per ser gratuït, multiplataforma i compatible amb un gran nombre de llenguatges de programació.

Entre les seves principals característiques destaquen:

• Ressaltat de sintaxi.
• Autocompletat de codi.
• Detecció d’errors.
• Compatibilitat amb múltiples llenguatges de programació.
• Gran quantitat d’extensions.
• Terminal integrada.
• Navegador web integrat mitjançant extensions com Live Preview o Live Server.

2. WebStorm 👉 https://www.jetbrains.com/webstorm/download 👈

És un entorn de desenvolupament professional desenvolupat per JetBrains i especialitzat en tecnologies web. Incorpora nombroses eines per treballar amb HTML, CSS, JavaScript i altres frameworks moderns.

A diferència de Visual Studio Code, WebStorm és un producte comercial, tot i que disposa de versions d’avaluació i llicències gratuïtes per a estudiants i centres educatius.

3. Notepad++ 👉 https://notepad-plus-plus.org/downloads/ 👈

És un editor de text lleuger i ràpid per a Windows. Tot i que disposa de menys funcionalitats que Visual Studio Code o WebStorm, continua sent una opció molt utilitzada per editar fitxers HTML i altres llenguatges de programació.

A més dels editors de codi, els navegadors web incorporen una eina molt útil per al desenvolupament denominada DevTools (Eines per a desenvolupadors).

DevTools permet analitzar i depurar una pàgina web directament des del navegador sense necessitat de modificar els fitxers originals.

Entre les seves principals funcionalitats es troben:

• Inspeccionar l’estructura HTML d’una pàgina.
• Visualitzar els estils CSS aplicats a cada element.
• Provar canvis al codi de forma temporal.
• Analitzar les peticions realitzades per la pàgina.
• Detectar errors de JavaScript.
• Simular diferents mides de pantalla i dispositius.

Pots conèixer aquesta eina amb més detall al tutorial: 👉 DevTools

17. Exercicis

Exercici 6: Biblioteca Municipal

A continuació es mostra l’aspecte d’una pàgina web. El teu objectiu és reproduir-la utilitzant HTML.

El document ha d’utilitzar els elements més adequats per representar l’estructura del contingut. Presta especial atenció a l’ús d’encapçalaments, llistes, taules i elements semàntics.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centre cultural</title>
</head>

<body>

    <header>
        <h1>Centre cultural</h1>
        <p>Activitats i cursos per a tota la ciutadania.</p>
    </header>

    <nav>
        <a href="index.html">Inici</a>
        <a href="cursos.html">Cursos</a>
        <a href="contacte.html">Contacte</a>
    </nav>

    <main>

        <section>
            <h2>Properes activitats</h2>

            <article>
                <h3>Taller de programació</h3>
                <p>Aprèn els fonaments d'HTML i CSS.</p>
            </article>

            <article>
                <h3>Curs de fotografia</h3>
                <p>Introducció a la fotografia digital.</p>
            </article>
        </section>

        <section>
            <h2>Horari d'atenció</h2>

            <table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horari</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Dilluns a divendres</td>
                        <td>09:00 - 20:00</td>
                    </tr>

                    <tr>
                        <td>Dissabte</td>
                        <td>10:00 - 14:00</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section>
            <h2>Formulari d'inscripció</h2>

            <form action="#" method="post">

                <p>
                    <label for="nom">Nom</label>
                    <input id="nom" name="nom" type="text" required>
                </p>

                <p>
                    <label for="correu">Correu electrònic</label>
                    <input id="email" name="correu" type="email" required>
                </p>

                <p>
                    <label for="edat">Edat</label>
                    <input id="edat" name="edat" type="number" min="16" max="99">
                </p>

                <fieldset>
                    <legend>Torn</legend>

                    <input id="mati" name="torn" type="radio" value="mati">
                    <label for="mati">Matí</label>

                    <input id="tarda" name="torn" type="radio" value="tarda">
                    <label for="tarda">Tarda</label>
                </fieldset>

                <p>
                    <input id="condicions" name="condicions" type="checkbox" required>
                    <label for="condicions">Accepto les condicions d'ús.</label>
                </p>

                <button type="submit">Enviar</button>
                <button type="reset">Restablir</button>

            </form>
        </section>

        <aside>
            <h2>Enllaços d'interès</h2>

            <ul>
                <li><a href="normes.html">Normes del centre</a></li>
                <li><a href="events.html">Calendari d'esdeveniments</a></li>
                <li><a href="biblioteca.html">Biblioteca digital</a></li>
            </ul>
        </aside>

    </main>

    <footer>
        <p>&copy; 2026 Centre cultural</p>
        <p>Plaça Major, 12 · Tel. 900 123 456</p>
    </footer>

</body>

</html>