Ciao a tutti¬†e benvenuti sul mio blog! ūüôā

Oggi affronteremo due tag importanti nel linguaggio html: <div> e <span>.

Gli elementi <span> e <div> vengono utilizzati per raggruppare e strutturare un documento e, inoltre,  sono spesso usati con gli attributi class e id.

Entrambi i tag vengono pertanto definiti come dei contenitori generici (e quindi possono contenere¬†immagini, testo e altri elementi); dal punto di vista dell’html gli elementi <div> e <span> non hanno nessuna applicazione da soli, generalmente acquisiscono¬†significato tramite l’uso dei CCS (o di Javascript).

Tuttavia presentano delle differenze che vedremo pi√Ļ in dettaglio.

DIV

L’elemento <div>¬†√® spesso usato come contenitore per gli altri elementi html creando cos√¨ un blocco unico e che occupa l’intera riga di appartenenza.

Inoltre, come l’elemento <p>, l’elemento¬†<div> crea un distacco dal testo che segue (come nell’esempio sottostante).


1


Come ho mostrato nell’esempio, la parte di testo con sfondo in giallo occupa tutta la parte di schermo possibile, questo perch√© si comporta come un intero blocco.


SPAN

Il tag <span> è un elemento creato principalmente per contenere testi e quindi adatta una dimensione relativa al testo.

Per mezzo degli attributi class e style potremo andare a modificare vere e proprie porzioni di testo.

Nel mio caso, andr√≤ a utilizzare l’attributo style all’interno del tag <span> andando a modificare il colore e lo sfondo del testo racchiuso tra i tag <span></span>


1


Attributi Class & ID

Pressoch√© tutti i tags HTML all’interno del tag <body> (ed incluso il <body> stesso), possono avere due attributi molto importanti, ovvero class e id. Questi attributi vengono utilizzati per identificare quel tag specifico all’interno della pagina e per applicarne poi uno stile tramite il css, tramite i selettori (come vedremo nei prossimi articoli).

Per capire meglio l’importanza di questi tags, ipotizziamo di avere una pagina HTML che contiene il codice seguente:

<div>Primo div evidenziato</div>
<div>Secondo div che vogliamo sia rosso</div>
<div>Terzo div che vogliamo sia rosso ed evidenziato</div>

E’ chiaro che sarebbe molto utile avere degli identificativi dei tags che ci consentissero di distinguere il primo div dal secondo e terzo. Inoltre, sarebbe altrettanto utile disporre di alcuni identificativi che ci consentissero di distinguere i div che vogliamo appaiano in rosso. Ecco l’utilit√† degli attributi class e id! Potremmo cambiare il codice come segue:

<div id="first">Primo div</div>
<div id="second" class="red">Secondo div che vogliamo sia rosso</div>
<div id="third" class="red highlight">Terzo div che vogliamo sia rosso</div>

Ma quando usare un id, e quando usare una classe? Semplice! Basta ricordare le regole d’oro degli id:

  • Un tag pu√≤ avere al pi√Ļ un ID (ovvero 0 o 1 id);
  • Solamente un tag nella pagina pu√≤ avere quell’id specifico.

Quindi, l’esempio di codice qui sotto √® errato perch√© viola la prima regola:

<div id="third" id="last">Pluto</div>

Mentre l’esempio qui sotto √® errato perch√© viola la seconda regola:

<div id="red">Primo div rosso</div>
<div id="red">Secondo div rosso</div>

Quindi, per tornare alla nostra domanda…. usate un id quando al pi√Ļ un solo tag nella pagina dovr√† avere quell’id; usate invece una classe in tutti gli altri casi!

Un tag pu√≤ anche avere due (o pi√Ļ) classi (anche se √® sufficiente aggiungere solamente un attributo class). Nell’esempio riportato qui sotto, notate come il tag div con id “third” abbia sia la classe red che la classe highlight. Per specificare due classi √® sufficiente separarle con uno spazio.

<div id="third" class="red highlight">Terzo div che vogliamo sia rosso</div>

Dulcis infundo, vi lascio un piccolo esempio di utilizzo degli id e delle classi con il CSS… Per capire appieno il codice dovrete leggere il prossimo articolo che verr√† pubblicato a breve su questo blog. Per il momento volevo semplicemente farvi notare che il tag che ha id “main-title” ha un font nettamente pi√Ļ grande degli altri; quello che ha l’id “subtitle” √® in corsivo; i tag che hanno classe “red” hanno il testo in rosso; quelli che hanno classe “highlight” sono evidenziati in giallo.


1

Nei prossimi articoli andremo a studiare bene il concetto di classe, molto usato nel linguaggio HTML e CSS!

A presto! ūüôā




Comments

  1. Grazie mille! Spiegazione chiara e semplice!!!!

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.