032.2 Lezione 1

Certificazione:

Web Development Essentials

Versione:

1.0

Argomento:

032 Marcatura di un Documento HTML

Obiettivo:

032.2 Semantica HTML e Gerarchia del Documento

Lezione:

1 di 1

Introduzione

Nella lezione precedente abbiamo imparato che l’HTML è un linguaggio di markup che può descrivere semanticamente il contenuto di un sito web. Un documento HTML contiene un cosiddetto skeleton che consiste degli elementi HTML: <html>, <head>, e <body>. Mentre l’elemento <head> descrive un blocco di informazioni meta per il documento HTML che sarà invisibile al visitatore del sito web, l’elemento <body> può contenere molti altri elementi per definire la struttura e il contenuto del documento HTML.

In questa lezione, ci occuperemo di formattazione del testo, elementi HTML semantici fondamentali e loro scopo, e struttura di un documento HTML.

Note	Tutti gli esempi di codice successivi si trovano all’interno dell’elemento `<body>` di un documento HTML che contiene la struttura (skeleton) completa. Per una mligliore leggibilità, non mostreremo l’HTML completo in ogni esempio di questa lezione.

Il Testo

Nell’HTML, nessun blocco di testo dovrebbe essere al di fuori di un elemento. Anche un breve paragrafo dovrebbe essere compreso nei tag HTML <p>, che è il nome breve di paragrafo.

<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>

Aperto in un browser web, questo codice HTML produce il risultato mostrato in Figure 1.

Figure 1. Rappresentazione del browser web del codice HTML che mostra due paragrafi di testo. Il primo paragrafo è molto breve. Il secondo paragrafo è un po' più lungo tanto da creare una seconda riga.

Per default i browser web aggiungono una spaziatura prima e dopo gli elementi <p> per migliorare la leggibilità. Per questa ragione, <p> è chiamato un elemento di blocco.

Le Intestazioni

L’HTML definisce sei livelli di intestazioni per descrivere e strutturare il contenuto di un documento HTML. Queste intestazioni sono contrassegnate dai tag HTML <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.

<h1>Livello di intestazione 1 per identificare univocamente la pagina</h1>
<h2>Livello di intestazione 2</h2>
<h3>Livello di intestazione 3</h3>
<h4>Livello di intestazione 4</h4>
<h5>Livello di intestazione 5</h5>
<h6>Livello di intestazione 6</h6>

Un browser web rende questo codice HTML come mostrato in Figure 2.

Figure 2. Rappresentazione del browser web del codice HTML che mostra diversi livelli di intestazioni in un documento HTML. La gerarchia delle intestazioni è indicata attraverso la dimensione del testo.

Se hai familiarità con i word processor come LibreOffice o Microsoft Word, potresti notare alcune somiglianze nel modo in cui un documento HTML usi diversi livelli di intestazione e come vengono resi nel browser web. Per impostazione predefinita, l’HTML usa le dimensioni per indicare la gerarchia e l’importanza dei titoli e aggiunge spazio prima e dopo ogni titolo per separarlo visivamente dal contenuto.

Un’intestazione che usa l’elemento <h1> è in cima alla gerarchia e quindi è considerata l’intestazione più importante che identifica il contenuto della pagina. È paragonabile all’elemento <title> discusso nella lezione precedente, ma all’interno del contenuto del documento HTML. Gli elementi di intestazione successivi possono essere usati per strutturare ulteriormente il contenuto. Assicurati di non saltare i livelli di intestazione in mezzo. La gerarchia del documento dovrebbe iniziare con <h1>, continuare con <h2>, poi <h3> e così via. Non c’è bisogno di usare ogni elemento di intestazione fino a <h6> se il tuo contenuto non lo richiede.

Note

Le intestazioni sono strumenti importanti per strutturare un documento HTML, sia semanticamente sia visivamente. Comunque, i titoli non dovrebbero mai essere usati per aumentare la dimensione di un testo strutturalmente non importante. Per lo stesso principio, non si dovrebbe rendere un breve paragrafo in grassetto o in corsivo per farlo sembrare un titolo; usate i tag di intestazione per contrassegnare i titoli.

Cominciamo a creare il documento HTML della lista della spesa definendo il suo contorno. Creeremo un elemento <h1> per contenere il titolo della pagina, in questo caso Garden Party, seguito da brevi informazioni avvolte in un elemento <p>. Inoltre, usiamo due elementi <h2> per introdurre le due sezioni di contenuto Agenda e Please bring.

<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>

Aperto in un browser web, questo codice HTML produce il risultato mostrato in Figure 3.

Figure 3. rappresentazione per browser web del codice HTML che mostra un semplice documento di esempio che descrive un invito a una festa in giardino, con due intestazioni per l’ordine del giorno e la lista delle cose da portare.

Interruzioni di Linea

A volte può essere necessario generare un'interruzione di linea senza inserire un altro elemento <p> o qualsiasi altro elemento di blocco simile. In questi casi, puoi usare l’elemento di chiusura automatica <br>. Nota che dovrebbe essere usato solo per inserire interruzioni di riga che appartengono al contenuto, come nel caso di poesie, testi di canzoni o indirizzi. Se il contenuto è separato dal significato, è meglio usare invece un elemento <p>.

Per esempio, potremmo dividere il testo del paragrafo informativo del nostro esempio precedente come segue:

