Info Cookies

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Info Cookies OK
HTML
CSS
Introduzione
Coming Soon
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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 --