Resum HTML

Mapa Conceptual del Document HTML

alt text

Estructura general d’un document HTML

Tot document HTML segueix tres grans blocs:

Secció Etiqueta Funció principal
Declaració del tipus de document <!DOCTYPE html> Indica al navegador que es tracta d’un document HTML5.
Capçalera <head> ... </head> Conté informació del document: títol, metadades, estils i scripts.
Cos del document <body> ... </body> Inclou tot el contingut visible que es mostra al navegador.

Contingut del <head>

Etiqueta Propòsit
<title> Defineix el títol de la pàgina.
<meta> Defineix metadades (autor, descripció, codificació, paraules clau).
<link> Enllaça fulls d’estil (CSS) o icones.
<style> Afig estils CSS dins del document.
<script> Incrusta o enllaça codi JavaScript.

Exemple bàsic:

<head>
  <meta charset="UTF-8">
  <title>La meua pàgina</title>
  <link rel="stylesheet" href="estils.css">
</head>

Contingut del <body>

Text i estructura

Etiqueta Funció
<h1> … <h6> Capçaleres jeràrquiques.
<p> Paràgraf de text.
<br> Salt de línia.
<hr> Línia horitzontal.
<blockquote> / <q> Citacions llargues o curtes.
<strong> / <b> Negreta (amb o sense valor semàntic).
<em> / <i> Cursiva (amb o sense valor semàntic).
<mark>, <del>, <ins> Marcat, eliminat, subratllat.

Llistes

Tipus Etiqueta principal Exemple
Ordenada <ol> + <li> 1, 2, 3…
Desordenada <ul> + <li> •, ○, –
De definició <dl> + <dt> + <dd> Termes amb descripcions

Taules

Etiqueta Funció
<table> Conté la taula.
<tr> Defineix una fila.
<th> Cel·la d’encapçalament.
<td> Cel·la de dades.
<caption> Títol de la taula.
<thead>, <tbody>, <tfoot> Seccions de la taula.

Imatges i multimèdia

Etiqueta Funció
<img> Mostra una imatge (src, alt, width, height).
<audio> / <video> Afig contingut multimèdia.
<iframe> Incrusta contingut extern (com vídeos o mapes).

Enllaços

Etiqueta Propòsit
<a href="..."> Crea un hipervincle a una pàgina o secció.
mailto: Obri el client de correu.
#id Enllaç intern dins de la mateixa pàgina.

Exemple:

<a href="https://exemple.com" target="_blank">Visita Exemple</a>

Formularis

Etiqueta Propòsit
<form> Defineix el formulari.
<input> Camp de dades (text, número, radio, checkbox, etc.).
<textarea> Àrea de text ampliada.
<select> + <option> Llista desplegable.
<button> o <input type="submit"> Envia o reinicia el formulari.
<label> Associa text descriptiu a un camp d’entrada.

Etiquetes de contenidor

Tipus Etiquetes Descripció
Genèriques <div>, <span> Agrupen o destaquen contingut sense significat semàntic.
Semàntiques <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> Defineixen l’estructura lògica del document i milloren l’accessibilitat i el SEO.

Esquema d’una pàgina semàntica:

<header> ... </header>
<nav> ... </nav>
<main>
  <section>
    <article> ... </article>
    <article> ... </article>
  </section>
  <aside> ... </aside>
</main>
<footer> ... </footer>

Bones pràctiques HTML

  1. Tanca totes les etiquetes correctament.
  2. Evita duplicar IDs. Cada ID ha de ser únic.
  3. Aplica estils amb CSS, no amb atributs HTML.
  4. Utilitza etiquetes semàntiques per a millorar accessibilitat i SEO.
  5. Inclou sempre lang="ca" i <meta charset="UTF-8">.
  6. Verifica el teu codi amb el validador oficial: https://validator.w3.org/

En definitiva

L’HTML és l’esquelet d’una pàgina web. Organitza el contingut, dóna estructura i defineix el significat de cada part del document. Amb les etiquetes semàntiques aconseguim accessibilitat, manteniment i posicionament millors. El següent pas és aplicar CSS per a donar estil i disseny al contingut estructurat.