html5 thumbnail block level and Inline Elements

In questo tutorial andiamo a vedere i due gruppi che dividono gli elementi: block-level ed inline.  Capire come si comportano gli elementi una volta inseriti nei documenti è un passaggio fondamentale. 

Un precisazione: la distinzione fra block-level ed inline si usava fino a alla versione 4 di HTML, con HTML5 sono state introdotte le categorie, content categories, ma è ancora importante capire la differenza fra questi due gruppi per evitare acuti mal di testa quando si ha a che fare con il CSS.

La differenza principale sta nel modo in cui si dispongono nella pagina .Gli elementi block-level si dispongono uno sopra l’altro, come si può capire dal nome, a blocchi. Mentre gli elementi inline si dispongono in linea, uno di fianco all’altro.

html5 grafica sulla differenza fra block level and Inline elements

I block-level elements occupano tutto la spazio orrizontale che hanno a disposizione e ogni volta che se ne inserisce uno nuovo si inizia una nuova riga, praticamente forzano il browser a tornare capo. Uno degli elementi più usati in questo gruppo è div, div sta per division, e si usa come contenitore per gli altri elementi. Div si usa per creare dei blocchi nelle pagine web per poter poi manipolarli con il CSS.

Gli inline elements occupano solo lo spazio necessario e non forzano il browser ad iniziare una nuova riga. Uno degli elementi più usati in questo gruppo è span, span si usa quando vogliamo prendere un parte di elemento per modificarlo secondo necessità.

Gli elementi block-level sono: <address> <article> <aside> <blockquote> <details> <dd> <div> <dl><dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hgroup> <hr> <li> <main ><nav> <ol> <p> <pre> <section> <table> <ul>

Gli elementi inline sono: <a> <abbr> <acronym> <audio>  <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr>

Titoli, pararagrafi e liste fanno parte degli elementi block-level, mentre nel gruppo degli inline troviamo gli elementi per applicare il grasseto o il corsivo al testo.

Se ci fermiamo un attimo a ragionare sul perchè gli elementi sono divisi in queste due categorie possiamo capirne la logica. Non avrebbe senso metter un titolo e un paragrafo di fianco, come non avrebbe senso mettere due paragrafi di fianco. E’ logico che Il browser mandi a capo gli elementi block-level, così si mantiene la struttura a cui siamo abituati quando leggiamo. D’altro canto anche se vogliamo solo una parte di testo in grasseto non avrebbe senso che il browser mandasse a capo solo perchè abbiamo inserito un nuovo elemento, quindi mantiene il tutto sulla stessa riga.

Questi sono concetti semplici ma molto importanti, da tenere sempre in considerazione. Per questo tutorial è tutto, ricordati che per lavorare con il web ci vuole tanta passione e tanta pratica e che Everyday is a Learning day.


Guarda il video:

Scarica il file del video.

Articoli simili