Modulo 1: HTML — Le Basi

Cos'è HTML?

HTML sta per HyperText Markup Language. Non è un linguaggio di programmazione — è un linguaggio di markup: dice al browser cosa sono le cose nella pagina.

Pensa a un giornale: ha titoli, paragrafi, foto, didascalie. HTML fa lo stesso per il web. Ogni pezzo di contenuto viene "avvolto" in un tag che dice al browser: "questo è un titolo", "questo è un paragrafo", "questa è un'immagine".

💡 CONCETTO CHIAVE

HTML descrive la struttura, non l'aspetto. Per i colori, i font, le animazioni c'è il CSS (prossimo modulo). Per la logica c'è JavaScript. HTML è sempre il punto di partenza.

I tag: come funzionano

Un tag HTML ha questa forma:

Anatomia di un tag

<!-- Tag di apertura    Contenuto     Tag di chiusura -->
<p>Questo è un paragrafo.</p>

<!-- Tag con attributo -->
<a href="https://google.com">Vai a Google</a>

<!-- Tag "vuoto" (senza contenuto, non ha chiusura) -->
<br>
<img src="foto.jpg" alt="Una foto">

Regole base:

La maggior parte dei tag si apre e si chiude: <p>...</p>
I tag si annidano (uno dentro l'altro) ma non si incrociano
Gli attributi danno informazioni extra al tag: href, src, class
HTML non è case-sensitive, ma si scrive tutto minuscolo per convenzione

Struttura di una pagina HTML

Ogni pagina HTML ha la stessa ossatura. Sempre. Imparala a memoria:

La struttura base — il "boilerplate"

<!DOCTYPE html>                 <!-- Dice: "questo è HTML5" -->
<html lang="it">                 <!-- Inizio documento, lingua -->
<head>                            <!-- Metadati (non visibili) -->
    <meta charset="UTF-8">         <!-- Supporto caratteri speciali -->
    <title>La mia pagina</title>   <!-- Titolo nella tab del browser -->
</head>
<body>                            <!-- Contenuto visibile -->
    <h1>Ciao mondo!</h1>
    <p>Il mio primo sito.</p>
</body>
</html>

Cosa fa ogni pezzo:

<!DOCTYPE html> — Dice al browser di usare HTML5 (la versione moderna)
<html> — L'elemento radice, contiene tutto
<head> — Roba per il browser, non visibile nella pagina (titolo, charset, CSS, ecc.)
<body> — Tutto quello che l'utente VEDE nella pagina

🔬 Prova tu — Editor Live

Modifica il codice a sinistra e guarda il risultato a destra in tempo reale:

✏️ EDITOR LIVE

I tag che userai di più

Titoli: h1 → h6

Ci sono 6 livelli di titolo. <h1> è il più importante (usalo una sola volta per pagina), <h6> il meno.

Titoli

<h1>Titolo principale</h1>
<h2>Sottotitolo</h2>
<h3>Sotto-sottotitolo</h3>
<!-- ...fino a h6 -->

Testo: paragrafi, grassetto, corsivo

Formattazione testo

<p>Un paragrafo di testo. Il browser ignora gli a capo
nel codice — devi usare i tag.</p>

<p>Testo <strong>in grassetto</strong> e <em>in corsivo</em>.</p>

<br> <!-- A capo forzato (usalo poco!) -->
<hr> <!-- Linea orizzontale di separazione -->

Link

<!-- Link esterno -->
<a href="https://google.com">Vai a Google</a>

<!-- Link che apre in nuova tab -->
<a href="https://google.com" target="_blank">Google (nuova tab)</a>

Immagini

<!-- img è un tag vuoto — non ha chiusura -->
<img src="foto.jpg" alt="Descrizione della foto">

<!-- Con dimensioni -->
<img src="logo.png" alt="Logo" width="200">

⚠️ IMPORTANTE

L'attributo alt è obbligatorio nelle immagini. Serve per l'accessibilità (screen reader per persone non vedenti) e per la SEO. Non lasciarlo mai vuoto.

Liste

Liste ordinate e non ordinate

<!-- Lista NON ordinata (punti) -->
<ul>
    <li>Pizza</li>
    <li>Pasta</li>
    <li>Couscous</li>
</ul>

<!-- Lista ORDINATA (numeri) -->
<ol>
    <li>Primo passo</li>
    <li>Secondo passo</li>
    <li>Terzo passo</li>
</ol>

🔬 Prova tu — Metti tutto insieme

Crea una mini-pagina che abbia: un titolo, un paragrafo, un link e una lista. Usa l'editor:

✏️ EDITOR LIVE — Prova libera

Organizzare la pagina: div e tag semantici

Finora abbiamo visto tag per il contenuto. Ma come organizzi le sezioni della pagina?

Il tag div

<div> è una "scatola" generica. Non ha significato proprio — serve per raggruppare elementi e poi stilizzarli con CSS.

Div come contenitore

<div>
    <h2>Sezione contatti</h2>
    <p>Email: naser@example.com</p>
    <p>Tel: 333 1234567</p>
</div>

Tag semantici (HTML5)

HTML5 ha introdotto tag che significano qualcosa. Funzionano come div, ma dicono al browser (e a Google) cosa contengono:

Struttura semantica di una pagina

<header>       <!-- Intestazione del sito (logo, menu) -->
    <nav>         <!-- Menu di navigazione -->
        <a href="/">Home</a>
        <a href="/chi-sono">Chi sono</a>
    </nav>
</header>

<main>         <!-- Contenuto principale -->
    <article>   <!-- Un articolo/post -->
        <h1>Il mio primo post</h1>
        <p>Contenuto...</p>
    </article>

    <section>   <!-- Una sezione della pagina -->
        <h2>Servizi</h2>
    </section>
</main>

<footer>       <!-- Piede pagina -->
    <p>© 2026 Naser</p>
</footer>

🎯 REGOLA PRATICA

Usa i tag semantici quando puoi (header, nav, main, footer, article, section). Usa div solo quando nessun tag semantico ha senso. Google e gli screen reader ti ringrazieranno.

🏋️ Esercizio: La tua pagina personale

Metti in pratica tutto quello che hai imparato. Crea una pagina personale con:

🎯 SFIDA — Crea il tuo profilo

La tua pagina deve avere:

Struttura completa (DOCTYPE, html, head, body)
Un <title> nel head
Un <header> con il tuo nome come <h1>
Un <main> con:
- Un paragrafo che ti descrive (usa <strong> e <em>)
- Una lista delle tue competenze o interessi
- Un link al tuo sito preferito
Un <footer> con il copyright

💡 Mostra suggerimento

Inizia dalla struttura base (DOCTYPE, html, head, body), poi aggiungi i tag semantici uno alla volta. Non serve che sia bello — quello arriva con il CSS nel prossimo modulo!

✏️ EDITOR — Sfida finale

✅ Sfida completata! Sei pronto per il Modulo 2: CSS

📝 Test di verifica

Vediamo se hai capito le basi. Rispondi a tutte le domande:

🧠 QUIZ — 6 domande + 3 bonus 🎓

1. Cosa significa HTML?

High Tech Machine Language

How To Make Layouts

HyperText Markup Language

Home Tool Markup Language

2. Quale tag contiene il contenuto visibile della pagina?

<head>

<body>

<html>

<main>

3. Come si crea un link che apre in una nuova tab?

<a href="url" target="_blank">

<a href="url" new-tab>

<link href="url" target="new">

4. Quale di questi NON è un tag semantico HTML5?

<header>

<article>

<div>

<nav>

5. Quale attributo è obbligatorio nel tag <img>?

title

alt

width

class

6. Qual è la differenza tra <ul> e <ol>?

ul = punti elenco, ol = numeri

ul = numeri, ol = punti elenco

Sono la stessa cosa

🎓 BONUS — Per la lode (queste vanno oltre il modulo)

7. 🎓 Cosa succede se metti un <div> dentro un <p>?

Funziona normalmente, div è un contenitore universale

Il browser "rompe" il paragrafo — non è HTML valido

La pagina non si carica

8. 🎓 A cosa serve l'attributo charset="UTF-8" nel <meta>?

Definisce il colore di sfondo della pagina

Imposta la lingua della pagina

Permette di visualizzare caratteri speciali (è, ñ, ü, العربية)

9. 🎓 Se devi scegliere tra <b> e <strong>, quale è "più corretto" e perché?

<strong> — ha significato semantico (importanza), non solo aspetto

<b> — è più veloce da scrivere e fa la stessa cosa

Sono identici, non cambia niente

🎉

6/6

risposte corrette

Perfetto! Hai capito le basi di HTML. Pronto per il CSS!

← Modulo precedente Modulo 2: CSS →