BLOCK & INLINE
(X)HTML: differenza tra elementi "block" e "inline"
In una pagina (X)HTML sono contenuti sostanzialmente due categorie di elementi "block" e "inline", livello di blocco o block-level (block) l'elemento solitamente delinea un blocco separato, elementi in linea o text-level (inline o inline-block) l'elemento solitamente rimane in linea con il resto del contenuto. come eroneamente intuibile, ogni elemento in HTML avrebbe una proprietà standard di visualizzazione questo è vero in parte e non è il reale senso di questa distinzione, vediamo perchè:
Elementi block-level in (X)HTML
Un elemento block-level forma un blocco separato, può contenere elementi block-level e elementi inline, viene solitamente disposto orizontalmente e forma una nuova riga. Si possono attribuire delle dimensioni, sè omesse, l'elemento block level si espande per tutta la larghezza a disposizione e l'altezza viene definita dal contenuto.
Elementi in linea in (X)HTML
Un elemento in linea (inline) può contenere solo altri elementi "inline", viene solitamente disposto orizzontalmente in linea con il resto del contenuto e non si possono attribuire delle dimensioni (con l'uso dei CSS e della proprietà "display" è possibile ovviare a questa mancanza), il volume occupato è cosi determinato dal contenuto.
Elementi block-level/inline in (X)HTML
Un elemento block-level/inline può essere considerato a livello di blocco o in linea a seconda di come viene utilizzato, sono considerati in linea se inseriti all'interno di un elemento "inline", perdendo cosi la capacità di contenere elementi block-level.
Conclusione
Dopo quanto appreso, possiamo affermare che la vera distinzione tra l'elemento "block" e "inline"
consiste in dove può essere inserito, cosa può contenere o cosa possa divenire (block-level/inline).
Utilizzando i CSS, tramite la proprietà "display: [block], [inline], [inline-block], [list-item], [none], [table] , [run-in], [compact]" è possibile definire la proprietà di visualizzazione.
Note HTML:
La distinzione tra "block-level" e "inline" è utilizzata nelle specifiche HTML fino alla 4.01.
In HTML5, questa distinzione binaria viene sostituita con un insieme più complesso di categorie.
| <!DOCTYPE> | Definisce il tipo di documento | hidden |
| <!-- --> | Definisce un commento autore non visibile dal browser | hidden |
| <a> | Definisce un ancoraggio o un collegamento a un altro documento o file. | inline |
| <abbr> | Definisce un' abbreviazione | inline |
| <acronym> | Definisce un acronimo | inline |
| <address> | Definisce informazioni dell'autore / proprietario del documento | block-level |
| <applet> | Deprecato: Incorpora un' applicazione Java | block-level/inline |
| <area> | Definisce un'area dentro un image-map | inline |
| <b> | Definisce il testo in grassetto | inline |
| <base> | Definisce URL di partenza dei link | inline |
| <basefont> | Deprecato: Definisce il font e/o il colore e/o la dimensione di default del testo in una pagina | inline |
| <bdo> | Definisce la direzione di visualizzazione del testo | inline |
| <big> | Definisce testo grande | inline |
| <blockquote> | Definisce un blocco di testo come citazione | block-level |
| <body> | Definisce il corpo di un documento | block-level |
| <br> | Definisce un' interruzione di riga | inline |
| <button> | Definisce un pulsante | block-level/inline |
| <caption> | Definisce il titolo di una tabella | inline |
| <center> | Deprecato: Definisce un elemento o un testo centrato | block-level |
| <cite> | Definisce una citazione | inline |
| <code> | Definisce codice informatico | inline |
| <col> | Definisce una o più colonne del gruppo di colonne rappresentata dal suo genitore <colgroup> | inline |
| <colgroup> | Definisce un gruppo di una o più colonne di una tabella | inline |
| <dd> | Definisce una descrizione in una lista di definizioni | block-level/inline |
| <del> | Definisce un testo eliminato | block-level/inline |
| <dfn> | Definisce l'istanza di un termine | inline |
| <dir> | Deprecato: Definisce una lista elenco | block-level |
| <div> | Definisce una sezione in un documento | block-level |
| <dl> | Definisce un elenco di definizioni | block-level |
| <dt> | Definisce un termine in una lista di definizioni | inline |
| <em> | Definisce un testo enfatizzato | inline |
| <fieldset> | Definisce un gruppo di elementi corelati ad un determinato modulo | block-level |
| <font> | Deprecato: Definisce il carattere, colore e dimensione | inline |
| <form> | Definisce un modulo HTML per l'input dell'utente | block-level |
| <frame> | Definisce una finestra in un set frameset | inline |
| <frameset> | Definisce un set di frame (finestre) | block-level |
| <h1> • <h6> | Definiscono intestazioni del documento | inline |
| <head> | Definisce la testata del documento | inline |
| <hr> | Definisce una pausa tematica | block-level |
| <html> | Definisce il tipo di documento | block-level |
| <i> | Definisce una parte di testo alternativo | inline |
| <iframe> | Include un nuovo contesto | block-level/inline |
| <img> | Definisce un'immagine | inline |
| <input> | Definisce un campo per l'inserimento di dati | inline |
| <ins> | Definisce un testo aggiunto | block-level/inline |
| <isindex> | Deprecato: Definisce un controllo di dati | inline |
| <kbd> | Rappresenta l'input da tastiera | inline |
| <label> | Definisce un'etichetta | inline |
| <legend> | Definisce una didascalia | inline |
| <li> | Definisce un elemento di una lista | block-level |
| <link> | Definisce la relazione tra un documento e una risorsa esterna | inline |
| <map> | Definisce un image-map | block-level |
| <menu> | Deprecato: Delimita menù di lista | block-level |
| <meta> | Definisce i metadati nei documento HTML | inline |
| <noframes> | Definisce contenuto alternativo per utenti che non supportano i frame | block-level/inline |
| <noscript> | Definisce un contenuto alternativo agli script client-side | block-level |
| <object> | Definisce oggetti incorporati | block-level/inline |
| <ol> | Definisce una lista elenco ordinata | block-level |
| <optgroup> | Definisce un gruppo di opzioni correlate in un elenco a discesa | block-level |
| <option> | Definisce un'opzione in un elenco a discesa | block-level |
| <p> | Definisce un paragrafo | inline |
| <param> | Definisce un parametro di un oggetto | inline |
| <pre> | Definisce testo preformattato | inline |
| <q> | Definisce una breve citazione | inline |
| <s> | Deprecato: Definisce testo barrato | inline |
| <samp> | Definisce output di esempio da un programma per computer | inline |
| <script> | Definisce uno script lato client | inline |
| <select> | Definisce un elenco a discesa | inline |
| <small> | Definisce stile del testo piccolo | inline |
| <span> | Definisce un contenitore generico | inline |
| <strike> | Deprecato: Definisce testo barrato | inline |
| <strong> | Evidenzia il testo in grassetto | inline |
| <style> | Definisce le informazioni di stile | inline |
| <sub> | Definisce il testo a pedice | inline |
| <sup> | Definisce il testo ad apice | inline |
| <table> | Definisce una tabella | block-level |
| <tbody> | Definisce gruppi di contenuto | block-level |
| <td> | Definisce celle dati | block-level/inline |
| <textarea> | Definisce un campo multilinea per l'inserimento di dati | inline |
| <tfoot> | Definisce un insieme di sotto testo | block-level |
| <th> | Definisce intestazioni di cella | block-level/inline |
| <thead> | Definisce un insieme di intestazioni | block-level |
| <title> | Definisce il titolo del documento | inline |
| <tr> | Definisce una riga di celle | block-level |
| <tt> | Definisce il testo teletype / monospace | inline |
| <u> | Deprecato: Definisce testo sottolineato | inline |
| <ul> | Definisce una lista elenco non ordinata | block-level |
| <var> | Definisce una variabile d'argomento o programma | inline |
| <xmp> | Deprecato: Visualizza il testo senza interpretare il codice HTML | -- |
IP: 3.141.29.162