<p>
  Invitation to John's garden party.<br>
  Saturday, next week.
</p>

In un browser web, questo codice HTML produce il risultato mostrato in Figure 4.

Figure 4. Rappresentazione del browser web del codice HTML che mostra un semplice documento di esempio con un’interruzione di linea forzata.

Linee Orizzontali

L’elemento <hr> definisce una linea orizzontale, chiamata anche regolo orizzontale. Per impostazione predefinita, abbraccia l’intera larghezza del suo elemento padre. L’elemento <hr> può aiutarti a definire un cambiamento tematico nel contenuto o a separare le sezioni del documento. L’elemento è auto-chiudente e quindi non ha un tag di chiusura.

Per il nostro esempio, potremmo separare i due titoli:

<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>

Figure 5 mostra il risultato di questo codice.

Figure 5. Rappresentazione del browser web di un semplice documento di esempio che descrive una lista della spesa con due sezioni separate da una linea orizzontale.

Le Liste in HTML

In HTML, si possono definire tre tipi di liste:

Liste ordinate: dove l’ordine degli elementi della lista è importante
Liste non ordinate: dove l’ordine degli elementi della lista non è particolarmente importante
Elenchi di descrizione: per descrivere più da vicino alcuni termini

Ognuno dei tipi contiene un numero qualsiasi di liste. Descriveremo ogni tipo di lista.

Liste Ordinate

Una lista ordinata in HTML, denotata usando l’elemento HTML <ol>, è una collezione di un qualsiasi numero di elementi della lista. Ciò che rende speciale questo elemento è che l’ordine dei suoi elementi di lista è rilevante. Per enfatizzare questo, i browser web visualizzano i numeri prima degli elementi dell’elenco figlio per default.

Note	Gli elementi `<li>` sono gli unici elementi figli validi all’interno di un elemento `<ol>`.

Per il nostro esempio, possiamo compilare l’agenda della festa in giardino usando un elemento <ol> con il seguente codice:

<h2>Agenda</h2>
<ol>
  <li>Welcome</li>
  <li>Barbecue</li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

In un browser web, questo codice HTML produce il risultato mostrato in Figure 6.

Figure 6. Rappresentazione per browser web di un semplice documento di esempio contenente un’intestazione di secondo livello seguita da una lista ordinata con quattro voci che descrivono l’agenda di una festa in giardino.

Opzioni

Come puoi vedere in questo esempio, le voci della lista sono numerate con numeri decimali che iniziano da 1 per impostazione predefinita. Tuttavia, puoi cambiare questo comportamento specificando l’attributo type del tag <ol>. I valori validi per questo attributo sono 1 per i numeri decimali, A per le lettere maiuscole, a per le lettere minuscole, I per i numeri romani maiuscoli, e i per i numeri romani minuscoli.

Se vuoi, puoi anche definire il valore iniziale usando l’attributo start del tag <ol>. L’attributo start prende sempre un valore numerico decimale, anche se l’attributo type imposta un diverso tipo di numerazione.

Per esempio, potremmo modificare la lista ordinata dell’esempio precedente in modo che le voci della lista siano precedute da lettere maiuscole, iniziando con la lettera C, come mostrato nell’esempio seguente:

<h2>Agenda</h2>
<ol type="A" start="3">
  <li>Welcome</li>
  <li>Barbecue</li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

All’interno di un browser web, questo codice HTML è reso come Figure 7.

Figure 7. Il browser web mostra un semplice documento di esempio contenente un’intestazione di secondo livello seguita da una lista ordinata con elementi che sono preceduti da lettere maiuscole che iniziano con la lettera C.

L’ordine delle voci della lista può anche essere invertito usando l’attributo reversed senza un valore.

Note	In una lista ordinata, puoi anche impostare il valore iniziale di uno specifico elemento della lista usando l’attributo `value` del tag `<li>`. Gli elementi della lista che seguono aumenteranno a partire da quel numero. L’attributo `value` prende sempre un valore numerico decimale.

Liste non Ordinate

Una lista non ordinata contiene una serie di elementi della lista che, a differenza di quelli di una lista ordinata, non hanno un ordine o una sequenza speciale. L’elemento HTML per questa lista è <ul>. Ancora una volta, <li> è l’elemento HTML per marcare gli elementi della lista.

Note	Gli elementi `<li>` sono gli unici elementi figli validi all’interno di un elemento `<ul>`.

Per il nostro sito web di esempio, possiamo usare la lista non ordinata per elencare gli oggetti che gli ospiti devono portare alla festa. Possiamo ottenerlo con il seguente codice HTML:

<h2>Please bring</h2>
<ul>
  <li>Salad</li>
  <li>Drinks</li>
  <li>Bread</li>
  <li>Snacks</li>
  <li>Desserts</li>
</ul>

All’interno di un browser web, questo codice HTML produce la visualizzazione mostrata in Figure 8.

Figure 8. Visualizzazione per browser web di un semplice documento contenente un’intestazione di secondo livello seguita da una lista non ordinata con voci di lista riguardanti gli alimenti che gli ospiti sono invitati a portare alla festa in giardino.

Per impostazione predefinita, ogni elemento della lista è rappresentato da un pallino. Puoi cambiare il suo aspetto usando i CSS, che saranno discussi nelle lezioni successive.

Liste Annidate

