Elementi di blocco, in linea e rimpiazzati con i fogli di stile

Nelle pagine html vengono solitamente utilizzati molti tag, ogni tag è definito come elemento della pagina.

Questi elementi hanno però natura e comportamento diversi tra loro, i vari browser renderizzano infatti ogni tag secondo la tipologia dell’elemento attribuendo un comportamento di defalut.

Le principali tipologie di elementi possibili sono:

Elementi a livello di blocco (block level elements)

Questi elementi solitamente si allungano in larghezza per tutto lo spazio disponibile e iniziano “a capo” dell’elemento precedente se non specificato diversamente nel foglio di stile. Alcuni esempi di elementi a livello di blocco sono ad esempio <p> o <div>.

Elementi in linea (inline-level elements)

Gli elementi in linea solitamente non hanno dimensioni di default, è necessario impostare padding e line-height per gestirne la grandezza, presentano alcuni problemi di rendering su Internet Explorer per ciò che concerne margine, altezza e bordo.

Un elemento in linea è di norma un testo che si posiziona di fianco all’elemento precedente senza andare a capo. Alcuni esempi di elementi in linea sono <small>, <strong>, <span>.

Elementi rimpiazzati (replaced elements)

Gli elementi rimpiazzati possiedono una dimensione (altezza e larghezza) intriseca a priori della formattazione css.

Alcuni esempi di elementi rimpiazzati sono <img>, <input>, <select>, <textarea>.

A cosa serve definire la tipologia di un elemento

Conoscere la natura di un elemento è importante in quanto è possibile conoscere a priori il suo comportamento nella pagina e nei confronti degli altri elementi.

Tramite i fogli di stile è possibile cambiare la natura di un elemento tramite la proprietà display.

Nonostante il W3C sconsigli di cambiare la natura di un elemento da css, questa soluzione è molto utilizzata per risolvere in maniera semplice operazioni complesse come ad esempio allineare gli elementi di una lista o prevenire il bug del margine doppio sugli elementi flottanti per internet explorer 6.

Problemi relativi al cambio di natura di un elemento tramite css

Il W3C specifica come utilizzare la proprietà display può compromettere il rendering della pagina, il problema consiste nel fatto che l’algoritmo bidirezionale dell’unicode (Unicode bidirectional algorithm) il quale permette di gestire la direzione del testo sfrutta la natura degli elementi per posizionarli correttamente. Una soluzione semplice è l’aggiunta dell’attributo dir nel tag html

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

In questo modo si definisce una direzione left to right per il testo che verrà ereditata da tutti gli elementi. Per il momento questa problematica non è così presente ma è opportuno considerare questa possibilità visti i possibili valori attribuibili a display oltre a block e inline.

Fonti:
The global structure of an HTML document
Language information and text direction

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli e contrassegnata con , . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>