Salta el contingut

Estructura HTML5

Qué és HTML5?

HTML5 és la cinquena versió principal de l'HTML, publicada com a recomanació oficial del W3C el 2014. Va ser dissenyada per cobrir les necessitats del web modern: documents semàntics, multimèdia nativa, APIs JavaScript avançades i compatibilitat amb dispositius mòbils.

Evolució d'HTML

Versió Any Novetats principals
HTML 1.0 1991 Primera versió, text i enllaços bàsics
HTML 2.0 1995 Formularis, taules
HTML 3.2 1997 Presentació, scripts
HTML 4.01 1999 CSS, accesibilitat, separació contingut/estil
XHTML 1.0 2000 HTML reformulat com XML estricte
HTML5 2014 Semàntica, multimèdia, APIs, Canvas, Storage

Estructura mínima d'un document HTML5

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Descripció de la pàgina per a SEO">
    <title>Títol de la pàgina</title>
    <link rel="stylesheet" href="estils.css">
</head>
<body>
    <header>
        <h1>Capçalera del lloc</h1>
        <nav>
            <a href="/">Inici</a>
            <a href="/quant-a">Sobre nosaltres</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>Article principal</h2>
            <p>Contingut de l'article.</p>
        </article>

        <aside>
            <h3>Barra lateral</h3>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Institut Sa Palomera</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

El DOCTYPE

La declaració <!DOCTYPE html> és obligatòria i ha d'anar a la primera línia. Indica al navegador que el document és HTML5 (en versions anteriors era molt més llarga).

<!-- HTML5 (simple) -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict (molt més llarg) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

L'element <head>

El <head> conté metadades del document: informació que no es mostra directament però que és essencial per al navegador, motors de cerca i xarxes socials.

Elements principals del <head>

<head>
    <!-- Codificació de caràcters (SEMPRE la primera) -->
    <meta charset="UTF-8">

    <!-- Viewport per a dispositius mòbils -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Descripció per a SEO (màx. 160 caràcters) -->
    <meta name="description" content="Descripció de la pàgina">

    <!-- Autor -->
    <meta name="author" content="Francesc Barragán">

    <!-- Paraules clau (poc rellevant per SEO avui dia) -->
    <meta name="keywords" content="html, css, web">

    <!-- Títol (apareix a la pestanya del navegador) -->
    <title>Títol de la pàgina</title>

    <!-- Full d'estil extern -->
    <link rel="stylesheet" href="estils.css">

    <!-- Icona del lloc (favicon) -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Open Graph per a xarxes socials -->
    <meta property="og:title" content="Títol per a xarxes socials">
    <meta property="og:description" content="Descripció per a xarxes socials">
    <meta property="og:image" content="https://exemple.com/imatge.jpg">
</head>

L'element <body> i les etiquetes semàntiques

HTML5 va introduir etiquetes semàntiques que descriuen el significat del contingut, no només la seva presentació. Això millora l'accessibilitat, el SEO i la mantenibilitat del codi.

flowchart TD
    BODY[body]
    BODY --> HEADER[header\ncapçalera del lloc]
    BODY --> MAIN[main\ncontingut principal]
    BODY --> FOOTER[footer\npeu de pàgina]

    HEADER --> NAV[nav\nmenú de navegació]
    MAIN --> ARTICLE[article\ncontingut autònom]
    MAIN --> ASIDE[aside\nbarra lateral]
    ARTICLE --> SECTION[section\nsecció temàtica]
    SECTION --> P[p, h1-h6, ul...]

    style BODY fill:#00695c,color:#fff
    style MAIN fill:#004d40,color:#fff

Etiquetes semàntiques principals

Etiqueta Ús
<header> Capçalera del lloc o d'una secció
<nav> Bloc de navegació principal
<main> Contingut principal (únic per pàgina)
<article> Contingut autònom (post, notícia, comentari)
<section> Secció temàtica d'un document
<aside> Contingut relacionat però no principal (barra lateral)
<footer> Peu de pàgina o de secció
<figure> Contingut il·lustratiu (imatge + peu de foto)
<figcaption> Peu de foto dins de <figure>
<time> Data o hora
<mark> Text ressaltat
<details> + <summary> Contingut expandible/plegable

Comparació: HTML4 vs HTML5

<!-- HTML4: tot amb divs -->
<div id="header">
    <div id="nav">...</div>
</div>
<div id="content">
    <div class="article">...</div>
</div>
<div id="footer">...</div>

<!-- HTML5: etiquetes semàntiques -->
<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
</main>
<footer>...</footer>

Bones pràctiques

  • Usa <main> una sola vegada per pàgina
  • <article> és per a contingut que té sentit per si sol (pot redistribuir-se)
  • <section> és per a agrupació temàtica dins d'un article o pàgina
  • Mai uses una etiqueta semàntica només per als seus estils: per a estil usa <div>

L'atribut lang

Declara sempre l'idioma del document amb <html lang="ca"> (català) o <html lang="es"> (castellà). És important per a lectors de pantalla i SEO.

Miniactivitat AC03733

Crea la pàgina principal (index.html) del teu portfolio personal. Ha d'incloure: una capçalera amb el teu nom i navegació, una secció "Sobre mi", una secció "Projectes" i un peu de pàgina amb les teves dades de contacte. Usa etiquetes semàntiques.