Le liste possono essere annidate dentro altre liste, come le liste ordinate dentro liste non ordinate e viceversa. Per ottenere questo, la lista annidata deve essere parte di un elemento di lista <li>, perché <li> è l’unico elemento figlio valido di liste non ordinate e ordinate. Quando si annida, fai attenzione a non sovrapporre i tag HTML.

Per il nostro esempio, potremmo aggiungere alcune informazioni dell’agenda che abbiamo creato prima, come mostrato nel seguente esempio:

<h2>Agenda</h2>
<ol type="A" start="3">
  <li>Welcome</li>
  <li>
    Barbecue
    <ul>
      <li>Vegetables</li>
      <li>Meat</li>
      <li>Burgers, including vegetarian options</li>
    </ul>
  </li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

Un browser web visualizza il codice come mostrato in Figure 9.

Figure 9. Rappresentazione per il browser web del codice HTML che mostra una lista non ordinata annidata dentro una lista ordinata, per rappresentare l’ordine del giorno di una festa in giardino.

Si potrebbe andare anche oltre e annidare più livelli in profondità. Teoricamente, non c’è limite a quante liste puoi annidare. Quando fai questo, però, considera la leggibilità per i tuoi visitatori.

Liste di Descrizione

Una lista di descrizione è definita usando l’elemento <dl> e rappresenta un dizionario di chiavi e valori. La chiave è un termine o un nome che vuoi descrivere, e il valore è la descrizione. Le liste di descrizione possono variare da semplici coppie chiave-valore a definizioni estese.

Una chiave (o termine) è definita usando l’elemento <dt>, mentre la sua descrizione è definita usando l’elemento <dd>.

Un esempio per una tale lista di descrizione potrebbe essere una lista di frutti esotici che ne spiega le caratteristiche.

<h3>Exotic Fruits</h3>
<dl>
  <dt>Banana</dt>
  <dd>
    A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
    may also have a soft green color when underripe and get brown spots when
    overripe.
  </dd>

  <dt>Kiwi</dt>
  <dd>
    A small, oval fruit with green flesh, black seeds, and a brown, hairy
    skin.
  </dd>

  <dt>Mango</dt>
  <dd>
    A fruit larger than a fist, with a green skin, orange flesh, and one big
    seed. The skin may have spots ranging from green to yellow or red.
  </dd>
</dl>

In un browser web, questo produce il risultato mostrato in Figure 10.

Figure 10. Un esempio di una lista descrittiva HTML che utilizza frutti esotici. La lista descrive l’aspetto di tre diversi frutti esotici.

Note	A differenza delle liste ordinate e non ordinate, in una lista di descrizione, qualsiasi elemento HTML è valido come figlio diretto. Questo ti permette di raggruppare elementi e stilizzarli altrove usando i CSS.

Formattazione del Testo Inline

In HTML, si possono usare elementi di formattazione per cambiare l’aspetto del testo. Questi elementi possono essere categorizzati come elementi di presentazione o elementi di frase.

Elementi di Presentazione

Gli elementi di presentazione di base cambiano il carattere o l’aspetto del testo; questi sono <b>, <i>, <u> e <tt>. Questi elementi erano originariamente definiti prima che i CSS permettessero di rendere il testo in grassetto, corsivo, ecc. Ora ci sono di solito modi migliori per alterare l’aspetto del testo, ma è possibile ancora vederli utilizzati.

Testo Grassetto

Per rendere il testo in grassetto, puoi inserirlo all’interno dell’elemento <b> come illustrato nel seguente esempio. Il risultato appare in Figure 11.

This <b>word</b> is bold.

Figure 11. Il tag <b> è usato per rendere il testo in grassetto.

Secondo la specifica HTML5, l’elemento <b> dovrebbe essere usato solo quando non ci sono tag più appropriati. L’elemento che produce lo stesso risultato visivo, ma aggiunge importanza semantica al testo marcato, è <strong>.

Testo Corsivo

Per rendere il testo in corsivo, puoi inserirlo all’interno dell’elemento <i> come illustrato nell’esempio seguente. Il risultato appare in Figure 12.

This <i>word</i> is in italics.

Figure 12. Il tag <i> è usato per rendere il testo in corsivo.

Secondo la specifica HTML 5, l’elemento <i> dovrebbe essere usato solo quando non ci sono tag più appropriati.

Testo Sottolineato

Per sottolineare il testo, puoi inserirlo all’interno dell’elemento <u> come illustrato nel seguente esempio. Il risultato appare in Figure 13.

This <u>word</u> is underlined.

Figure 13. Il tag <u> è usato per sottolineare il testo.

Secondo la specifica HTML 5, l’elemento <u> dovrebbe essere usato solo quando non ci sono modi migliori per sottolineare il testo. I CSS forniscono un’alternativa moderna.

Font a Larghezza Fissa o Monospaziato

Per visualizzare il testo in un font monospaziato (a larghezza fissa), spesso usato per visualizzare il codice del computer, puoi usare l’elemento <tt> come illustrato nel seguente esempio. Il risultato appare in Figure 14.

This <tt>word</tt> is in fixed-width font.

Figure 14. Il tag <tt> è usato per visualizzare il testo in un font a larghezza fissa.

Il tag <tt> non è supportato in HTML5. I browser web lo rendono ancora come previsto. Comunque, dovresti usare tag più appropriati, che includono <code>, <kbd>, <var>, e <samp>.

