Divs e span non sono intercambiabili nella creazione di pagine web. Ognuno ha scopi diversi e sapere quando utilizzarlo ti aiuterà a sviluppare siti Web puliti e facili da gestire.
Utilizzo dell'elemento Div
Divs definire le divisioni logiche sulla tua pagina web. UN div—abbreviazione di divisione—è fondamentalmente una scatola in cui puoi inserire altro Elementi HTML che appartengono insieme. Una divisione può contenere più altri elementi, come paragrafi, intestazioni, elenchi, collegamenti, immagini, ecc. Può anche avere altre divisioni al suo interno per fornire ulteriore struttura e organizzazione.
Per usare il div elemento, posiziona un open tag prima dell'area della pagina che desideri come divisione separata e chiusura
contenuto di div
Se applicherai uno stile a quest'area con CSS, puoi aggiungere un ID selettore al tag div di apertura:
In alternativa, puoi aggiungere un selettore di classe:
Puoi quindi lavorare con questi elementi in CSS o JavaScript.
Le best practice attuali tendono all'utilizzo di selettori di classe anziché di ID, in parte a causa di come sono specifici i selettori di ID. O uno è accettabile, tuttavia, e puoi anche dare un div sia un ID che un selettore di classe.
Div o sezioni?
Il div elemento è diverso da HTML5sezione elemento perché non conferisce al contenuto racchiuso alcun significato semantico. Se non sei sicuro che il blocco di contenuti debba essere a div o un sezione, pensa allo scopo dell'elemento e al contenuto.
- Se hai bisogno dell'elemento semplicemente per aggiungere stili a quell'area della pagina, dovresti usare il div elemento.
- Se il contenuto ha un focus distinto e potrebbe reggersi da solo, considera l'utilizzo di sezione elemento invece.
Alla fine, entrambi div e sezioni si comportano in modo simile e puoi dare a entrambi gli attributi e modellarli con i CSS. Entrambi sono elementi a livello di blocco.
Utilizzo di span
spagnolo è un elemento in linea per impostazione predefinita, a differenza di div e sezione elementi. Il span l'elemento viene in genere utilizzato per avvolgere un contenuto specifico come il testo per dargli un gancio aggiuntivo che puoi usare per aggiungere stili. Senza attributi di stile, tuttavia, span non ha alcun effetto sul testo.
Un'altra differenza tra span e div elementi è che il div l'elemento include un'interruzione di paragrafo, mentre l'elemento span l'elemento dice solo al browser di applicare le regole di stile CSS associate a ciò che è racchiuso dal tag:
Testo evidenziato e testo non evidenziato.
Potresti aggiungere.
classe = "evidenziare"
o simile al span elemento per modellare il testo con CSS.
L'elemento span non ha attributi obbligatori, ma i tre più utili sono gli stessi di div elemento:
- stile
- classe
- ID
Uso span quando vuoi cambiare lo stile del contenuto senza definire quel contenuto come nuovo elemento a livello di blocco nel documento.
Ad esempio, se vuoi la seconda parola di an h3 andando verso il rosso, potresti circondare quella parola con a span elemento che stilerebbe quella parola come testo rosso. La parola rimane ancora parte del h3 elemento, ma verrà visualizzato in rosso.