Guida Html
17. Nov, 2025

Vuoi imparare a creare un sito web da zero ma non sai da dove iniziare?
La risposta è semplice: parti dal linguaggio HTML.

In questa guida ti spiegherò cos’è l’HTML e come impararlo, a cosa serve, come si struttura una pagina web e ti mostrerò alcuni esempi di codice pratici per iniziare subito a esercitarti.

Cos’è l’HTML e a cosa serve

HTML (HyperText Markup Language) è il linguaggio di base per creare pagine web. Non è un linguaggio di programmazione, ma un linguaggio di markup, cioè un insieme di tag che definiscono la struttura e i contenuti di una pagina: testi, immagini, link, tabelle e tanto altro.

Ogni sito web, da quelli più semplici ai portali complessi, nasce da un file HTML.
In pratica, se il web fosse un corpo umano, l’HTML sarebbe lo scheletro, mentre CSS e JavaScript sarebbero i vestiti e il movimento.

Struttura base di una pagina HTML

Una pagina HTML è composta da diversi elementi fondamentali. Ecco l’esempio della struttura base:

<!DOCTYPE html>

<html>
     <head>
         <meta charset="UTF-8">

         <title>La mia prima pagina HTML</title>

     </head>

     <body>

         <h1>Ciao, mondo!</h1>

         <p>Questa è la mia prima pagina web scritta in HTML.</p>

     </body>

</html>

💡 Vediamolo nel dettaglio:

  • <!DOCTYPE html> → indica al browser che il documento è in HTML5.
  • <html> → è il contenitore principale di tutto il codice HTML.
  • <head> → contiene le informazioni sulla pagina (titolo, codifica, link a file esterni).
  • <body> → contiene tutto ciò che viene visualizzato sullo schermo: testi, immagini, link, tabelle…

Esempi pratici di codice HTML

1. Titoli e paragrafi

<h1>Titolo principale</h1>

<h2>Sottotitolo</h2>

<p>Questo è un paragrafo di testo. Puoi scrivere qualsiasi contenuto qui.</p>

💡I tag <h1>–</h6> definiscono l’importanza dei titoli, mentre <p> serve per i paragrafi.

2. Link e immagini

💡Il tag <a> crea un link, mentre <img> serve per inserire immagini (con l’attributo alt per la descrizione).

<a href="https://www.puntonetformazione.com">Visita il nostro sito</a>

<img src="immagine.jpg" alt="Descrizione dell'immagine">

💡Il tag <a> crea un link, mentre <img> serve per inserire immagini (con l’attributo alt per la descrizione).

3. Liste

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

💡 <ul> crea una lista puntata (unordered list) e <li> definisce ogni elemento.

4. Tabelle

<table border="1">

    <tr>

        <th>Nome</th>

        <th>Cognome</th>

    </tr>

    <tr>

        <td>Marco</td>

        <td>Rossi</td>

    </tr>

</table>

💡 <table> crea una tabella, <tr> indica le righe, <th> le intestazioni e <td> le celle.

5. HTML per la Struttura semantica delle tue pagine

L’HTML moderno non serve solo a “mostrare” i contenuti, ma anche a dare un significato logico alla struttura della pagina.

Questo è il principio della semantica HTML: usare tag che descrivono che tipo di contenuto racchiudono, non solo come appaiono.

Ecco i principali tag semantici:

<header>

  <h1>Benvenuti nel mio sito</h1>

  <nav>

    <a href="#home">Home</a>

    <a href="#articoli">Articoli</a>

    <a href="#contatti">Contatti</a>

  </nav>

</header>

 

<main>

  <section>

    <article>

      <h2>Il mio primo post</h2>

      <p>Questo è un articolo con testo e immagini.</p>

    </article>

  </section>

</main>

 

<footer>

  <p>© 2025 Il Mio Sito Web</p>

</footer>

💡 Usa questi tag al posto dei semplici <div>per dare alla pagina una struttura chiara, leggibile e SEO-friendly. Motori di ricerca e tecnologie assistive (come screen reader) interpretano meglio il contenuto quando è semantico.

6. Form e campi di input

I form sono la base di ogni interazione tra utente e sito web: servono per iscriversi a una newsletter, inviare messaggi, fare ricerche o login.

Ecco un esempio semplice:

<form action="/invia-dati" method="post">

  <label for="nome">Nome:</label>

  <input type="text" id="nome" name="nome" placeholder="Scrivi il tuo nome">

 

  <label for="email">Email:</label>

  <input type="email" id="email" name="email" required>

 

  <button type="submit">Invia</button>

</form>

💡<form> racchiude tutti i campi. <label> serve per descrivere il campo di input (e migliora l’accessibilità). <input> definisce il tipo di dato (testo, email, numero, password…). <button>invia il modulo.

7. Media avanzata: immagini, video e audio

HTML5 consente di inserire contenuti multimediali direttamente nella pagina senza plugin esterni.

Esempio di immagini responsive con <picture>