Elementi di Frase

Gli elementi di frase non solo cambiano l’aspetto del testo, ma aggiungono anche importanza semantica a una parola o frase. Usandoli, si può enfatizzare una parola o marcarla come importante. Questi elementi, al contrario di presentazione, sono riconosciuti dagli screen reader, il che rende il testo più accessibile ai visitatori ipovedenti e permette ai motori di ricerca di leggere e valutare meglio il contenuto della pagina. Gli elementi di frase che usiamo in questa lezione sono <em>, <strong>, e <code>.

Testo Enfatizzato

Per enfatizzare il testo, puoi inserirlo all’interno dell’elemento <em> come illustrato nel seguente esempio:

This <em>word</em> is emphasized.

Figure 15. Il tag <em> è usato per enfatizzare il testo.

Come puoi vedere, i browser web visualizzano <em> allo stesso modo di <i>, ma <em> aggiunge importanza semantica come elemento di frase, il che migliora l’accessibilità per i visitatori ipovedenti.

Testo Rafforzato

Per marcare il testo come importante, puoi inserirlo dentro l’elemento <strong> come illustrato nell’esempio seguente. Il risultato appare in Figure 16.

This <strong>word</strong> is important.

Figure 16. Il tag <strong> è usato per marcare il testo come importante.

Come puoi vedere, i browser web visualizzano <strong> allo stesso modo di <b>, ma <strong> aggiunge importanza semantica come elemento di frase, il che migliora l’accessibilità per i visitatori ipovedenti.

Codice Informatico

Per inserire un pezzo di codice informatico, puoi inserirlo all’interno dell’elemento <code> come illustrato nell’esempio seguente. Il risultato appare in Figure 17.

The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.

Figure 17. Il tag <code> è usato per inserire un pezzo di codice informatico.

Testo Marcato

Per evidenziare il testo con uno sfondo giallo, simile allo stile di un evidenziatore, puoi usare l’elemento <mark> come illustrato nel seguente esempio. Il risultato appare in Figure 18.

This <mark>word</mark> is highlighted.

Figure 18. Il tag <mark> è usato per evidenziare il testo con uno sfondo giallo.

Formattare il Testo della Nostra Lista della Spesa in HTML

Basandoci sui nostri esempi precedenti, inseriamo alcuni elementi di frase per cambiare l’aspetto del testo e allo stesso tempo aggiungere importanza semantica. Il risultato appare in Figure 19.

<h1>Garden Party</h1>
<p>
  Invitation to <strong>John's garden party</strong>.<br>
  <strong>Saturday, next week.</strong>
</p>

<h2>Agenda</h2>
<ol>
  <li>Welcome</li>
  <li>
    Barbecue
    <ul>
      <li><em>Vegetables</em></li>
      <li><em>Meat</em></li>
      <li><em>Burgers</em>, including vegetarian options</li>
    </ul>
  </li>
  <li>Dessert</li>
  <li><mark>Fireworks</mark></li>
</ol>

<hr>

<h2>Please bring</h2>
<ul>
  <li>Salad</li>
  <li>Drinks</li>
  <li>Bread</li>
  <li>Snacks</li>
  <li>Desserts</li>
</ul>

Figure 19. La pagina HTML con alcuni elementi di formattazione.

In questo documento HTML di esempio, le informazioni più importanti riguardanti la festa in giardino sono marcate come importanti usando l’elemento <strong>. I cibi che sono disponibili per il barbecue sono enfatizzati usando l’elemento <em>. I fuochi d’artificio sono semplicemente evidenziati usando l’elemento <mark>.

Come esercizio, puoi provare a formattare altre parti di testo usando anche gli altri elementi di formattazione.

Testo Preformattato

Nella maggior parte degli elementi HTML, lo spazio bianco è solitamente ridotto a un singolo spazio o addirittura ignorato del tutto. Tuttavia, c’è un elemento HTML chiamato <pre> che ti permette di definire il cosiddetto testo preformattato. Lo spazio bianco nel contenuto di questo elemento, inclusi gli spazi e le interruzioni di riga, viene conservato e reso nel browser web. Inoltre, il testo viene visualizzato in un font a larghezza fissa, simile all’elemento <code>.

<pre>
field() {
  shift $1 ; echo $1
}
</pre>

Figure 20. Rappresentazione sul browser web del codice HTML che illustra come l’elemento HTML <pre> conserva lo spazio bianco.

Raggruppare gli Elementi

Per convenzione, gli elementi HTML sono divisi in due categorie:

Elementi Block-Level: Questi appaiono su una nuova linea e occupano l’intera larghezza disponibile. Esempi di elementi block-level che abbiamo già discusso sono <p>, <ol>, e <h2>.
Elementi Inline-Level: Questi appaiono nella stessa riga degli altri elementi e del testo, occupando solo lo spazio richiesto dal loro contenuto. Esempi di elementi di inline-level sono <strong>, <em>, e <i>.

Note	HTML5 ha introdotto categorie di elementi più accurate e precise, cercando di evitare la confusione con i box CSS block e inline. Per semplicità, ci atterremo qui alla suddivisione convenzionale in elementi a blocchi e in linea.

Gli elementi fondamentali per raggruppare più elementi insieme sono gli elementi <div> e <span>.

