Molte persone che sono nuove al web design e HTML / CSS usano il e L'elemento div definisce le divisioni logiche sulla tua pagina web. È fondamentalmente una scatola in cui puoi posizionare altri elementi HTML che logicamente vanno insieme. Una divisione può avere più elementi, come paragrafi, intestazioni, elenchi, collegamenti, immagini, ecc. Può anche avere altre divisioni al suo interno per fornire ulteriore struttura e organizzazione al documento HTML. Per utilizzare l'elemento div, posizionare un aperto id = "myDiv">
), o un selettore di classe (ad es. class = "bigDiv"> L'elemento div è diverso dall'elemento della sezione HTML5 perché non fornisce alcun contenuto semantico al contenuto incluso. Se non sei sicuro che il blocco di contenuti debba essere div o sezione, pensa a quale scopo dell'elemento e del contenuto è quello di aiutarti a decidere quale usare: In definitiva, sia le div che le sezioni si comportano in modo abbastanza simile e puoi dare a entrambi i valori degli attributi e assegnarle loro uno stile CSS per ottenere l'aspetto del tuo sito di cui hai bisogno. Entrambi sono elementi a livello di blocco. L'elemento span è un elemento in linea per impostazione predefinita. Questo lo distingue dagli elementi div e section. L'elemento span viene spesso utilizzato per avvolgere un determinato contenuto, normalmente testo, per dargli un "gancio" aggiuntivo che può essere modificato in un secondo momento. Utilizzato con i CSS, può cambiare lo stile del testo che racchiude; tuttavia, senza attributi di stile, l'elemento span non ha alcun effetto sul testo. Questa è la principale differenza tra gli elementi span e div. Come detto sopra, l'elemento div include un'interruzione di paragrafo, mentre l'elemento span dice al browser solo di applicare le regole di stile CSS associate a ciò che è racchiuso dal tags: Testo evidenziato e testo non evidenziato. Aggiungi il class = "highlight"
o un'altra classe per l'elemento span per lo stile del testo con CSS (ad es. class = "highlight">
). L'elemento span non ha attributi obbligatori, ma i tre più utili sono gli stessi dell'elemento div: Usa lo span quando vuoi cambiare lo stile del contenuto senza definire quel contenuto come un nuovo elemento a livello di blocco nel documento. Ad esempio, se si desidera che la seconda parola di un'intestazione h3 sia rossa, è possibile circondare quella parola con un elemento di span che lo modificherebbe come testo rosso. La parola rimane ancora parte dell'elemento h3, ma ora viene visualizzata anche in rosso: Usando il
). Entrambi questi attributi possono quindi essere selezionati tramite CSS o modificati utilizzando JavaScript. Le migliori pratiche attuali tendono a utilizzare i selettori di classe invece degli ID, in parte a causa del modo in cui sono specifici i selettori di ID. In verità, tuttavia, è possibile utilizzare uno dei due e persino assegnare una divisione sia a un ID che a un selettore di classe. Quando utilizzare
Usando il Elemento
Questo è My Awesome Headline
elementi in modo intercambiabile mentre costruiscono le pagine web. La realtà, tuttavia, è che ognuno di questi elementi HTML ha scopi diversi. Imparare a utilizzare ciascuno per lo scopo previsto ti aiuterà a sviluppare pagine Web più pulite che il codice è più facile da gestire nel complesso.
Elemento
tagga prima dell'area della tua pagina che vuoi come una divisione separata e una chiusura
taggalo dopo:
contenuto di div
Se l'area della tua pagina necessita di alcune informazioni aggiuntive che utilizzerai in seguito per lo stile CSS, puoi aggiungere un selettore di ID (ad es.
Contro
