Ecco alcune osservazioni sul lavoro svolto nella lezione precedente:
1. Il rettangolo più grande, che coincide con quello più esterno, è il tag <body> che contiene al proprio interno tutti gli altri rettangoli della pagina html;
2. Alcuni rettangoli occupano tutta la larghezza del loro contenitore: come puoi osservare, sono stati evidenziati con il bordo blu. Ciascuno di questi rettangoli occupa un’intera “riga” della pagina internet; questi tag, come si può vedere in modo evidente, hanno la caratteristica di poter includere al proprio interno altri tag. I tag hanno queste proprietà si chiamano elementi di blocco.
3. Altri rettangoli si trovano invece dentro il testo, e non interrompono il flusso del testo stesso, come nel caso (1) dei link che si trovano sulla barra arancione sotto il titolo, (2) delle parole in grassetto, in rosso o sottolineate nei paragrafi del testo e (3) delle immagini che si trovano accanto a ciascun paragrafo. Questi tag vengono definiti elementi inline, e cioè elementi che si dispongono in linea rispetto al testo. Questi tag hanno la caratteristica di non poter contenere a loro volta altri tag.

Il codice HTML che vedi nella finestra qui sotto contiene dei tag blocked e dei tag inline: clicca sul tasto per vedere l'esempio e per provare a modificarlo.
<html>
<head>
<title>La mia prima pagina html</title>
</head>

<body>
<h1>Questo è un titolo</h1>
<p>Questo testo è inserito in un tag che si chiama paragrafo.</p>
<div>Questo ultimo testo è invece inserito in un altro tipo di tag contenitore che si chiama "div".</div>
<span>Testo </span>
<span>formato </span>
<span>da </span>
<span>tag </span>
<span>in linea.</span>
</body>
</html>