L’elemento <div> è un contenitore a livello di blocco per altri elementi HTML e non aggiunge valore semantico da solo. Puoi usare questo elemento per dividere un documento HTML in sezioni e strutturare il tuo contenuto, sia per la leggibilità del codice sia per applicare stili CSS a un gruppo di elementi, come imparerai in una lezione successiva.

Per impostazione predefinita, i browser web inseriscono sempre un’interruzione di riga prima e dopo ogni elemento <div> in modo che ognuno venga visualizzato sulla propria riga.

Al contrario, l’elemento <span> è usato come contenitore per il testo HTML ed è generalmente usato per raggruppare altri elementi in linea al fine di applicare stili tramite CSS a una porzione più piccola di testo.

L’elemento <span> si comporta proprio come il testo normale e non inizia su una nuova riga. È quindi un elemento inline.

L’esempio seguente confronta la rappresentazione visiva dell’elemento semantico <p> e degli elementi di raggruppamento <div> e <span>:

<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>

Un browser web visualizza questo codice come mostrato in Figure 21.

Figure 21. Rappresentazione del browser web di un documento di prova che illustra le differenze tra gli elementi paragraph, div e span in HTML.

Abbiamo già visto che per default, il browser web aggiunge una spaziatura prima e dopo gli elementi <p>. Questa spaziatura non viene applicata a nessuno dei due elementi di raggruppamento <div> e <span>. Tuttavia, gli elementi <div> sono formattati come blocchi propri, mentre il testo negli elementi <span> è mostrato nella stessa riga.

Struttura della Pagina HTML

Abbiamo discusso come usare gli elementi HTML per descrivere semanticamente il contenuto di una pagina web: in altre parole, per trasmettere significato e contesto al testo. Un altro gruppo di elementi è progettato allo scopo di descrivere la struttura semantica di una pagina web, un’espressione o la sua struttura. Questi elementi sono elementi a blocchi, cioè si comportano visivamente in modo simile a un elemento <div>. Il loro scopo è quello di definire la struttura semantica di una pagina web specificando aree ben definite come intestazioni, piè di pagina e il contenuto principale della pagina. Questi elementi permettono il raggruppamento semantico del contenuto in modo che possa essere compreso anche da un computer, compresi i motori di ricerca e gli screen reader.

L’Elemento `<header>`

L’elemento <header> contiene informazioni introduttive all’elemento semantico circostante in un documento HTML. Un’intestazione è diversa da un titolo, ma un’intestazione spesso include un elemento di titolo (<h1>, … , <h6>).

In pratica, questo elemento è usato più spesso per rappresentare l’intestazione della pagina, come un banner con un logo. Può anche essere usato per introdurre il contenuto di uno qualsiasi dei seguenti elementi: <body>, <section>, <article>, <nav>, o <aside>.

Un documento può avere più elementi <header>, ma un elemento <header> non può essere annidato dentro un altro elemento <header>. Né un elemento <footer> può essere usato all’interno di un <header>.

Per esempio, per aggiungere un’intestazione di pagina al nostro documento di test, possiamo fare quanto segue:

<header>
  <h1>Garden Party</h1>
</header>

Non ci saranno cambiamenti visibili al documento HTML, poiché <h1> (come tutti gli altri elementi di intestazione) è un elemento a livello di blocco senza altre proprietà visive.

L’Elemento di Contenuto `<main>`

L’elemento <main> è un contenitore per la parte centrale di una pagina web. Non ci deve essere più di un elemento <main> in un documento HTML.

Nel nostro documento d’esempio, tutto il codice HTML che abbiamo scritto finora verrebbe messo dentro l’elemento <main>.

<main>
  <header>
    <h1>Garden Party</h1>
  </header>
  <p>
    Invitation to <strong>John's garden party</strong>.<br>
    <strong>Saturday, next week.</strong>
  </p>

  <h2>Agenda</h2>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>

  <hr>

  <h2>Please bring</h2>
  <ul>
    <li>Salad</li>
    <li>Drinks</li>
    <li>Bread</li>
    <li>Snacks</li>
    <li>Desserts</li>
  </ul>
</main>

Come l’elemento <header>, l’elemento <main> non causa alcun cambiamento visivo nel nostro esempio.

L’Elemento `<footer>`

L’elemento <footer> contiene note a piè di pagina, per esempio informazioni sull’autore, informazioni di contatto, o documenti correlati, per il suo elemento semantico circostante, per esempio <section>, <nav>, o <aside>. Un documento può avere più elementi <footer> che permettono di descrivere meglio gli elementi semantici. Comunque, un elemento <footer> non può essere annidato dentro un altro elemento <footer>, né un elemento <header> può essere usato dentro un <footer>.

Per il nostro esempio possiamo aggiungere informazioni di contatto (John) come mostrato nel seguente esempio.

<footer>
  <p>John Doe</p>
  <p>john.doe@example.com</p>
</footer>

L’Elemento `<nav>`

L’elemento <nav> descrive una rilevante unità di navigazione, come un menu, che contiene una serie di collegamenti ipertestuali.

Note	Non tutti i collegamenti ipertestuali devono essere contenuti in un elemento `<nav>`. È utile quando si elenca un gruppo di link.

Poiché i collegamenti ipertestuali non sono ancora stati trattati, l’elemento di navigazione non sarà incluso nell’esempio di questa lezione.

L’Elemento `<aside>`

