Tag HTML: capire la differenza tra elementi block e inline

Quali sono le differenze tra gli elementi di blocco (block elements) e gli elementi in linea (inline elements)?

Ogni web deisigner deve conoscere approfonditamente tutti i tag e il lotro utilizzo, e deve sapere che in una pagina HTML si possono incontrare sostanzialmente due categorie di elementi: inline e block.
Tramite i CSS è possibile comunque settare per ogni elemento queste proprietà di display: block, inline, none, inline-block, list-item, run-in, compact, table. In questo post vedremo quali sono gli elementi in linea e quali quelli a livello di blocco, quali sono le loro caratteristiche comuni, e come vengono renderizzati in pagina.

1. Elementi block-level in HTML 4

Un elemento block-level è un elemento che forma un blocco separato, può contenere elementi block-level e elementi inline e gli si possono attribuire delle dimensioni. Gli elementi block-level vengono disposti verticalmente, formando una nuova riga. Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l’altezza necessaria al suo contenuto.

• address fornisce le informazioni riguardo i contatti della pagina
• blockquote usato per blocchi di citazioni
• div è un blocco contenitore (div è abbreviazione di “DIVisore” )
• frameset è un contenitore che permette frames multipli (documenti html) da piazzarsi nel browser
• h1, h2, h3, h4, h5, h6 titoli della pagina o dei paragrafi
• hr serve per definire una linea orizzontale
• noframes contenuto alternativo per i brwser che non supportano i frames
• noscript contenuto alternativo per i browser che non eseguono gli script
• p paragrafo: non dovrebbe contenere altri elementi a livello di blocco, comprese le tabelle, ma possono contenere elementi a livello di lista
• pre testo preformattato che viene rendererizzato con gli spazi e le interruzioni di riga
• table è usata per presentare set di dati puri: i suoi elementi “figli” si comportano come elementi a livello di blocco. Può contenere altre tabelle
• form usato per presentare formulari: i suoi sotto-elementi si comportano come elementi a livello di blocco

I seguenti elementi possono essere considerati a livello di blocco dato che possono contenere elementi a livello di blocco:

• dd definizione di una descrizione
• dt definizione
• li List item
• tbody Table body
• td Table data cell
• tfoot Table foot
• th Table header cell
• thead Table head
• tr Table row

Tra di essi, questi sono considerati elementi List-item:

• dl lista di definizioni
• li elemento di una lista
• ol lista ordinata (numerata)
• ul lista non ordinata (non numerata)

2. Elementi in linea in HTML 4

Un elemento in linea è un elemento che rimane in linea con il resto del contenuto: può contenere solo altri elementi inline. Ad un elemento inline, a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display, non si possono attribuire delle dimensioni (in realtà un elemento inline può avere solo una sorta di “dimensione verticale” grazie alla proprietà line-height. La disposizione verticale di elementi inline con la proprietà line-height impostata rispetto ad altri elementi inline adiacenti e/o contenitori si controlla grazie alla proprietà vertical-align). Elementi inline adiacenti vengono disposti orizzontalmente. Un elemento inline occuperà sia in orizzontale che in verticale l’ altezza necessaria al suo contenuto.

• a denota testo ancora
• abbr denota una frase abbreviata
• acronym denota un acronimo
• area denota la regione di una mappa all’interno di una immagine
• big denota testo di grosse dimensioni
• bdo sovrascrive la direzione del testo con i valori di ltr (da sinistra a destra) o rtl (da destra a sinistra)
• br denota un a capo
• cite indica il titolo di un articolo o un documento citato
• code denota il codice di un computer
• dfn denota una definizione
• em denota una frase da enfatizzare
• img immagine (con altezza e larghezza intrinseca)
• ins denota testo inserito
• kbd denota testo inserito da tastiera
• q citazione breve
• samp denota un esempio
• small denota testo in piccole dimensioni
• span è un contenitore per testo da formattare in modo speciale
• strike inserisce una linea sul testo
• strong denota testo importante
• sub subscript
• sup superscript
• textarea un form per testo multilinea
• tt usato per teletypefont monospaziato
• var denota una variabile in un programma

3. Elementi Block/Inline in HTML 4

Questi elementi possono essere considerati a livello di blocco o in linea a seconda di come sono usati: sono in linea se sono inseriti dentro un paragrafo o dentro un elemento in linea. In questo caso non possono contenere elementi a livello di blocco.

• button Usato per definire il submit, reset o push button di un form
• del è usato per indicare una frase cancellata. È sia block che inline
• ins è usato per indicare una frase inserita. È sia block che inline
• map indica una mappa immagine, ed è usato con i tag img e object
• script definisce uno script da eseguire nel documento

TAG HTML 5

Quali sono i tag e le novità dello standard HTML5?