En HTML existeixen un mínim d'etiquetes que s'han de consignar dins l'estructura del codi. Si us fixau en els diferents exemples, la majoria d'etiquetes inclouen una etiqueta d'inici i una de tancament. Ambdues contenen la mateixa paraula clau entre els símbols < >; la diferència és que l'etiqueta de tancament incorpora la barra inclinada / davant la paraula clau.

Les etiquetes serveixen per indicar al navegador alguna característica que afecta tot el que delimiten. Vegem-ne alguns exemples:

<!DOCTYPE html> (aquesta etiqueta indica que el codi que hi tenim a continuació està en format HTML. Fixau-vos que aquesta etiqueta es òrfena, no té cap altra de tancament).
<html></html> (és codi en format HTML).
<head></head> (indica la capçalera de la pàgina).
<title></title> (títol de la pàgina. Es mostrarà a la pestanya on estigui oberta la pàgina).
<body></body> (cos de la pàgina, és a dir, són els continguts mostrats al navegador: text, taules, imatges...).

Dins les etiquetes <body></body> tenim multitud d'etiquetes que ens ajudaran a inserir text i taules, imatges i a donar-hi format. Facem una ullada a les més bàsiques (text):

Quan hem de donar format a un títol, tenim diferents nivells (és molt important que, per raons d'accessibilitat, utilitzeu aquestes etiquetes i no texts amb negreta, ja que aquestes mostren, a més, a quin nivell us trobau):
- Un títol de nivell 1 (amb l'estil que conté la mida de font més gran) s'indica amb les etiquetes d'obertura i tancament <h1></h1>.
- Un títol de nivell 2 (amb un estil que conté una mida de font més petita que el nivell 1) s'indica amb les etiquetes d'obertura i tancament <h2></h2>.
- Un títol de nivell 3 (amb un estil que conté una mida de font més petita que el nivell 2) s'indica amb les etiquetes d'obertura i tancament <h3></h3>, i així successivament.
Els paràgrafs «normals» de text s'inicien i es tanquen amb les etiquetes <p></p>. Entre un paràgraf i el següent sempre hi ha un espai major que entre les línies que el componen, per diferenciar el punt i apart (canvi de paràgraf).
Si necessitau inserir una línia recta de separació dins els continguts, per diferenciar dos blocs, dues imatges amb fons blanc, etc., podeu inserir l'etiqueta <hr>. Fixau-vos que és òrfena, és a dir, només hi ha una etiqueta d'obertura, no necessita una etiqueta de tancament </...>.
Si necessitau inserir-hi un paràgraf en blanc, com a separació, teniu en compte que hi ha molts navegadors que interpreten les etiquetes <p></p> tota soles com a buides i no les mostren, és com si no existissin. Per evitar-ho, podeu fer servir el codi  . Aquest codi genera un contingut, un espai en blanc, que el navegador sí que interpretarà, deixant l'espai d'un paràgraf en blanc.
L'etiqueta <br> serveix per inserir-hi un salt de línia. Això vol dir que l'etiqueta inserirà un salt a la línia següent, però dins el mateix paràgraf; per això, està inclosa dins les etiquetes <p></p>. Fixau-vos que, a l'igual que <hr>, és òrfena.
Si volem inserir comentaris dins el codi HTML (moltes vegades faciliten la lectura del codi) i que no es mostrin en el navegador, hem de fer servir els signes  per tancar-lo.

IMPORTANT: aquesta estructura que hem explicat, és la que s'ha de seguir, per exemple, a l'hora de crear las pàgines estàtiques que farem servir a Moodle:

<!DOCTYPE html>
<html>
<head>
<title>Títol de la pàgina</title>
</head>
<body>
<h1>Títol dels continguts</h1>
<p>Continguts de la pàgina</p>
</body>
</html>

Codi HTML

<!DOCTYPE html>
<html>
<head>
<title>Guies d'aprenentatge de la plataforma EBAP en Línia</title>
</head>
<body>
<h1>Títol nivell 1</h1>
<h2>Títol nivell 2</h2>
<h3>Títol nivell 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, turpis non fringilla dictum, leo velit dignissim leo, at auctor elit ligula nec mauris. Nunc porttitor massa et mi sagittis ultrices. Quisque sed porta odio. Vestibulum id felis at massa pellentesque tempus. Nulla sollicitudin tincidunt molestie. Duis est augue, aliquet nec urna vitae, cursus posuere mi.</p>
<p>&nbsp;</p>
<hr>
<!-- En aquest apartat inclourem una petita descripció de... -->
<p>Contingut de la pàgina...<br>
Bot de línia...</p>
<p>Contingut de la pàgina...</p>
</body>
</html>

Visualitzat en el navegador

Títol nivell 1

Títol nivell 2

Títol nivell 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, turpis non fringilla dictum, leo velit dignissim leo, at auctor elit ligula nec mauris. Nunc porttitor massa et mi sagittis ultrices. Quisque sed porta odio. Vestibulum id felis at massa pellentesque tempus. Nulla sollicitudin tincidunt molestie. Duis est augue, aliquet nec urna vitae, cursus posuere mi.

Contingut de la pàgina...
Bot de línia...

Contingut de la pàgina...