L’elemento <aside> è un contenitore per ciò che non è necessario all’interno dell’ordine del contenuto principale della pagina, ma è di solito indirettamente collegato o supplementare. Questo elemento è spesso usato per barre laterali che mostrano informazioni secondarie, come un glossario.

Per il nostro esempio, possiamo aggiungere informazioni sull’indirizzo e sul viaggio, che sono solo indirettamente collegate al resto del contenuto, usando l’elemento <aside>.

<aside>
  <p>
    10, Main Street<br>
    Newville
  </p>
  <p>Parking spaces available.</p>
</aside>

L’Elemento `<section>`

L’elemento <section> definisce una sezione logica in un documento che è parte dell’elemento semantico circostante, ma non funzionerebbe come contenuto autonomo, come un capitolo.

Nel nostro documento di esempio, possiamo inserire le sezioni di contenuto per l’agenda e portare le sezioni di elenco come mostrato nel seguente esempio:

<section>
  <header>
    <h2>Agenda</h2>
  </header>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>
</section>

<hr>

<section>
  <header>
    <h2>Please bring</h2>
  </header>
  <ul>
    <li>Salad</li>
    <li>Drinks</li>
    <li>Bread</li>
    <li>Snacks</li>
    <li>Desserts</li>
  </ul>
</section>

Questo esempio aggiunge anche ulteriori elementi <header> all’interno delle sezioni, in modo che ogni sezione sia all’interno del proprio elemento <header>.

L’Elemento `<article>`

L’elemento <article> definisce un contenuto indipendente e autonomo che ha senso da solo senza il resto della pagina. Il suo contenuto è potenzialmente ridistribuibile o riutilizzabile in un altro contesto. Esempi tipici o materiale appropriato per un elemento <article> sono un post di un blog, un annuncio di un prodotto per un negozio o una pubblicità per un prodotto. La pubblicità potrebbe quindi esistere sia da sola sia all’interno di una pagina più grande.

Nel nostro esempio, possiamo sostituire la prima <section> che avvolge l’agenda con un elemento <article>.

<article>
  <header>
    <h2>Agenda</h2>
  </header>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>
</article>

L’elemento <header> che abbiamo aggiunto nell’esempio precedente può persistere anche qui, perché gli elementi <article> possono avere i loro propri elementi <header>.

L’Esempio Finale

Combinando tutti gli esempi precedenti, il documento HTML finale per il tuo invito appare come segue:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Garden Party</title>
  </head>

  <body>
    <main>
      <h1>Garden Party</h1>
      <p>
        Invitation to <strong>John's garden party</strong>.<br>
        <strong>Saturday, next week.</strong>
      </p>

      <article>
        <h2>Agenda</h2>
        <ol>
          <li>Welcome</li>
          <li>
            Barbecue
            <ul>
              <li><em>Vegetables</em></li>
              <li><em>Meat</em></li>
              <li><em>Burgers</em>, including vegetarian options</li>
            </ul>
          </li>
          <li>Dessert</li>
          <li><mark>Fireworks</mark></li>
        </ol>
      </article>

      <hr>

      <section>
        <h2>Please bring</h2>
        <ul>
          <li>Salad</li>
          <li>Drinks</li>
          <li>Bread</li>
          <li>Snacks</li>
          <li>Desserts</li>
        </ul>
      </section>
    </main>

    <aside>
      <p>
        10, Main Street<br>
        Newville
      </p>
      <p>Parking spaces available.</p>
    </aside>

    <footer>
      <p>John Doe</p>
      <p>john.doe@example.com</p>
    </footer>
  </body>
</html>

In un browser web, l’intera pagina è visualizzata come mostrato in Figure 22.

Figure 22. Rappresentazione del browser web del documento HTML risultante che combina gli esempi precedenti. La pagina rappresenta un invito a una festa in giardino e descrive l’ordine del giorno della serata e una lista di cibo da portare per gli ospiti.

Esercizi Guidati

Per ognuno dei seguenti tag, indica il tag di chiusura corrispondente:

<h5>

<br>

<ol>

<dd>

<hr>

<strong>

<tt>

<main>
Per ognuno dei seguenti tag, indica se segna l’inizio di un blocco o di un elemento inline:

<h3>

<span>

<b>

<div>

<em>

<dl>

<li>

<nav>

<code>

<pre>
Che tipo di liste puoi creare in HTML? Quali tag dovresti usare per ognuna di esse?
Quali tag racchiudono gli elementi di blocco che puoi usare per strutturare una pagina HTML?

Esercizi Esplorativi

Crea una pagina HTML di base con il titolo “Form Rules”. Userai questa pagina HTML per tutti gli esercizi esplorativi, ognuno dei quali è basato su quelli precedenti. Poi aggiungi un’intestazione di livello 1 con il testo “How to fill in the request form”, un paragrafo con il testo “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” e una lista non ordinata con i seguenti elementi della lista: “Name”, “Surname”, “Email Address”, “Nation”, “Country”, e “Zip/Postal Code”.
Metti i primi tre campi (“Name”, “Surname”, and “Email Address”) in grassetto, aggiungendo anche un’importanza semantica. Poi aggiungi un’intestazione di livello 2 con il testo “Required fields” e un paragrafo con il testo “Bold fields are mandatory.”
Aggiungi un altro titolo di livello 2 con il testo “Steps to follow”, un paragrafo con il testo “There are four steps to follow:”, e una lista ordinata con le seguenti voci: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, e “Check your e-mail - You will receive the full HTML course in minutes”.
Usando <div>, crea un blocco per ogni sezione che inizia con un’intestazione di livello 2.
Usando <div>, crea un altro blocco per la sezione che inizia con il titolo del livello 1. Poi dividi questa sezione dalle altre due con una linea orizzontale.
Aggiungi l’elemento di intestazione con il testo “Form Rules - 2021” e l’elemento di piè di pagina con il testo “Copyright Note - 2021”. Infine, aggiungi l’elemento principale che deve contenere i tre blocchi <div>.

