Elementi della pagina HTML

Tag

Gli elementi della pagina, i tag, hanno lo scopo di indicare l’organizzazione della pagina e il suo contenuto. I principali tag html sono i seguenti:

Tag	Significato
<!DOCTYPE html>	intestazione pagina html
<html>	contenitore di pagina che racchiude ogni altro elemento
<head>	intestazione di pagina con metadati
<body>	contenitore della parte visibile della pagina

Un tag può contenere degli attributi, cioè delle coppie nome=”valore” che forniscono informazioni aggiuntive per il tag e sono quindi nella seguente forma:

Gli attributi in alcuni casi sono obbligatori (ad esempio nei tag <script> o <meta>) in altri casi sono facoltativi ma necessari per fornire informazioni, come vedremo nelle lezioni successive.

Head

Nel tag <head> di un documento HTML si inseriscono i metadati della pagina, non direttamente visibili.
Ecco i principali elementi:

<title> → titolo della pagina (compare sulla scheda del browser e nei risultati dei motori di ricerca).
<meta charset="UTF-8"> → definisce la codifica dei caratteri (UTF-8 è lo standard).
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → imposta lo scaling per dispositivi mobili (responsive design).
<meta name="description" content="..."> → descrizione della pagina (usata dai motori di ricerca).
<meta name="keywords" content="..."> (meno usata oggi) → parole chiave per i motori di ricerca.
<meta name="author" content="..."> → autore del documento.
<link rel="stylesheet" href="stile.css"> → collega un foglio di stile CSS esterno.
<link rel="icon" href="favicon.ico"> → definisce l’icona della pagina (favicon).
<script src="script.js"></script> → collega file JavaScript esterni.
<style> ... </style> → definisce stili CSS interni (inline)

Esempio:

<!DOCTYPE html>
<html lang="it">
<head>
  <!-- Impostazioni di base -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Esempio di pagina con HEAD</title>

  <!-- SEO -->
  <meta name="description" content="Questa è una pagina di esempio HTML con un head ottimizzato.">
  <meta name="author" content="Mario Rossi">

  <!-- Icona -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <!-- CSS -->
  <link rel="stylesheet" href="stile.css">

  <!-- JavaScript -->
  <script src="script.js" defer></script>

  <!-- Stili interni opzionali -->
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }
  </style>
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Note:

la favicon è l’icona del sito che compare nel tab del browser è in formato 16×16 ma ancora meglio 32×32 in formato .ico o .png
il CSS è un documento esterno che determina lo stile di pagina. In alternativa o aggiunta si possono usare stili css interni.
il Javascript è un programma che permette di rendere la pagina HTML dinamica
l’ottimizzazione per i motori di ricerca è riportata solo per completezza, è utile per i siti online per una buona ottimizzazione per le ricerche su web
analogamente, non consideriamo per ora i siti responsivi (sia web che mobile)

Body

Nel body è presente la parte visibile della pagina web. Essa contiente una struttura di tag annidati che definisce organizzazione e contenuto della pagina. Possiamo individuare queste categorie di tag:

Struttura: sono tag contenitore che definiscono la struttura della pagina e possono essere annidati uno dentro l’altro. Si ricorda che il layout effettivo è dato dai fogli di stile. Dentro un contenitore può essere inserito del testo oppure uno o più contenitori o entrambi.
Testo: definiscono testo con una organizzazione speciale, come vedremo sotto.
Liste: permettono di creare liste (numerate e non)
Link: definiscono collegamenti ad altri documenti (o a parti diverse dello stesso documento)
Media: definiscono contenuti speciali (immagini audio e video)
Tabelle: definiscono la struttura di tabelle
Form: definiscono dei moduli dove l’utente può inserire dati

Attributi

Ogni tag del body può avere questi attributi opzionali:

id: questo attributo serve per identificare in modo univoco l’elemento nella pagina, per essere poi utilizzabile per link, per l’associazione a classi CSS (che vedremo successivamente) o per essere identificabile tramite linguaggio Javascript (come vedremo nelle lezioni su Javascript).
class: questo attributo permette di associare ad un elemento una classe CSS o per essere identificabile tramite linguaggio JS.
style: questo attributo permette di associare uno o più attributi di stile CSS all’elemento, senza usare classi.

Struttura e testo

HTML prevede diversi tag per definire la struttura di pagina:

