Chiudi menu
Mostra/Nascondi menu
< Home
Stampa

Elementi della pagina HTML

Sommario

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:

TagSignificato
<!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:

<tag attributo1=”valore1″ attributo2=”valore2″ …> </tag>

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.

Struttura della pagina

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

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>.

Si ricorda che ogni tag che può stare dentro body, può stare dentro un div.

Testo

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>

Benvenuti nel mio sito

Sezione introduttiva

Questo è un paragrafo di esempio. Puoi evidenziare testo importante all’interno di un paragrafo.

Un altro paragrafo per mostrare l’uso dei tag di testo.

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>

Lista non ordinata:

  • Banane
  • Patate
  • Carote

Lista ordinata:

  1. Seguire la lezione.
  2. Studiare cipiaceinfo.it
  3. Fare gli esercizi

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>
Nome Età Città
Mario Rossi 28 Roma
Lucia Bianchi 34 Milano
Giovanni Verdi 22 Napoli