Sommario

In questa lezione hai imparato:

Come creare markup per i contenuti in un documento HTML
La struttura gerarchica del testo HTML
La differenza tra elementi HTML a blocchi e in linea
Come creare documenti HTML con una struttura semantica

I seguenti termini sono stati discussi in questa lezione:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: I tag di intestazione.
<p>: Il tag paragrafo.
<ol>: Il tag della lista ordinata.
<ul>: Il tag della lista non ordinata.
<li>: Il tag dell’elemento della lista.
<dl>: Il tag descrizione lista.
<dt>, <dd>: I tag di ogni termine e descrizione per una lista di descrizione.
<pre>: Il tag di mantenimento della formattazione.
<b>, <i>, <u>, <tt>, <em>, <strong>, <code>, <mark>: I tag di formattazione.
<div>, <span>: I tag di raggruppamento.
<header>, <main>, <nav>, <aside>, <footer>: I tag utilizzati per fornire una struttura e un layout semplici a una pagina HTML.

Risposte agli Esercizi Guidati

Per ognuno dei seguenti tag, indica il tag di chiusura corrispondente:

<h5>

</h5>

<br>

Non esiste

<ol>

</ol>

<dd>

</dd>

<hr>

non esiste

<strong>

</strong>

<tt>

</tt>

<main>

</main>

Per ognuno dei seguenti tag, indica se segna l’inizio di un blocco o di un elemento inline:

<h3>

Elemento Blocco

<span>

Elemento Inline

<b>

Elemento Inline

<div>

Elemento Blocco

<em>

Elemento Inline

<dl>

Elemento Blocco

<li>

Elemento Blocco

<nav>

Elemento Blocco

<code>

Elemento Inline

<pre>

Elemento Blocco

Che tipo di liste puoi creare in HTML? Quali tag dovresti usare per ognuno di essi?

In HTML, puoi creare tre tipi di elenchi: elenchi ordinati costituiti da una serie di elementi di elenco numerati, elenchi non ordinati costituiti da una serie di elementi di un elenco che non hanno un ordine o una sequenza speciale ed elenchi descrittivi che rappresentano voci come in un dizionario o in un’enciclopedia . Un elenco ordinato è racchiuso tra i tag <ol> e </ol>, un elenco non ordinato è racchiuso tra i tag <ul> e </ul> e un elenco di descrizioni è racchiuso tra i tag tag <dl> e </dl>. Ogni elemento in un elenco ordinato o non ordinato è racchiuso tra i tag <li> e </li>, mentre ogni termine in un elenco descrittivo è racchiuso tra i tag <dt> e </dt> e la sua descrizione è racchiusa tra i tag <dd> e </dd>.
Quali tag racchiudono gli elementi di blocco che puoi usare per strutturare una pagina HTML?

I tag <header> e </header> racchiudono l’intestazione della pagina, i tag <main> e </main> racchiudono il contenuto principale della pagina HTML, i tag <nav> e </nav> racchiudono la cosiddetta barra di navigazione, i tag <aside> e </aside> racchiudono la barra laterale e i tag <footer> e </footer> racchiudono la pagina piè di pagina.

Risposte agli Esercizi Esplorativi

Crea una pagina HTML di base con il titolo “Form Rules”. Userai questa pagina HTML per tutti gli esercizi esplorativi, ognuno dei quali è basato su quelli precedenti. Poi aggiungi un’intestazione di livello 1 con il testo “How to fill in the request form”, un paragrafo con il testo “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” e una lista non ordinata con i seguenti elementi della lista: “Name”, “Surname”, “Email Address”, “Nation”, “Country”, e “Zip/Postal Code”.
```
<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li>Name</li>
      <li>Surname</li>
      <li>Email Address</li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>
  </body>
</html>
```

Metti i primi tre campi (“Name”, “Surname”, and “Email Address”) in grassetto, aggiungendo anche un’importanza semantica. Poi aggiungi un’intestazione di livello 2 con il testo “Required fields” e un paragrafo con il testo “Bold fields are mandatory.”

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li><strong> Name </strong></li>
      <li><strong> Surname </strong></li>
      <li><strong> Email Address </strong></li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>

    <h2>Required fields</h2>
    <p>Bold fields are mandatory.</p>
  </body>
</html>

