Per chiarire meglio i termini usati nel seguito consideriamo nuovamente il seguente semplice esempio di pagina html:
| <!DOCTYPE html> |
| <html> |
| <head> <meta charset="utf-8"> |
| <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> |
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).
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:
- paragrafo: <p> ... </p>
- titolo: <h1> ... </h1>, <h2> ... </h2> etc.
- liste: <ul> ... </ul>, <ol> ... </ol>
- tabelle: <table> .... </table>
- form: <form> ... </form>
- div: <div> ... </div>
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
- link o ancora: <a>
- grassetto: <strong> ... </strong>
- enfasi o corsivo: <em> ... </em>
- immagine <img>
Si noti che alcuni elementi inline sono di tipo contenitore (es. strong e em), mentre altri sono di tipo vuoto (es. img).
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):
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:
- Un elemento di blocco può contenere altri elementi di
blocco oppure elementi inline. Non tutti gli elementi di
blocco possono essere contenuti all'interno di altri
elementi di blocco (per esempio il paragrafo <p> non può
stare dentro al titolo <h1>).
- Un elemento inline può contenere solo altri elementi
inline, ma non elementi di blocco. Per esempio <strong><em>...</em></strong>
è corretto (si tratta di tutti elementi inline), mentre
<strong><p>...</p></strong> è sbagliato (<p>, elemento di
blocco, non può stare dentro <strong>, elemento inline).
- Un elemento inline deve trovarsi sempre all'interno di
un elemento di blocco.
Per esempio un immagine (o una scritta in grassetto) deve sempre essere contenuta in un paragrafo (o in un div o altri elementi simili). In altre parole sarebbe sbagliato mettere un elemento inline direttamente nel body senza nessun elemento di blocco che lo contenga.
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:
<html>
<head>
<meta charset="utf-8">
<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
Sito realizzato in base al template offerto da
http://www.graphixmania.it