<picture>

  <source srcset="foto.webp" type="image/webp">

  <source srcset="foto.jpg" type="image/jpeg">

  <img src="foto.jpg" alt="Descrizione della Foto">

</picture>

💡 Il browser sceglie automaticamente il formato più adatto (utile per dispositivi mobili o connessioni lente).

8. Video e Audio

<video controls width="400">

  <source src="video.mp4" type="video/mp4">

  Il tuo browser non supporta il video.

</video>

 

<audio controls>

  <source src="audio.mp3" type="audio/mpeg">

  Il tuo browser non supporta l’audio.

</audio>

💡 Gli attributi controls, autoplay, loop e muted permettono di gestire il comportamento dei media.

9. Responsive e accessibilità

Oggi le pagine web devono adattarsi a schermi di ogni dimensione e rispettare le regole di accessibilità.

Meta tag per dispositivi mobili

Inseriscilo sempre nel: <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

💡 Serve a far sì che la pagina si adatti automaticamente alla larghezza dello schermo (smartphone, tablet, desktop).

Attributi utili per l’accessibilità

  • alt → descrive un’immagine (Logo del sito)
  • title → aggiunge un suggerimento testuale al passaggio del mouse
  • aria-label e role → aiutano i lettori di schermo a capire gli elementi

Esempio

<nav aria-label="Navigazione principale">

  <ul>

    <li><a href="#home">Home</a></li>

    <li><a href="#articoli">Articoli</a></li>

    <li><a href="#contatti">Contatti</a></li>

  </ul>

</nav>

💡 Segui le linee guida WCAG (Web Content Accessibility Guidelines) per creare pagine accessibili a tutti.

I tag HTML più comuni

Tag Funzione
<html> Contenitore principale del documento
<head> Contiene le informazioni della pagina
<title> Definisce il titolo visibile nella scheda del browser
<body> Contiene i contenuti visibili
<h1>–<h6> Titoli di diversa importanza
<p> Paragrafo di testo
<a> Link ipertestuale

<img>/td>

 Inserisce un’immagine
<table> Crea una tabella
<div> Contenitore generico per il layout
<header> Intestazione della pagina o di una sezione (spesso contiene logo o menu)
<nav> Contiene la barra di navigazione con i link principali
<main> Racchiude il contenuto principale della pagina
<section> Definisce una sezione tematica del contenuto
<article> Contiene un contenuto indipendente (es. articolo, post, recensione)
<footer> Parte finale della pagina o di una sezione (es. crediti, copyright, link)
<form> Contenitore per campi di input e pulsanti di invio
<input> Campo di inserimento dati (testo, email, password, numero, ecc.)
<label> Etichetta descrittiva collegata a un campo di input
<button> Pulsante per inviare o attivare un’azione
<textarea> Area di testo multi-riga per messaggi o commenti
<select> Menu a tendina con diverse opzioni
<option> Singola voce all’interno di un menu <select>
<picture> Gestisce immagini responsive con più sorgenti
<source> Specifica il file multimediale (immagine, audio o video) e il suo formato
<video> Inserisce un video con controlli integrati
<audio> Inserisce un file audio con controlli integrati
<meta> Fornisce informazioni ai browser (es. charset, viewport, description)
<span> Contenitore inline per porzioni di testo o piccoli elementi
<strong> Evidenzia un testo con significato semantico di “importanza”
<em> Evidenzia un testo con enfasi (corsivo semantico)

Come imparare HTML in modo efficace

Ecco alcuni consigli pratici per studiare HTML e metterti subito alla prova:

  • Usa un editor online come CodePen.io o JSFiddle.net per scrivere e testare codice direttamente nel browser.
  • Sperimenta ogni giorno: prova a modificare i tag, aggiungere immagini, cambiare titoli.
  • Consulta guide gratuite come la documentazione ufficiale su MDN Web Docs.
  • Segui un corso strutturato: ti aiuterà a passare dalle basi all’autonomia completa nella creazione di siti web.

Prossimo passo: diventa un vero webmaster

Hai appena scoperto le fondamenta del web. Ora è il momento di trasformare la curiosità in azione.

Se vuoi davvero costruire qualcosa di tuo (un sito, un portfolio, un progetto digitale) inizia con le basi giuste.

Tra i corsi PuntoNet Formazione puoi seguire il corso HTML5, perfetto se vuoi imparare tutti i principali tag e creare pagine web da zero, in modo chiaro e pratico, oppure il corso da webmaster professionista, un percorso completo per diventare autonomo: HTML, CSS, JavaScript e gestione avanzata dei siti web, passo dopo passo.

Ogni sviluppatore ha iniziato con una pagina bianca e un semplice “Hello World”.

Con costanza e la giusta guida, potrai trasformare il codice in creatività, dare forma alle tue idee e costruire il tuo spazio online.

Ogni grande sito è iniziato da un file HTML. Il prossimo potrebbe essere il tuo.

Inizia a trasformare la formazione in opportunità di carriera.

Richiedi subito la prima lezione gratuita!

Prima Lezione in Regalo Footer