Lezione 12 - Corso Avanzato Html

Algoritmi di Struttura in Html

Ho introdotto nella lezione scorsa le section per prepararvi, e quindi esercitarvi su come un contenitore posso contenere un'altro contenitore, vederne l'effetto pratico e capirne la gerarchie che intercorre tra un contenitore padre e un contenuto figlio e così via.

Ora posso introdurre l'argomento di oggi che verte sugli Algoritmi di Struttura.

Gli Algoritmi di Struttura

I nostri siti web non adranno visti solo dai nostri utenti ma anche interpetrati da una serie di progammi che vi faranno accesso. L'interpretazione di questi programmi viene fatta in base a degli algoritmi di struttura.

Partiamo dal fatto che la sezione principale della nostra pagina è il body (outline root), ovvero l'elemento radice di tutta la struttura.
A livello di struttura, e quindi di gerarchia, il body è l'oggetto più importante, ed essendo il più importante, l'elemento figlio, il suo diretto discendente, è sempre più importante di qualsiasi altro elemento nipote (cioè figlio del figlio di body).


Come abbiamo visto nella lezione precente dove c'erano 3 section, che erano i principali contenitori, e che al cospetto del body erano tutte e 3 figlie dirette, e quindi avevano la stessa importanza (a parte il fatto che il codice viene letto in cascata), mentre la seconda section aveva al suo interno un'altra section (per capirci, quella che aveva al suo interno la Sottosezione 2.1), questa section non aveva la stessa importanza essendo figlia della seconda section. Questo si vede ancora nella terza section che al suo interno ha una section che a sua vota ha ancora un'altra section (quindi una figlia, e una nipote della section contenitore di entrambe).

Un'altro esempio per capire meglio il significato di struttura gerarchica, è quello del peso, e quindi del valore che hanno le intestazioni h1, h2, h3, ecc. e possiamo dire che l'intestazione h1 è sempre più importante dell'intestazione h2 nel contesto dello stesso livello gerarchico. Ma l'intestazione che c'è nel body (contenitore principale) è sempre più importante di qualsiasi intestazione che c'è in un qualsiasi contenitore figlio di body, sia esso una section, un div, un footer o qualsiasi altro contenitore.


In definitiva nella pagina bisogna sempre cercare di rispettare la gerarchia delle intestazioni e delle sezioni.

E delle sezioni, bisogna sempre rispettare la gerarchia interne ad esse, tipo: nella sezione principale gli h1 o h2 nelle sottosizioni gli h3 o h4 e così via.

Vediamolo nel codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Algoritmi di Struttura </title>
  <meta charset="utf-8">
  <style>
	section {
		background-color: greenyellow;
		border: 1px solid black;
		padding: 14px;
		margin-bottom: 36px;
	}
  </style>
 </head>
 <body>
  <section>
    <h1>Intestazione h1 .....</h1>
    <h2>Intestazione h2 .....</h2>
    <section">
      <h3>Sottosezione con Intestazione h3...</h3>
      <h4>Sottosezione con Intestazione h4...</h4>
        <section">
         <h5>Sotto-Sottosezione con Intestazione h5...</h5>
         <h6>Sotto-Sottosezione con Intestazione h6...</h6>
        </section>
    </section>
  </section>
 </body>                
</html>                    

Il risultato sul vostro monitor è questo:

Intestazione h1 .....

Intestazione h2 .....

Sottosezione con Intestazione h3...

Sottosezione con Intestazione h4...

Sotto-Sottosezione con Intestazione h5...
Sotto-Sottosezione con Intestazione h6...