<div> → contenitore generico per raggruppare elementi.
<header> → intestazione della pagina o di una sezione.
<nav> → menu di navigazione.
<main> → contenuto principale della pagina.
<section> → sezione tematica della pagina.
<article> → articolo indipendente o contenuto autonomo.
<aside> → contenuti secondari, come sidebar o note laterali.
<footer> → piè di pagina.

Salvo diversamente indicato useremo nei progetti il solo tag <div>.

Sono previsti poi diversi tag di solo testo. Qui indicheremo quelli che useremo:

<h1>…<h6> → titoli di diverse gerarchie.
<p> → paragrafo.
<span> → contenitore inline generico.

In sintesi: h1…h6 sono titoli (in ordine decrescente di importanza), p indica un testo organizzato in paragrafi, mentre span serve per indicare una porzione di testo. Va comunque ricordato che anche div può contenere testo.

Tutti questi contenitori eccetto span sono di tipo block, ovvero vanno a capo, invece span è di tipo inline, ovvero non va a capo.

Qui un esempio:

<body>
  <div id="container-main" class="container">
    <h1>Benvenuti nel mio sito</h1>
    <h2>Sezione introduttiva</h2>
    <p>Questo è un paragrafo di esempio. Puoi evidenziare <span class="highlight">testo importante</span> all'interno di un paragrafo.</p>
    <p>Un altro paragrafo per mostrare l’uso dei tag di testo.</p>
  </div>
</body>

Liste

HTML permette di generare elenchi puntati o numerati con questi tag:

<ul> → lista non ordinata (punti).
<ol> → lista ordinata (numerata).
<li> → elemento di lista.

Esempio:

<body>
  <h2>Lista non ordinata:</h2>
  <ul>
    <li>Banane</li>
    <li>Patate</li>
    <li>Carote</li>
  </ul>

  <h2>Lista ordinata: </h2>
  <ol>
    <li>Seguire la lezione.</li>
    <li>Studiare cipiaceinfo.it</li>
    <li>Fare gli esercizi</li>
  </ol>
</body>

Tabelle

Con questi tag è possibile creare una tabella:

<table> → tabella.
<thead> → intestazione.
<th> → titolo di colonna.
<tbody> → corpo della tabella.
<tr> → riga della tabella.
<td> → cella singola.

Qui una struttura di tabella:

<body>
  <table>
    <thead>
      <tr>
        <th>Nome</th>
        <th>Età</th>
        <th>Città</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mario Rossi</td>
        <td>28</td>
        <td>Roma</td>
      </tr>
      <tr>
        <td>Lucia Bianchi</td>
        <td>34</td>
        <td>Milano</td>
      </tr>
      <tr>
        <td>Giovanni Verdi</td>
        <td>22</td>
        <td>Napoli</td>
      </tr>
    </tbody>
  </table>
</body>

Come si può notare la dimensione della tabella viene calcolata dai tag inseriti.

Link:

Il collegamento ipertestuale è definito da:

<a href="..." target="..."> → è.uno speciale tag che rende cliccabile il suo contenuto.

Il click porta il browser ad aprire una nuova pagina html o un’altra sezione del sito.

Vediamo un esempio:

<h3 id="sezione1">Sezione 1</h3>
<a href="www.google.com">Link a google</a>
<a href="www.google.com" target="_blank">Link a google ma su una nuova pagina.</a>
<a href="#sezione2">Link a sezione 2.</a>

<h3 id="sezione2">2</h3>
  <p>Questa è la sezione 2 della pagina.</p>

Note:

href indica il link da seguire;
target=”_blank” indica di aprire su una nuova pagina (il default è “_self” cioè la stessa pagina)

Media

Qui i tag riferiti a media inseriti in pagina:

<img src="..." alt="..."> → immagine.
<video src="..." type="..."> → video.
<audio src="..." type="..."> → audio.
<source src="..." type"..."> → usato per indicare la sorgente audio o video.

Il tag <img> ha bisogno di un attributo src obbligatorio che indica la URL della risorsa immagine. Invece alt è facoltativo e si usa se il browser non supporta le immagini. Nei tag audio e video src indica la URL della risorsa e type indica il tipo (di solito video/mp4 o audio/mpeg). E’ poi previsto l’attributo facoltativo controls che mostra i controlli.

Vediamo un esempio:

<body>
  <h2>Esempio di Immagine</h2>
  <img src="https://placehold.co/600x400" alt="Immagine di esempio">

  <h2>Esempio di Video</h2>
  <video controls src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Il tuo browser non supporta il video.
  </video>

  <h2>Esempio di Audio</h2>
  <audio controls src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    Il tuo browser non supporta l'audio.
  </audio>
</body>

Form

Le form sono moduli dove l’utente può inserire informazioni. Sono utili quando la pagina è inserita in una applicazione Web (Javascript o lato server) per inviare informazioni.

<form> → modulo.
<input> → campo di input. Ce ne sono diversi.
<textarea> → area di testo.
<button> → pulsante.
<select> → menu a tendina.
<option> → opzione di un <select>.
<label> → etichetta per input.

Vediamoli con un esempio omnicomprensivo.

<body>
  <h2 style="text-align:center;">Modulo di Esempio</h2>

  <form action="#" method="post">

    <!-- Input testo -->
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome">

    <!-- Input password -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" placeholder="Inserisci la password">

    <!-- Input email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="esempio@email.com">

    <!-- Input numero -->
    <label for="eta">Età:</label>
    <input type="number" id="eta" name="eta" min="1" max="120">

    <!-- Input radio -->
    <label>Sesso:</label>
    <input type="radio" id="maschio" name="sesso" value="maschio">
    <label for="maschio">Maschio</label>
    <input type="radio" id="femmina" name="sesso" value="femmina">
    <label for="femmina">Femmina</label>

    <!-- Input checkbox -->
    <label>
      <input type="checkbox" name="newsletter" value="si">
      Iscriviti alla newsletter
    </label>

    <!-- Textarea -->
    <label for="messaggio">Messaggio:</label>
    <textarea id="messaggio" name="messaggio" rows="4" placeholder="Scrivi qui il tuo messaggio"></textarea>

    <!-- Select e option -->
    <label for="citta">Città:</label>
    <select id="citta" name="citta">
      <option value="">Seleziona una città</option>
      <option value="roma">Roma</option>
      <option value="milano">Milano</option>
      <option value="napoli">Napoli</option>
    </select>

    <!-- Pulsante di invio -->
    <button type="submit">Invia</button>
  </form>
</body>

Note:

la form, quando prevede un bottone di submit, provoca il caricamento di una nuova pagina (o la stessa, con “#”) inviando tutti i dati alla nuova pagina.
button può essere anche di tipo “button” in questo caso la pagina non viene ricaricata (si usa in Javascript)
Label for associa una label ad uno specifico input
Gli input possono essere di testo, password, numero, email, radio (valori alternativi), checkbox (selezione multipla)
textarea serve per inserire testi
select è il classico menu a tendina, dove option indica i valori possibili

HTML e qualità del codice

HTML nasce come linguaggio destinato a dare grande diffusione a questa tecnologia, perché l’obiettivo era “democratizzare” la produzione di contenuti e non lasciarla ad una casta di esperti¹.

Così è stato infatti: sul finire degli anni 90 Internet, il Web ed i personal computers connessi hanno avuto una grande diffusione di massa, col risultato che anche un pubblico non di programmatori è stato messo nelle condizioni di creare propri siti web, scrivendo direttamente HTML. All’epoca grazie a questa facilità milioni di persone hanno avuto modo di creare siti web, con un linguaggio e browser che permettevano anche codice di bassa qualità, una specie di “far west”, dove forse troppo era permesso e dove i siti realizzati non rispettavano regole di leggibilità, accessibilità e soprattutto di separazione tra contenuti e grafica. Del resto il linguaggio non era maturo ma pensato per un pubblico generalista, che non era disposto o non aveva tempo per studiare.

Far west significava quindi un insieme di “bad practices” oggi deprecate:

utilizzo di colori sgargianti, sfondi eccessivamente complessi, filetti per separare sezioni, testi troppo grandi o troppo piccoli, ecc;
font poco leggibili e stra abusati (ne è un esempio il caso del “Comic Sans”, il font dei boomer);
le onnipresenti animazioni in Flash un linguaggio introdotto insieme a Javascript che permetteva di creare giochi ed animazioni nella pagina web, con prestazioni spesso deludenti ed enormi problemi di sicurezza;
l’uso di iframe HTML che permettevano di avere due o più pagine html nella stessa pagina web;
l’utilizzo di tag di formattazione del testo e dei contenuti, al posto del CSS.

A partire dai primi anni 2000 la possibilità di dare tutti la possibilità di creare un proprio sito web è stata resa ancora più semplice con applicazioni come i CMS ed i blog, che permettono di pubblicare siti senza scrivere HTML, ad esempio come WordPress o Joomla, che permettono di organizzare i contenuti di un sito graficamente, di scegliere temi e colori, e di concentrarsi quindi solo sui contenuti (un po’ come cipiaceinfo.it).

Nel frattempo HTML si è evoluto (non senza contraddizioni, fino ad HTML 5): sono stati introdotti tag semantici (come article, header, ecc.), i CSS e Javascript si sono evoluti, Flash è stato eliminato, si è cercato di costruire una tecnologia web che mette al centro usabilità (cioè deve essere utilizzabile da utenti inesperti), accessibilità (usabile da utenti con problemi di vista o altre difficoltà), sicurezza e multipiattaforma (per essere utilizzabili su mobile o smart TV).

Tuttavia il far west è in gran parte rimasto e per molti anni: una generazione di programmatori è infatti nata e cresciuta in quel caos primordiale ed ancora oggi prosegue a scrivere siti web con ancora molti di quei difetti concettuali. La cosa non deve stupire: 20 anni sono tanti nel contesto di evoluzione tecnologica, ma non lo sono a livello culturale e di competenze, preconcetti e convinzioni difficili da sradicare. Anche perché il pessimo HTML/Javascript non è che ha smesso di funzionare: i browser sono progettati per far funzionare anche le pagine web di quell’epoca, quindi con tag deprecati ed addirittura codice con errori di sintassi (provare per credere).

Separation of concerns

Ma almeno quando lo si impara da zero è bene imparare HTML nel modo corretto. Per questa ragione, sebbene ancora legali e formalmente permessi, non bisogna usare mai questi tag:

<hr>: il famigerato filetto
<br>: costringe ad andare a capo:
<i>: corsivo
<b>: grassetto
<strong>: un altro tipo di grassetto
<menu>: sostituito da <ul>

Questo perché tutti questi tag danno una formattazione grafica alla pagina Web. Ma deve essere sempre chiaro questo principio:

HTML si occupa di dare struttura logica e contenuti;
CSS: si occupa di “vestire” la pagina con grafica e formattazione;
Javascript: si occupa di animare la pagina e trasformarla in una applicazione.

Ognuno di questi linguaggi fa una cosa ed una soltanto. Questo per molteplici ragioni:

manutenibilità: perché si sa dove mettere mano quando si deve modificare il contenuto o si deve modificare la grafica;
flessibilità: con la stessa pagina web si possono avere più css differenti, uno per il web, uno per lo smartphone, uno per la stampa (ad esempio la versione stampabile di questa pagina ha lo stesso html da un differente CSS);
semplicità e leggibilità: la pagina è più facile da leggere e modificare
separazione delle attività: normalmente in una azienda sono previsti programmatori web che si occupano solo di CSS ed altri che si occupano solo di Javascript.

Conclusioni

HTML è un linguaggio di descrizione della pagina Web che usa i tag per definire struttura e contenuti. I tag possono avere attributi. La pagina è strutturata in due parti: head (per l’intestazione) e body (per la parte visibile). Nel body sono presenti varie categorie di tag: di struttura, di testo, link, media, liste, tabelle e form.

Bisogna infine fare attenzione ad utilizzare buone pratiche, evitare tag di formattazione e lasciare la responsabilità del layout al CSS.

l’obiettivo dei primi visionari che crearono il Web era proprio quelli di dare a tutti la possibilità di condividere conoscenza, superando quindi il modello di informazione e comunicazione da uno a molti costituito proprio dai media tradizionali, come la TV o i giornali. ↩︎

Home

Programmazione

Sviluppo del Software

C/C++

Java

HTML

Javascript

NodeJS

Esercizi di programmazione

Progettazione

Ciclo di vita del Software

Progettazione del software

Tecnologie

Sistemi operativi

Architetture degli elaboratori

Tecnologie Web

Intelligenza Artificiale

Esercizi di Tecnologie

Strumenti

Progetti Web

Strumenti web

Strumenti sviluppo

Introduzione all'Informatica

Elementi della pagina HTML

Tag

Head

Body

Struttura e testo

Liste

Tabelle

Link:

Media

Form

HTML e qualità del codice

Separation of concerns

Conclusioni