PROGRAMMIAMO
HTML - Tipi di elementi
Un esempio di pagina

Per chiarire meglio i termini usati nel seguito consideriamo nuovamente il seguente semplice esempio di pagina html:

<!DOCTYPE html>
<html>
  <head>
<meta charset="windows-1252">
<title> La mia prima pagina in HTML </title>
  </head>
  <body>
<p>Ecco la mia <strong> prima pagina!!!! </strong> in HTML </p>
<p> Visita <a href = " http://www.programmiamo.altervista.org/index.html"> Programmiamo</a>:<br> potrai imparare
tutti i segreti dell'HTML! </p>
  </body>
</html>

 

Elementi contenitori ed elementi vuoti

Un elemento può essere:

- un elemento contenitore: una porzione di codice HTML compresa fra un tag di apertura e il corrispondente tag di chiusura (es. l'elemento body inizia con <body> e termina con </body>)

- un elemento vuoto: è costituito da un singolo tag di apertura/chiusura (es. <br>, che serve per introdurre un'andata a capo nel testo).

 

Elementi di blocco ed elementi inline

Gli elementi del body (cioè in pratica tutti gli elementi che servono per visualizzare una pagina) si dividono in due grandi categorie: elementi di blocco ed elementi inline.

Si dicono di tipo blocco quegli elementi che vengono visualizzati per mezzo di un "blocco" autonomo all'interno della pagina, isolato dal resto della pagina con un'andata a capo e una riga vuota. Per esempio <p> è un elemento di tipo blocco, perché isola una porzione di testo, creando un paragrafo separato.

Un elenco incompleto di elementi di blocco (che studieremo nelle prossime lezioni) è il seguente:

Si noti che tutti gli elementi di blocco sono di tipo contenitore (cioè hanno un tag di chiusura e uno di apertura).

Gli elementi inline sono invece quelli che vengono visualizzati all'interno della pagina senza separazioni, cioè senza interrompere il flusso con un'andata a capo. Per esempio <strong> (che evidenza una porzione di testo in grassetto) è un elemento inline, perché non separa il testo evidenziato dal resto della frase.

Un elenco incompleto di elementi inline è il seguente

Si noti che alcuni elementi inline sono di tipo contenitore (es. strong e em), mentre altri sono di tipo vuoto (es. img).

 

Annidamento degli elementi

All'interno di una pagina gli elementi contenitori (cioè quelli che hanno un tag di apertura e uno di chiusura) possono essere annidati (cioè "racchiusi") uno dentro l'altro. Bisogna sempre che l'elemento esterno venga chiuso dopo la chiusura dell'elemento interno. Per esempio nel paragrafo seguente <strong> è annidato correttamente dentro il paragrafo <p> (infatti <strong> viene chiuso prima dell'elemento <p> che lo contiene):

<p>Ecco la mia <strong> prima pagina!!!! </strong> in HTML </p>

Tuttavia non tutti gli elementi possono stare dentro tutti gli altri. La regola base è che un elemento di blocco può contenere al proprio interno un elemento inline, ma non è mai possibile il viceversa (es. <strong> non può contenere un paragrafo <p>). Inoltre alcuni elementi possono stare solo dentro ad altri (es. <p> può stare dentro <body> ma non dentro <head>; invece <title> può stare solo in <head> e mai in <body>).

Una semplice metafora per comprendere meglio la differenza fra elementi di blocco ed elementi inline consiste nel pensare agli elementi di blocco come a delle scatole, mentre gli elementi inline sono il contenuto che può essere messo dentro a tali scatole. Alcune scatole (elementi di blocco) possono essere racchiuse dentro a scatole più grandi, ma non potrà mai succedere che il contenuto racchiuda una scatola.

Le regole generali possono così essere sintetizzate:

 

Omettere il tag di chiusura

In alcuni elementi contenitori il tag di chiusura può essere omesso, senza che questo provochi errori. La lista completa degli elementi per cui il tag di chiusura è opzionale è la seguente:

<body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <optgroup>, <option>, <p>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>

Per fare subito un semplice esempio, la pagina seguente è considerata corretta secondo la sintassi dell'HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1252">
<title>Una semplice pagina senza tag di chiusura</title>
<body>
<p> Ciao a tutti

Nell'esempio qui sopra notiamo che i tag <html>, <head>, <body> e <p> non sono stati chiusi. La ragione per cui è possibile tralasciare il tag di chiusura in questi casi è che la chiusura dell'elemento è implicita dall'apertura di un altro elemento di blocco o dalla fine della pagina html. Per esempio <head> deve chiudersi per forza subito prima dell'apertura di <body> e dunque non è strettamente necessario indicarlo esplicitamente. Si noti però che, sempre nell'esempio qui sopra, non si può omettere la chiusura di <title> perché questa non può essere ricavata dalla struttura del documento.

Il principale vantaggio di omettere i tag di chiusura è quella di ridurre le dimensioni della pagina e di velocizzarne il download e la visualizzazione sul browser. Questo è valido in particolare per pagine complesse, per esempio con molte tabelle annidate.

Tuttavia l'uso dei tag di chiusura in tutti gli elementi contenitori è fortemente consigliato, in particolare per chi inizia a studiare il linguaggio html, perché produce un codice più chiaro, più leggibile e più facile per la correzione di eventuali errori. Per tutte le precedenti ragioni, nel seguito delle nostre lezioni useremo sempre i tag di chiusura per tutti gli elementi di blocco in html e suggeriamo caldamente al lettore di abituarsi a fare lo stesso.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it