Anatomia di una pagina web

Prima di scrivere una riga di HTML, vediamo cosa succede quando digiti un indirizzo nel browser: il browser manda una richiesta al server, il server risponde con un file di testo scritto in HTML, e il browser lo interpreta per disegnare la pagina che vedi.

HTML (HyperText Markup Language) non è un linguaggio di programmazione: non ci sono cicli, condizioni o funzioni. È un linguaggio di markup: descrive la struttura di un documento usando dei tag.

La struttura minima

Ogni pagina HTML parte da questo scheletro:

index.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>La mia prima pagina</title>
</head>
<body>
    <h1>Ciao, mondo!</h1>
</body>
</html>

Vediamo cosa fa ogni riga:

<!DOCTYPE html> dice al browser “questo è un documento HTML5”. Va sempre messo per primo.
<html lang="it"> è il tag radice, contiene tutta la pagina. lang="it" dice al browser (e ai motori di ricerca) che la lingua è l’italiano.
<head> contiene informazioni sulla pagina, che non vengono mostrate direttamente: titolo della scheda del browser, collegamenti a fogli di stile, metadati.
<body> contiene tutto quello che l’utente vede.

Note

In Python l’indentazione è obbligatoria e definisce i blocchi.
In HTML l’indentazione è solo una convenzione per rendere il codice leggibile:
è la coppia di tag di apertura/chiusura (<body> … </body>) a definire dove inizia e finisce un blocco.

Tag di apertura, chiusura e “vuoti”

La maggior parte dei tag va aperta e chiusa:

<p>Questo è un paragrafo.</p>

Alcuni tag invece non contengono nulla e non hanno bisogno di chiusura — si dicono tag vuoti (void elements):

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

Attributi

I tag possono avere attributi, scritti dentro il tag di apertura come coppie nome="valore":

<a href="https://www.adjam.org" title="Il sito del prof">Vai al sito</a>

Qui href dice dove porta il link, title è il testo che appare al passaggio del mouse.

Warning

Gli attributi vanno sempre tra virgolette. <img src=foto.jpg> spesso “funziona” per tolleranza del browser, ma non è HTML valido — evitatelo.

Tag semantici vs generici

HTML mette a disposizione due tag “neutri”, senza significato proprio:

<div> — un contenitore generico di tipo block (va a capo prima e dopo)
<span> — un contenitore generico di tipo inline (non va a capo)

Ma dove possibile è meglio usare tag semantici, che comunicano il significato del contenuto sia al browser sia a chi legge il codice: <h1>…<h6> per i titoli, <p> per i paragrafi, <strong> per il testo importante, <em> per l’enfasi. Nei prossimi capitoli ne vedremo altri (<nav>, <header>, <footer>…), adatti alla struttura della pagina.

Commenti

<!-- Questo è un commento, il browser lo ignora -->

Esercizi

Esercizio w101

Scrivi lo scheletro minimo di una pagina HTML con titolo della scheda "Chi sono" e un unico <h1> con il tuo nome.

Esercizio w102

Nel seguente codice ci sono 3 errori (tag non chiusi, attributi senza virgolette, DOCTYPE scritto male). Trovali e correggili:

da_correggere.html

<!doctype htlm>
<html lang=it>
<head>
    <title>Pagina con errori
</head>
<body>
    <h1>Benvenuto
    <p>Questo paragrafo non si chiude.</body>
</html>

Esercizio w103

Aggiungi un commento HTML sopra il tag <body> che spieghi a cosa serve la pagina.

Keyboard shortcuts