Impara le basi dell'HTML con questa guida completa per principianti. Scopri cos'è l'HTML, come funziona e come iniziare a creare le tue prime pagine web.
L'HTML (HyperText Markup Language) è il linguaggio fondamentale del web. Se hai mai sognato di creare il tuo sito web o di intraprendere una carriera nello sviluppo web, comprendere l'HTML è il primo passo essenziale. Questa guida completa ti accompagnerà attraverso tutto ciò che devi sapere per iniziare il tuo viaggio nell'HTML.
L'HTML, acronimo di HyperText Markup Language, è il linguaggio di markup standard utilizzato per creare pagine web. Non è un linguaggio di programmazione nel senso tradizionale, ma piuttosto un linguaggio di markup che definisce la struttura e il contenuto delle pagine web utilizzando una serie di elementi chiamati tag.
L'HTML è la spina dorsale di ogni sito web su Internet. Senza HTML, non esisterebbero pagine web come le conosciamo oggi. Ecco perché è cruciale:
L'HTML è stato creato da Tim Berners-Lee nel 1990 come parte del progetto World Wide Web. Da allora, ha subito diverse evoluzioni:
HTML5 è attualmente lo standard più utilizzato e include molte funzionalità moderne come elementi semantici, supporto multimediale nativo e API avanzate.
L'HTML utilizza un sistema di tag per definire diversi elementi di una pagina web. Questi tag dicono al browser come visualizzare il contenuto.
<tagname>Contenuto</tagname>
La maggior parte dei tag HTML ha un tag di apertura e uno di chiusura:
<tagname></tagname> (nota la barra obliqua)<h1>Questo è un Titolo</h1>
<p>Questo è un paragrafo di testo.</p>
Ogni documento HTML ha una struttura standard che include diversi elementi essenziali:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titolo della Pagina</title>
</head>
<body>
<h1>Benvenuto nel Mio Sito Web</h1>
<p>Questo è il contenuto della mia pagina.</p>
</body>
</html>
<!DOCTYPE html>: Dichiara che questo è un documento HTML5<html>: L'elemento radice che contiene tutto il contenuto<head>: Contiene metadati sulla pagina (non visibili agli utenti)<body>: Contiene tutto il contenuto visibile della pagina<h1>Titolo Principale</h1>
<h2>Sottotitolo</h2>
<h3>Titolo di Terzo Livello</h3>
<h4>Titolo di Quarto Livello</h4>
<h5>Titolo di Quinto Livello</h5>
<h6>Titolo di Sesto Livello</h6>
<p>Questo è un paragrafo di testo normale.</p>
<a href="https://www.esempio.com">Clicca qui per visitare Esempio.com</a>
<img src="immagine.jpg" alt="Descrizione dell'immagine">
<!-- Lista non ordinata -->
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
<!-- Lista ordinata -->
<ol>
<li>Primo passo</li>
<li>Secondo passo</li>
<li>Terzo passo</li>
</ol>
Gli attributi forniscono informazioni aggiuntive sui tag HTML. Sono sempre specificati nel tag di apertura e di solito sono coppie nome/valore.
<tagname attributo="valore">contenuto</tagname>
id: Identificatore unico per un elemento
<div id="intestazione">Contenuto</div>
class: Classe CSS per lo styling
<p class="testo-importante">Testo importante</p>
src: Sorgente per immagini e altri media
<img src="foto.jpg" alt="Una bella foto">
href: Destinazione per i collegamenti
<a href="https://www.google.com">Vai a Google</a>
alt: Testo alternativo per le immagini
<img src="logo.png" alt="Logo dell'azienda">
Seguiamo un esempio pratico per creare la tua prima pagina web:
<!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 Web</title>
</head>
<body>
</body>
</html>
<body>
<header>
<h1>Benvenuto nel Mio Sito Web</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Chi Sono</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Home</h2>
<p>Questa è la mia prima pagina web creata con HTML!</p>
</section>
<section id="about">
<h2>Chi Sono</h2>
<p>Sono uno sviluppatore web principiante che sta imparando l'HTML.</p>
</section>
<section id="contact">
<h2>Contatti</h2>
<p>Puoi contattarmi via email: <a href="mailto:tuaemail@esempio.com">tuaemail@esempio.com</a></p>
</section>
</main>
<footer>
<p>© 2025 Il Mio Sito Web. Tutti i diritti riservati.</p>
</footer>
</body>
HTML5 ha introdotto elementi semantici che rendono il codice più significativo e accessibile:
<header>Intestazione della pagina</header>
<nav>Menu di navigazione</nav>
<main>Contenuto principale</main>
<section>Sezione di contenuto</section>
<article>Articolo indipendente</article>
<aside>Contenuto laterale</aside>
<footer>Piè di pagina</footer>
Per scrivere HTML, hai bisogno di un editor di testo. Ecco alcune opzioni:
Gratuiti:
A Pagamento:
Testa sempre le tue pagine web in diversi browser:
Tutti i browser moderni includono strumenti di sviluppo che ti aiutano a:
<!-- Buono -->
<article>
<h2>Titolo dell'Articolo</h2>
<p>Contenuto dell'articolo...</p>
</article>
<!-- Evita -->
<div>
<div>Titolo dell'Articolo</div>
<div>Contenuto dell'articolo...</div>
</div>
<!-- Corretto -->
<p>Questo è un paragrafo.</p>
<!-- Scorretto -->
<p>Questo è un paragrafo.
<!DOCTYPE html>
<html>
<head>
<title>Pagina Web</title>
</head>
<body>
<h1>Titolo</h1>
<p>Paragrafo</p>
</body>
</html>
<img src="foto.jpg" alt="Descrizione significativa della foto">
Usa il validatore W3C per assicurarti che il tuo HTML sia corretto: https://validator.w3.org/
<!-- Scorretto -->
<p>Primo paragrafo
<p>Secondo paragrafo
<!-- Corretto -->
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
<!-- Scorretto -->
<p><strong>Testo in grassetto</p></strong>
<!-- Corretto -->
<p><strong>Testo in grassetto</strong></p>
<!-- Scorretto -->
<img src=immagine.jpg alt=Mia immagine>
<!-- Corretto -->
<img src="immagine.jpg" alt="Mia immagine">
Evita tag obsoleti come <font>, <center>, <b> (usa <strong> invece).
Impara più tag HTML e i loro usi specifici:
I CSS (Cascading Style Sheets) ti permettono di stilizzare le tue pagine HTML:
JavaScript aggiunge interattività alle tue pagine web:
Una volta padroneggiato l'HTML di base, esplora:
Crea una semplice pagina personale con:
Costruisci un blog di base con:
Sviluppa un portfolio per mostrare i tuoi progetti:
L'HTML è il punto di partenza perfetto per chiunque voglia entrare nel mondo dello sviluppo web. Anche se può sembrare intimidatorio all'inizio, con pratica e dedizione, diventerai presto competente nella creazione di pagine web strutturate e semantiche.
Ricorda che l'apprendimento dell'HTML è un processo graduale. Non cercare di imparare tutto in una volta. Inizia con i concetti di base, pratica regolarmente e costruisci gradualmente le tue competenze. Ogni sviluppatore web esperto è iniziato esattamente dove sei tu ora.
Il web è in costante evoluzione, e l'HTML continua a crescere e migliorare. Rimanendo curioso e continuando a imparare, sarai sempre al passo con le ultime tendenze e tecnologie.
Inizia oggi stesso creando la tua prima pagina HTML. Non deve essere perfetta - l'importante è iniziare. Con ogni riga di codice che scrivi, ti avvicini sempre di più a diventare uno sviluppatore web competente.
Buona fortuna nel tuo viaggio nell'HTML e nello sviluppo web!