Layout con div ... ne puoi avere troppi?

Question

Qual è la migliore pratica per lo sviluppo di un layout? È meglio limitare i div? Stavo guardando attraverso l'html/css di alcuni siti popolari e sembra che tutti abbiano div in div. Ad esempio, un div per l'intera pagina, un div per la barra superiore, un div all'interno della barra in alto per il logo, barra di ricerca, ecc.

È una buona pratica? Suppongo sia più facile posizionare correttamente tutti i div e posizionare gli elementi necessari all'interno dei div. È quello che ho fatto fino ad ora, ma voglio assicurarmi che sto imparando l'approccio corretto.

Qualsiasi aiuto su questo è apprezzato. Grazie!

Answer 1

Usa <div> s quando è necessario divide (che è quello che div s dovrebbero essere utilizzati per) le sezioni della tua pagina l'uno dall'altro. Intestazione/piè di pagina dal contenuto, ad esempio, o singoli post su un blog.
Tuttavia, non dovresti usarli quando semanticamente un altro elemento avrebbe senso.

Se l'archivio sul blog menzionato in precedenza mostrava solo un riepilogo a due righe di ogni post nell'archivio, un elenco ordinato potrebbe avere più senso mentre si sta definendo un elenco di elementi che sono in ordine. Gli elementi <li> sono anch'essi elementi di blocco e possono essere configurati esattamente allo stesso modo.

A volte, ha senso inserire i tag n. <div> e talvolta non si dovrebbe.
Come test di base, immagina che la pagina venga analizzata da un lettore per un utente ipovedente. Ha bisogno di sapere cosa c'è in ogni nodo del documento in modo che possa annunciarlo correttamente. A lui non importa di cosa hanno bisogno i CSS visivi, vuole solo analizzarli nel modo più accurato possibile.

punti di base da ricordare:

• Scrivi il tuo codice HTML in primo luogo per la struttura non visuali
• la persona che visualizza il tuo sito non può essere di utilizzare il CSS
• la persona che visualizza il vostro sito non può utilizzare un browser web convenzionale
• È sempre possibile modificare la struttura se il CSS non funziona, a condizione che rimanga lo stesso semanticamente.

Answer 2

A <div> per definizione è un elemento privo di significato, quindi non importa quanti di essi hai.

Tuttavia, è necessario avere <div> s nella pagina finché hanno un senso e non usarli se ci sono elementi più adatti per il lavoro (semanticamente).

<div>This is a paragraph of text</div> 

dovrebbe in realtà essere

<p>This is a paragraph of text</p> 

E tale.

Answer 3

C'è un nome per questo tipo di "codice odore" in HTML: Divitis.

È necessario ampliare le proprie conoscenze sui significati semantici per i tag in HTML. Potresti iniziare leggendo this article, ma è più focalizzato su html4.01 e xhtml. Ci sono molti nuovi tag in HTML5 e poche modifiche nel significato semantico per i tag HTML4 esistenti.

Answer 4

La grande domanda è in generale se utilizzare div o tabelle. Le tabelle creano un sacco di mal di testa, alcuni dei quali non si può lavorare. Ma anche le div possono avere i loro problemi.

Indipendentemente da ciò che si utilizza, il livello di annidamento può effettivamente rendere la pagina difficile da comprendere. Quindi dovresti favorire il minor numero di nidificazione necessario. Allo stesso tempo, tentare di non annidare può anche rendere l'HTML difficile da capire.