01. Tag di struttura

Tag di struttura

Di seguito sono descritti i principali tag di struttura presenti in una pagina html. Questi tag definiscono delle sezioni che consentono di organizzare in modo corretto e strutturato il contenuto di un documento HTML.


Radice

<html> </html>

l tag <html> è il tag principale di un documento HTML. Questo tag definisce l'inizio di un documento HTML e deve essere utilizzato in tutti i documenti HTML.

l tag <html> corrisponde alla radice di un documento HTML ed è il punto di partenza per la struttura del documento. Tutti gli altri tag HTML sono contenuti all'interno della coppia di tag <html> e </html>.

Il tag <html> ha un solo attributo, lang, che consente di specificare la lingua del documento HTML. Il valore dell'attributo lang è un codice di lingua a due lettere, come "it" per l'italiano o "en" per l'inglese.

Esempio:

<html lang="it"> 

...

</html>


HEAD

<head> </head>

Questa coppia di tag definisce la sezione HEAD (intestazione) del documento destinata a contenere le informazioni sulla pagina web, come il titolo e la meta descrizione, i riferimenti alle regole CSS, le procedure JavaScript.

Il tag <head> è sempre il primo tag di un documento HTML (interno alla sezione delimitata da <html> e </html>), seguito dal tag <body>. Il tag <head> non contiene alcun contenuto visibile nel browser, ma viene utilizzato dai motori di ricerca e da altri programmi per comprendere la pagina web.

Di norma all'interno della sezione HEAD si ritrovano almeno i tag per la definizione del titolo del documento e la tipologia di codifica utilizzata per i caratteri, spesso "UTF-8". Codifiche alternative sono "ISO-8859-1",  "UTF-16", "UTF-32".

Esempio:

<head>

  <meta charset="UTF-8">

  <title>Titolo della pagina</title>

</head>


BODY

<body> </body>

Questa coppia di tag definisce la sezione BODY (corpo) del documento destinata a contenere il contenuto visibile della pagina web, come il testo, le immagini, le tabelle, gli hyperlink ecc..

Il tag <body> è sempre il secondo tag di un documento HTML, dopo la coppia di tag <head> </head> (senza considerare i tag innestati nell'HEAD).

Esempio:

<body>

  <p>Questo è il contenuto della pagina web.</p>

</body>


MAIN

<main> </main>

La coppia di tag <main> e </main> delimitano la sezione MAIN all'interno di un documento HTML, utilizzata per definire il contenuto principale o il corpo centrale di una pagina web. 

Questa sezione viene posizionato all'interno della sezione BODY. Deve essere utilizzato una sola volta all'interno di ciascun documento HTML per rappresentare la sezione principale o il contenuto principale della pagina.

Esempio:

<main>

     <h1>Benvenuti nel sito web di esempio</h1>

     <p>Questo è il contenuto principale della pagina. Sono incluse informazioni importanti e interessanti.</p>

     <img src="immagine.jpg" alt="Una immagine rappresentativa">

     <!-- Altri elementi del contenuto principale -->

</main>


NAV

<nav> </nav>

I tag <nav> e </nav> definiscono la sezione di NAVIGAZIONE all'interno del documento HTML. Questa sezione contiene collegamenti o menu che aiutano gli utenti a spostarsi tra le diverse parti del sito web o tra le diverse pagine.

La sezione va posizionata all'interno del corpo del documento HTML.

Esempio:

<nav>

       <ul>

            <li><a href="/">Home</a></li>

            <li><a href="/about">Chi siamo</a></li>

            <li><a href="/services">Servizi</a></li>

            <li><a href="/contact">Contatti</a></li>

      </ul>

</nav>


HEADER

<header> </header>

La copppia di tag <header> e </header> delimita la sezione HEADER nel documento HTML, utilizzata per definire l'intestazione di una sezione o dell'intero documento. L'header di solito contiene elementi che forniscono informazioni introduttive o identificative sulla pagina web, come il logo del sito, il titolo della pagina, il menu di navigazione principale e altre informazioni pertinenti.

Questa sezione viene solitamente posizionato all'inizio del documento HTML, all'interno del BODY, prima del contenuto principale. È importante notare che una pagina web può contenere più di un <header> se si tratta di sezioni distintamente identificate all'interno della pagina.

Esempio:

<header>

       <h1>Il mio sito web</h1>

       <img src="logo.png" alt="Logo del sito">

       <nav>

            <ul>

                 <li><a href="/">Home</a></li>

                 <li><a href="/about">Chi siamo</a></li>

                 <li><a href="/services">Servizi</a></li>

                 <li><a href="/contact">Contatti</a></li>

            </ul>

       </nav>

</header>


FOOTER

<footer> </footer>

La coppia di Il tag <footer> e </footer> delimitano la sezione FOOTER utilizzata per definire il piè di pagina di una sezione o di un documento HTML. Il piè di pagina contiene di solito informazioni che si applicano a tutta la pagina o alla sezione, come dettagli di contatto, informazioni di copyright, collegamenti a pagine correlate o altre informazioni di riferimento. 

Questa sezione viene solitamente posizionato all'interno del BODY, dopo il contenuto principale. È importante notare che una pagina web può contenere più di un <footer> se si tratta di sezioni distintamente identificate all'interno della pagina.

Esempio:

<footer>

     <p>&copy; 2023 Il mio sito web. Tutti i diritti riservati.</p>

     <p>Contattaci: <a href="mailto:info@miosito.it">info@miosito.it</a></p>

</footer>