HTML (HyperText Markup Language) és el llenguatge essencial per estructurar el contingut de qualsevol pàgina web. Comprendre les etiquetes és clau per als desenvolupadors i tècnics, ja que influeixen en l'accessibilitat, el rendiment i el SEO d'un lloc web. En aquest blog, explicarem les etiquetes HTML més importants, el seu ús pràctic i les millors pràctiques recomanades per la indústria.
HTML està format per etiquetes que organitzen el contingut d'una pàgina web. Aquestes etiquetes defineixen títols, paràgrafs, imatges, enllaços, taules, formularis i molt més. La seva implementació correcta té un impacte directe en l'experiència d'usuari i en la manera en què els motors de cerca interpreten el contingut.
Cada etiqueta HTML segueix una estructura específica:
<p></p>Algunes etiquetes, com <img>, són auto-tancades, és a dir, no requereixen una etiqueta de tancament.
<h1>, <p>, <div>).<h1>Títol</h1>).<img src="imatge.jpg" alt="Descripció">).A continuació tens una llista organitzada d'etiquetes HTML segons la seva funció en el desenvolupament web.
| Etiqueta | Descripció | Exemple |
|---|---|---|
<html> |
Contenidor arrel d'un document HTML. | <html lang="ca">...</html> |
<head> |
Conté metadades i enllaços a recursos externs. | <head><title>El meu lloc</title></head> |
<meta> |
Defineix metadades del document. | <meta charset="UTF-8"> |
<base> |
Defineix la URL base per a enllaços relatius. | <base href="https://exemple.com/"> |
| Etiqueta | Descripció | Exemple |
|---|---|---|
<body> |
Contenidor del contingut visible. | <body>...</body> |
<header> |
Defineix una capçalera d'una secció o pàgina. | <header><h1>Benvingut</h1></header> |
<footer> |
Defineix un peu de pàgina. | <footer>© 2025 El meu lloc</footer> |
<main> |
Conté el contingut principal del document. | <main><p>Contingut principal</p></main> |
<section> |
Agrupa contingut relacionat. | <section><h2>Notícies</h2></section> |
<article> |
Representa contingut independent. | <article><h2>Article</h2></article> |
<aside> |
Contingut relacionat com barres laterals. | <aside>Contingut publicitari</aside> |
<nav> |
Contenidor per a enllaços de navegació. | <nav><a href="#">Inici</a></nav> |
<div> |
Contenidor genèric sense semàntica específica. | <div class="contenidor">...</div> |
| Etiqueta | Descripció | Exemple |
|---|---|---|
<h1> - <h6> |
Encapçalaments de diversos nivells. | <h1>Títol</h1> |
<p> |
Paràgraf de text. | <p>Això és un paràgraf.</p> |
<br> |
Salt de línia. | Text<br>Un altre text |
<hr> |
Línia horitzontal. | <hr> |
<strong> |
Text en negreta (important). | <strong>Important</strong> |
<em> |
Text en cursiva (èmfasi). | <em>Destacat</em> |
<mark> |
Text ressaltat. | <mark>Important</mark> |
<small> |
Text més petit. | <small>Nota</small> |
<del> |
Text ratllat. | <del>Esborrat</del> |
<ins> |
Text subratllat. | <ins>Inserit</ins> |
<sub> |
Text en subíndex. | H<sub>2</sub>O |
<sup> |
Text en superíndex. | X<sup>2</sup> |
<article>, <footer> i <header> milloren l'organització, el SEO i l'accessibilitat.<font> per aconseguir un codi net i estàndard.L'HTML s'actualitza constantment integrant noves funcionalitats, especialment etiquetes multimèdia com <video> i <audio>, àmpliament utilitzades en aplicacions modernes. El futur de l'HTML apunta cap a la integració amb tecnologies com les Progressive Web Apps (PWA), introduint noves etiquetes i funcionalitats.
Dominar les etiquetes HTML és fonamental per a desenvolupadors i tècnics que volen optimitzar la creació de llocs web, millorar l'estructura del contingut i incrementar el rendiment global del lloc web.