Aggiungi un altro titolo di livello 2 con il testo “Steps to follow”, un paragrafo con il testo “There are four steps to follow:”, e una lista ordinata con le seguenti voci: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, e “Check your e-mail - You will receive the full HTML course in minutes”.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li><strong> Name </strong></li>
      <li><strong> Surname </strong></li>
      <li><strong> Email Address </strong></li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>

    <h2>Required fields</h2>
    <p>Bold fields are mandatory.</p>

    <h2>Steps to follow</h2>
    <p>There are four steps to follow:</p>
    <ol>
      <li>Fill in the fields</li>
      <li>Click the Submit button</li>
      <li>
        Check your e-mail and confirm your request by clicking on the link you
        receive
      </li>
      <li>
        Check your e-mail - You will receive the full HTML course in minutes
      </li>
    </ol>
  </body>
</html>

Usando <div>, crea un blocco per ogni sezione che inizia con un titolo di livello 2.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <h1>How to fill in the request form</h1>
    <p>
      To receive the PDF document with the complete HTML course, it is necessary
      to fill in the following fields:
    </p>
    <ul>
      <li><strong> Name </strong></li>
      <li><strong> Surname </strong></li>
      <li><strong> Email Address </strong></li>
      <li>Nation</li>
      <li>Country</li>
      <li>Zip/Postal Code</li>
    </ul>

    <div>
      <h2>Required fields</h2>
      <p>Bold fields are mandatory.</p>
    </div>

    <div>
      <h2>Steps to follow</h2>
      <p>There are four steps to follow:</p>
      <ol>
        <li>Fill in the fields</li>
        <li>Click the Submit button</li>
        <li>
          Check your e-mail and confirm your request by clicking on the link you
          receive
        </li>
        <li>
          Check your e-mail - You will receive the full HTML course in minutes
        </li>
      </ol>
    </div>
  </body>
</html>

Usando <div>, crea un altro blocco per la sezione che inizia con un titolo di livello 1. Poi dividi questa sezione dalle altre due con una linea orizzontale.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <div>
      <h1>How to fill in the request form</h1>
      <p>
        To receive the PDF document with the complete HTML course, it is
        necessary to fill in the following fields:
      </p>
      <ul>
        <li><strong> Name </strong></li>
        <li><strong> Surname </strong></li>
        <li><strong> Email Address </strong></li>
        <li>Nation</li>
        <li>Country</li>
        <li>Zip/Postal Code</li>
      </ul>
    </div>

    <hr>

    <div>
      <h2>Required fields</h2>
      <p>Bold fields are mandatory.</p>
    </div>

    <div>
      <h2>Steps to follow</h2>
      <p>There are four steps to follow:</p>
      <ol>
        <li>Fill in the fields</li>
        <li>Click the Submit button</li>
        <li>
          Check your e-mail and confirm your request by clicking on the link you
          receive
        </li>
        <li>
          Check your e-mail - You will receive the full HTML course in minutes
        </li>
      </ol>
    </div>
  </body>
</html>

Aggiungi l’elemento di intestazione con il testo “Form Rules - 2021” e l’elemento di piè di pagina con il testo “Copyright Note - 2021”. Infine, aggiungi l’elemento principale che deve contenere i tre blocchi <div>.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Rules</title>
  </head>

  <body>
    <header>
      <h1>Form Rules - 2021</h1>
    </header>

    <main>
      <div>
        <h1>How to fill in the request form</h1>
        <p>
          To receive the PDF document with the complete HTML course, it is
          necessary to fill in the following fields:
        </p>
        <ul>
          <li><strong> Name </strong></li>
          <li><strong> Surname </strong></li>
          <li><strong> Email Address </strong></li>
          <li>Nation</li>
          <li>Country</li>
          <li>Zip/Postal Code</li>
        </ul>
      </div>

      <hr>

      <div>
        <h2>Required fields</h2>
        <p>Bold fields are mandatory.</p>
      </div>

      <div>
        <h2>Steps to follow</h2>
        <p>There are four steps to follow:</p>
        <ol>
          <li>Fill in the fields</li>
          <li>Click the Submit button</li>
          <li>
            Check your e-mail and confirm your request by clicking on the link
            you receive
          </li>
          <li>
            Check your e-mail - You will receive the full HTML course in minutes
          </li>
        </ol>
      </div>
    </main>

    <footer>
      <p>Copyright Note - 2021</p>
    </footer>
  </body>
</html>

032.2 Lezione 1

Introduzione

Il Testo

Le Intestazioni

Interruzioni di Linea

Linee Orizzontali

Le Liste in HTML

Liste Ordinate

Opzioni

Liste non Ordinate

Liste Annidate

Liste di Descrizione

Formattazione del Testo Inline

Elementi di Presentazione

Testo Grassetto

Testo Corsivo

Testo Sottolineato

Font a Larghezza Fissa o Monospaziato

Elementi di Frase

Testo Enfatizzato

Testo Rafforzato

Codice Informatico

Testo Marcato

Formattare il Testo della Nostra Lista della Spesa in HTML

Testo Preformattato

Raggruppare gli Elementi

Struttura della Pagina HTML

L’Elemento <header>

L’Elemento di Contenuto <main>

L’Elemento <footer>

L’Elemento <nav>

L’Elemento <aside>

L’Elemento <section>

L’Elemento <article>

L’Esempio Finale

Esercizi Guidati

Esercizi Esplorativi

Sommario

Risposte agli Esercizi Guidati

Risposte agli Esercizi Esplorativi

L’Elemento `<header>`

L’Elemento di Contenuto `<main>`

L’Elemento `<footer>`

L’Elemento `<nav>`

L’Elemento `<aside>`

L’Elemento `<section>`

L’Elemento `<article>`