Corso HTML: crea la tua prima pagina web

28 settembre 2025 | Michele Siddi

HTML (HyperText Markup Language) è il linguaggio fondamentale per creare pagine web. È la struttura portante di qualsiasi sito internet. In questa guida pratica costruiremo la tua prima pagina web da zero, imparando passo dopo passo tutti i concetti essenziali.

🌐 Cos'è HTML?

HTML non è un linguaggio di programmazione, ma un linguaggio di markup. Utilizza dei "tag" per definire la struttura e il contenuto di una pagina web:

Contenuto strutturato: Titoli, paragrafi, liste, tabelle, form
Media: Immagini, video, audio
Collegamenti: Link tra pagine e risorse esterne
Semantica: Dare significato al contenuto per browser e motori di ricerca

📝 Struttura base di una pagina HTML

Ogni pagina HTML ha una struttura standard:

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La mia prima pagina</title>
  </head>
  <body>
    <h1>Ciao, mondo!</h1>
    <p>Benvenuto nella tua prima pagina web.</p>
  </body>
</html>

Spiegazione degli elementi:

<!DOCTYPE html>: Dichiara che il documento è HTML5
<html>: Elemento root che contiene tutta la pagina
<head>: Contiene metadati, titolo, link a CSS e JavaScript
<meta charset="UTF-8">: Specifica la codifica dei caratteri
<meta name="viewport">: Rende la pagina responsive sui dispositivi mobili
<title>: Il titolo che appare nella tab del browser
<body>: Contiene tutto il contenuto visibile della pagina

🔤 Tag HTML essenziali

Titoli (Headings)

Ci sono 6 livelli di titoli, da h1 (più importante) a h6:

<h1>Titolo principale</h1>
<h2>Sottotitolo</h2>
<h3>Sezione</h3>

Paragrafi e testo

<p>Questo è un paragrafo.</p>
<p>Testo in <strong>grassetto</strong> e <em>corsivo</em>.</p>
<br> <!-- Interruzione di riga -->
<hr> <!-- Linea orizzontale -->

Liste

Liste non ordinate (bullet points) e ordinate (numerate):

<!-- Lista non ordinata -->
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

<!-- Lista ordinata -->
<ol>
  <li>Primo passo</li>
  <li>Secondo passo</li>
</ol>

Link e immagini

<!-- Link -->
<a href="https://example.com">Visita il sito</a>
<a href="pagina2.html">Link interno</a>

<!-- Immagine -->
<img src="foto.jpg" alt="Descrizione immagine">

Divisioni e contenitori

<!-- Div: contenitore generico -->
<div class="contenitore">
  <p>Contenuto</p>
</div>

<!-- Span: contenitore inline -->
<p>Testo con <span style="color: red;">parola colorata</span></p>

🎨 HTML5 Semantico

HTML5 introduce tag semantici che descrivono il significato del contenuto:

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">Chi siamo</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Titolo articolo</h2>
    <p>Contenuto dell'articolo...</p>
  </article>
  
  <aside>
    <h3>Sidebar</h3>
    <p>Contenuto correlato...</p>
  </aside>
</main>

<footer>
  <p>© 2025 Il mio sito</p>
</footer>

📋 Form e input

I form permettono di raccogliere dati dagli utenti:

<form action="/submit" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="messaggio">Messaggio:</label>
  <textarea id="messaggio" name="messaggio" rows="4"></textarea>
  
  <button type="submit">Invia</button>
</form>

📊 Tabelle

Per visualizzare dati in formato tabellare:

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Età</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mario</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

🎯 Progetto pratico: Crea la tua prima pagina

Esercizio completo per mettere in pratica quanto appreso:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Il Mio Portfolio</title>
</head>
<body>
    <header>
        <h1>Benvenuto nel mio Portfolio</h1>
        <nav>
            <a href="#about">Chi sono</a>
            <a href="#projects">Progetti</a>
            <a href="#contact">Contatti</a>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>Chi sono</h2>
            <p>Sono uno sviluppatore web appassionato...</p>
        </section>
        
        <section id="projects">
            <h2>I miei progetti</h2>
            <article>
                <h3>Progetto 1</h3>
                <p>Descrizione del progetto...</p>
            </article>
        </section>
        
        <section id="contact">
            <h2>Contattami</h2>
            <form>
                <input type="email" placeholder="La tua email">
                <textarea placeholder="Messaggio"></textarea>
                <button>Invia</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>© 2025 Il mio nome</p>
    </footer>
</body>
</html>

💡 Best Practice e consigli

Usa tag semantici: Aiuta SEO e accessibilità
Indentazione corretta: Rendi il codice leggibile
Attributi alt per le immagini: Migliora accessibilità e SEO
Valida il codice: Usa il W3C Validator
Mobile-first: Pensa sempre alla versione mobile
Commenti: Usa  per documentare

📚 Prossimi passi

Dopo aver imparato HTML, il percorso naturale è:

CSS: Stilizza le tue pagine (colori, layout, animazioni)
JavaScript: Aggiungi interattività e dinamismo
Responsive Design: Crea layout che funzionano su tutti i dispositivi
Frameworks: Bootstrap, Tailwind per sviluppo rapido
SEO: Ottimizza le pagine per i motori di ricerca

Conclusione: Imparare HTML è il primo passo fondamentale per diventare uno sviluppatore web. È semplice da imparare ma potente nelle sue possibilità. Prova, sperimenta e crea il tuo primo sito web oggi stesso!

💡 Vuoi approfondire HTML e CSS?
Offro corsi personalizzati per imparare a creare siti web professionali da zero. Contattami per iniziare il tuo percorso.