Struttura HTML semantica del progetto completo

Ora trasformiamo il brief del progetto in HTML. In questa fase non pensiamo a colori, colonne o animazioni: pensiamo al significato dei contenuti e all’ordine di lettura.

L’obiettivo è avere una pagina che funzioni già senza CSS: titolo chiaro, navigazione, sezioni riconoscibili, progetti leggibili e contatti raggiungibili.

Struttura generale

Il portfolio sarà una singola pagina con:

1. header con logo e navigazione;
2. hero introduttiva;
3. sezione “Chi sono”;
4. sezione portfolio;
5. sezione contatti;
6. footer.

HTML completo

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mario Rossi - Portfolio web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="logo" href="/">Mario Rossi</a>

    <nav aria-label="Navigazione principale">
      <ul class="nav-list">
        <li><a href="#chi-sono">Chi sono</a></li>
        <li><a href="#portfolio">Progetti</a></li>
        <li><a href="#contatti">Contatti</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-copy">
        <h1 id="hero-title">Sviluppatore web front-end</h1>
        <p>Creo pagine responsive, accessibili e facili da mantenere.</p>
        <a class="btn btn-primary" href="#portfolio">Guarda i progetti</a>
      </div>

      <img
        class="hero-photo"
        src="foto-profilo.webp"
        alt="Ritratto di Mario Rossi"
        width="600"
        height="600"
      >
    </section>

    <section id="chi-sono" class="about" aria-labelledby="about-title">
      <h2 id="about-title">Chi sono</h2>
      <p>
        Studio HTML, CSS e JavaScript con attenzione a semantica,
        accessibilità e prestazioni.
      </p>
    </section>

    <section id="portfolio" class="projects" aria-labelledby="projects-title">
      <h2 id="projects-title">Progetti recenti</h2>

      <div class="project-grid">
        <article class="card">
          <img
            src="progetto-portfolio.webp"
            alt="Anteprima del portfolio personale"
            width="800"
            height="500"
            loading="lazy"
          >
          <div class="card-body">
            <h3>Portfolio personale</h3>
            <p>Pagina responsive costruita con HTML semantico e CSS Grid.</p>
            <a href="#" class="card-link">Apri il progetto</a>
          </div>
        </article>

        <article class="card">
          <img
            src="progetto-landing.webp"
            alt="Anteprima di una landing page per un ristorante"
            width="800"
            height="500"
            loading="lazy"
          >
          <div class="card-body">
            <h3>Landing page ristorante</h3>
            <p>Layout mobile-first con menu, call to action e sezione contatti.</p>
            <a href="#" class="card-link">Apri il progetto</a>
          </div>
        </article>
      </div>
    </section>

    <section id="contatti" class="contact" aria-labelledby="contact-title">
      <h2 id="contact-title">Contatti</h2>
      <p>Vuoi collaborare o vedere altri lavori?</p>
      <ul>
        <li><a href="mailto:mario@example.com">mario@example.com</a></li>
        <li><a href="https://github.com/mariorossi">GitHub</a></li>
      </ul>
    </section>
  </main>

  <footer class="site-footer">
    <p>&copy; 2026 Mario Rossi. Tutti i diritti riservati.</p>
  </footer>
</body>
</html>

Perché questa struttura funziona

• Il logo è un link alla home.
• La navigazione usa una lista, perché contiene un gruppo di link correlati.
• C’è un solo <main> e contiene il contenuto specifico della pagina.
• Ogni sezione importante ha un titolo collegato con aria-labelledby.
• Ogni progetto è un <article>, perché ha senso come contenuto autonomo.
• Le immagini hanno alt, width e height.
• I contatti non sono nascosti in un bottone generico: sono link veri.

Prima verifica

Apri il file nel browser senza CSS. Dovrebbe essere brutto ma leggibile. Se il contenuto non si capisce senza stile, il problema non è ancora CSS: è struttura HTML.

Esercizio

Aggiungi un terzo progetto e una seconda modalità di contatto. Mantieni la stessa gerarchia di titoli e verifica che tutti i link abbiano un testo comprensibile.