Corso HTML base – Lezione #2 – Tag body e intestazioni

Condividi

Nel nostro corso html base #Lezione 1 abbiamo visto cosa è, in parole spicciole, l’HTML e quali sono i tag principali che vengono utilizzati all’interno del < head > , quindi tag per richiamare fogli di stile CSS o file javascript. E’ arrivato il momento di parlare del tag <body> e dei relativi codici che comporranno il rendering della nostra pagina web.

corso html base - lezione 2

Il tag body

Dopo la chiusura del tag <head> , opportunamente chiuso, come la maggior parte dei tag HTML, con uno slash inserito subito prima del tag (</head>), troviamo il tag <body>, ovvero quello che conterrà tutta una serie di codici che andranno effettiamente a mostrare il risultato finale, renderizzato, della nostra pagina web.

Quali sono i tag principali che compongono il body?

All’interno del tag <body>, come detto in precedenza, andremo a trovare una serie di altri contenitori che comporranno la nostra pagina web. I contenitori sono effettivamente i tag di cui parliamo e vengono quasi sempre opportunamente aperti e chiusi :

<body> Contenuto della pagina web </body>

All’interno del contenitore principale (body) vi sono tutte le varie componenti che compongono la pagina web. Tra i principali troviamo :

I titoli o heading <h1>Contenuto del titolo</h1>
I paragrafi <p>Contenuto del paragrafo</p>
I link ipertestuali <a>Contenuto del link</a>
Le immagini <img src="tua-immagine.jpg"> (non necessita di chiusura)

Andando così a comporre una struttura quasi piramidale, dove ogni elemento ha la propria “radice” :


<html>
  <body>
     <h1>Titolo</h1>
     <p>Paragrafo</p>
     <img src="immagine.jpg">
     <a href="indirizzo.html">Link</a>
  </body>
</html>

I titoli heading o intestazioni.

I titoli di una pagina web vengono specificati dai contenitori heading, o intestazioni, ed hanno anch’essi una struttura ad albero per livello di importanza per una giusta interpretazione del documento. Sono, infatti, elementi block che vengono interpretati dal browser in base al livello di importanza e per i quali vengono assegnati margini e dimensioni in relazione di essa :

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Per fare un esempio pratico diamo uno sguardo allo snippet di seguito, dove il titolo H1 è per livello di importanza precedente al titolo H2 :

<h1>I tag di intestazione</h1>
    <h2>Il h2 nel dettaglio</h2>
        <h3>Il tag H2 è un sottotitolo</h3>

E’ importante mantenere una struttura piramidale quando andiamo a costruire i titoli della nostra pagina. Un errore piuttosto comune per chi non conosce lo schema di come vengono distribuiti i tag è quello di saltare da un titolo ad un sottotitolo senza utilizzare il precedente, es. utilizzare un H4 subito dopo un H2, saltando il tag H3.

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo