Perché dovrei usare "li" invece di "div"?

Non sono sicuro del motivo per cui ho bisogno di usare ul-li invece di usare semplicemente div quando inserisco gli elementi. Posso far sembrare entrambi esattamente uguali, quindi qual è il vantaggio funzionale nel creare un elenco non ordinato rispetto all'allineamento dei div?

Per correttezza semantica. L'HTML ha la capacità di esprimere elenchi di cose e aiuta il robot di Google, i lettori di schermo e tutti i tipi di utenti che non si preoccupano solo della presentazione del sito a capire meglio i tuoi contenuti.

Non sono sicuro del motivo per cui ho bisogno di usare ul-li invece di usare semplicemente div quando inserisco gli articoli. Posso far sembrare entrambi esattamente uguali

Che c'è la parola chiave nella tua domanda: "guarda". Puoi anche farli digitare lo stesso per i non vedenti usando un lettore Braille? Puoi farli suonare allo stesso modo per i non vedenti usando un sintetizzatore di sintesi vocale? Riesci ancora a farli sembrare uguali per le persone ipovedenti utilizzando fogli di stile utente CSS personalizzati lato client?

Quella parola, "guarda", è una parola molto pericolosa: quando la usi in relazione all'HTML, tutti gli allarmi dovrebbero suonare nella tua testa. HTML è un linguaggio per descrivere la struttura semantica di un documento ipermediale. Una struttura semantica non ha un "aspetto", è un concetto astratto.

Anche se non ti interessa tutto questo hocuspocus semantico e non ti interessano i ciechi, considera questo: Google, Yahoo, MSN e altri non hanno occhi, non "guardano" il tuo CSS renderizzato .

Usando il markup semanticamente corretto, stai incorporando informazioni extra nel tuo testo. Usando ul / li stai comunicando all'applicazione che consuma che l'informazione è una lista, e non solo "qualcosa" (chissà cosa) che è un testo all'interno di un elemento arbitrario.

Risposta diretta alla tua domanda: il vantaggio funzionale è che i div significano poco da soli, mentre ul lis significa esplicitamente "questo è un elenco di elementi non ordinato".

Il termine "semantica" si riferisce al modo in cui si utilizza il significato intrinseco delle strutture esistenti per creare un significato esplicito. L'HTML è composto da tag che significano determinate cose da soli. E ci sono regole / linee guida / modi stabiliti per usarli in modo che il tuo documento HTML pubblicato trasmetta ciò che vuoi che significhi.

Se elenchi qualcosa nel tuo documento, aggiungi un elenco ordinato (UL) o un elenco non ordinato (OL). D'altra parte, l'elemento di divisione della pagina (DIV) viene utilizzato per creare un contenuto specifico e separato.

L' elemento div "divide". Quando guardi una pagina, ci sono parti specifiche come il corpo del contenuto, il piè di pagina, un'intestazione, la navigazione, i menu, i moduli, ecc. E puoi usare i tag div per creare queste divisioni. Spesso, le parti della pagina corrispondono a un layout visivo, quindi l'utilizzo di divisioni di pagina esplicite (DIV) per tagliare il layout in CSS è una scelta naturale. In questo modo i tag div diventano strutturali.

Se usi impropriamente o usi eccessivamente il tag div , può creare significato non intenzionale e codice gonfio.

Per confondere le cose: Google utilizza h3 e div per "dividere" i risultati di ricerca elencati. ul> li> h3 + div

Quindi, quando disattivi tutti gli stili (Shift + Cmd / Crtl + S in Firefox con la barra degli strumenti WebDeveloper), i div dovrebbero scomparire e impilarsi in modo naturale. Il tuo HTML nudo dovrebbe comunque visualizzare una bella pagina con una chiara gerarchia: dall'alto verso il basso, i contenuti più importanti per primi ed elenchi con punti elenco e numeri per gli elementi elencati. Ed è una buona idea aggiungere un collegamento nella parte superiore (per utenti non visivi) che ti consenta di saltare fino a: contenuto principale, moduli importanti o titoli principali (come un sommario).

Infine, tieni presente che stai creando un documento. Senza tutti gli effetti visivi, dovrebbe comunque essere un documento convincente.

Si parla molto dell'uso <li>o dell'uso, <div>ma nessun commento ha fornito un solido esempio del contenuto che va all'interno di questi tag. La mia sensazione è che <ul>e<li> non sono così importanti in quanto non posso dirti l'ultima volta che ho effettivamente letto un "elenco" di cose su un sito web, un giornale o una rivista - online o in formato cartaceo.

<div>è molto più versatile. Se stai elencando gli ingredienti per una torta, sì, quella è una lista. Se stai elencando cose da mettere in valigia per un'escursione, sì, questa è una lista.

Ma che dire di una forma utente, ad esempio, che elenca alcune cose casuali che non sono realmente un elenco, né una serie di paragrafi, né tutte le "intestazioni". Alcune cose sono date, alcune sono caselle di controllo e altre sono testo. Dividilo, se me lo chiedi. Un cieco verrebbe male informato se fosse contrassegnato con <ul>e <li>e sentisse "Ecco un elenco di ..." quando è solo un miscuglio di cose, non proprio un elenco.

Dovresti usare tag appropriati per il contenuto che vuoi inserire. Questo non significa solo che ul / li è più appropriato per gli elenchi. Ciò significa anche che devi considerare il contenuto del tuo elenco e vedere se è un elenco non ordinato / ordinato o di definizioni.

Un altro argomento è che quando disabiliti css. Il browser renderà lo stile predefinito che lo rende più bello da vedere se vengono utilizzati dispositivi di navigazione alternativi. Migliora anche l'accessibilità.

Se usi invece div, lynx non sarà in grado di visualizzare la pagina in modo leggibile.

Personalmente mi piacciono i li per la semantica. Quando visualizzi la fonte, vedi immediatamente che hai un elenco di qualcosa se sono racchiusi da un li. Una raccolta div non fornisce alcun significato semantico e di solito l'unica semantica della lista è introdotta dalle classi css come "listItem". Il che ovviamente indica il fatto che avrebbe dovuto essere usato un li in primo luogo.

Se hai un loop nella tua logica di presentazione, preferisco sempre un li a un div.

<li> indica un elemento in un elenco e che consente ai parser (browser, motori di ricerca, spider) di sapere che stai elencando elementi. Puoi usare DIV invece di LI ma quei parser non saprebbero mai che quegli elementi sono stati elencati e DIV non descrive davvero nulla tranne che è un blocco.

Dipende dal progetto. Recentemente ho realizzato un progetto che aveva un menu progettato utilizzando un elenco. Volevano aggiungere una serie di effetti, come lo scorrimento / dissolvenza, e volevano anche renderlo pieghevole con più livelli.

In questo caso, i DIV erano molto più adatti. Sono stato in grado di creare contenitori per div figlio e applicare jQuery per ottenere gli effetti desiderati.

Anche se il tuo progetto non ha ancora questi requisiti, potrebbe essere prudente pensare a come potresti cambiarlo in futuro ...

L'uso <li>(dove appropriato) riduce la <div>zuppa di tag che vedi così spesso nelle pagine web, il che aiuta molto gli sviluppatori.

Non che <div>siano male, ma ogni volta che un tag viene abusato (come <div>spesso accade ), diluisce il significato semantico del tag al punto da essere totalmente inutile. L'ho imparato di recente da un appaltatore che abbiamo assunto per aiutare con il CSS / UI della nostra app Web e la differenza che ha fatto per la leggibilità / manutenibilità del codice HTML è molto evidente per me.

Se tutto ciò che ti interessa è far sì che le liste appaiano in un certo modo con il minimo sforzo, allora questo è già un gioco da ragazzi: <li>è un carattere in meno da digitare <div> e il suo tag di chiusura è opzionale in HTML.

E questo in aggiunta a ciò che tutti gli altri hanno detto sulla semantica.

Per il rendering corretto su browser primitivi o dispositivi mobili

La tua domanda ha già una risposta da voglio aggiungere i miei due centesimi qui. Stavo lavorando a un progetto in cui stavo eseguendo la logica di backend e i miei dati venivano aggregati in un modello di pagina creato dal mio designer. usava i tag ul e li per rappresentare ogni tipo di elenco sulla pagina, alcuni dei quali erano widget. I dati provenivano da un cms in cui gli utenti potevano inserire rich text tramite tag html. quando gli utenti hanno iniziato a creare elenchi nel loro contenuto, gli elenchi non sembravano più elenchi puntati, ma hanno rovinato l'intera pagina.

lezione appresa: non utilizzare tag list con selettori CSS generici se il contenuto può contenere html in sé.

un'altra cosa su ul li è; puoi usare ul come un contenitore che ti aiuta a impostare la classe Style

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

Mi piace questo modello quando uso ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Ovviamente dipende da come vogliamo usarlo e da come ci piace. Questo è il modo in cui mi piace

La speranza aiuta grazie