¿Por qué debería usar 'li' en lugar de 'div'?

No estoy seguro de por qué necesito usar ul-li en lugar de simplemente usar divs al enumerar elementos. Puedo hacer que ambos se vean exactamente iguales, entonces, ¿dónde está la ventaja funcional de crear una lista desordenada frente a alinear divs?

Para la corrección semántica. HTML tiene la capacidad de expresar listas de cosas y ayuda al robot de Google, los lectores de pantalla y todo tipo de usuarios que no se preocupan únicamente por la presentación del sitio a comprender mejor su contenido.

No estoy seguro de por qué necesito usar ul-li en lugar de simplemente usar divs al enumerar elementos. Puedo hacer que ambos se vean exactamente iguales

Que ahí está la palabra clave en tu pregunta: "mira". ¿También puede hacer que escriban lo mismo para personas ciegas usando un lector de Braille? ¿Puedes hacer que suenen igual para personas ciegas usando un sintetizador de texto a voz? Se puede todavía hacer que se vean los mismos para personas con discapacidad visual utilizando la costumbre del lado del cliente usuario CSS-hojas de estilo?

Esa palabra, "mirar", es una palabra muy peligrosa; cuando la usa en relación con HTML, todas las alarmas deberían sonar en su cabeza. HTML es un lenguaje para describir la estructura semántica de un documento hipermedia. Una estructura semántica no tiene "apariencia", es un concepto abstracto.

Incluso si no te importa toda esta farsa semántica y no te preocupan las personas ciegas, considera esto: Google, Yahoo, MSN y compañía no tienen ojos, no "miran" tu CSS renderizado. .

Al utilizar un marcado semánticamente correcto, está incorporando información adicional en su texto. Al usar ul / li, le está comunicando a la aplicación consumidora que la información es una lista, y no solo "algo" (quién sabe qué) que es un texto dentro de un elemento arbitrario.

Respuesta directa a su pregunta: la ventaja funcional es que los divs significan poco por sí mismos, mientras que ul lis significa explícitamente "esta es una lista de elementos desordenada".

El término "semántica" se refiere a la forma en que utiliza el significado inherente de las estructuras existentes para crear un significado explícito. HTML se compone de etiquetas que significan ciertas cosas por sí mismas. Y hay reglas / pautas / formas establecidas de usarlas para que su documento HTML publicado transmita lo que usted quiere que signifique.

Si enumera algo en su documento, agregue una lista ordenada (UL) o una lista desordenada (OL). Por otro lado, el elemento de división de página (DIV) se utiliza para crear un contenido específico y separado.

los elemento div "divide". Cuando miras una página, hay partes específicas como el cuerpo del contenido, el pie de página, un encabezado, navegación, menús, formularios, etc. Y puedes usar etiquetas div para crear estas divisiones. A menudo, las partes de la página se corresponden con un diseño visual, por lo que usar divisiones de página explícitas (DIV) para cortar su diseño en CSS es un ajuste natural. De esta forma, las etiquetas div se vuelven estructurales.

Si hace un mal uso o uso excesivo de la etiqueta div , puede crear un significado no deseado y una hinchazón del código.

Para confundir las cosas: Google usa h3 y div para "dividir" sus resultados de búsqueda listados. ul> li> h3 + div

Entonces, cuando apagas todos los estilos (Shift + Cmd / Crtl + S en Firefox con la barra de herramientas WebDeveloper), los divs deberían desaparecer y apilarse naturalmente. Su HTML desnudo aún debería representar una página agradable con una jerarquía clara: de arriba a abajo, el contenido más importante primero y listas con viñetas y números para los elementos enumerados. Y es una buena idea agregar un enlace cerca de la parte superior (para usuarios no visuales) que le permita saltar a: contenido principal, formularios importantes o los encabezados principales (como una tabla de contenido).

Por último, tenga en cuenta que está creando un documento. Sin todos los efectos visuales, debería ser un documento convincente.

Se habla mucho sobre el uso <li>o el uso, <div>pero ningún comentario dio un ejemplo sólido del contenido que se incluye dentro de estas etiquetas. Mi sensación es que <ul>y <li>no son realmente tan importantes, ya que no puedo decirles la última vez que leí una "lista" de cosas en un sitio web, periódico o revista, en línea o impresa.

<div>es mucho más versátil. Si está enumerando los ingredientes para un pastel, sí, esa es una lista. Si está enumerando cosas para empacar para un viaje de senderismo, sí, esa es una lista.

Pero ¿qué pasa con un formulario de usuario de, por ejemplo, que enumera algunas cosas aleatorias que no son realmente una lista, ni una serie de párrafos, ni todos los "encabezados"? Algunas cosas son fechas, otras son casillas de verificación y otras son texto. Divídalo, si me preguntas. Una persona ciega estaría mal informada si estuviera marcada con <ul>y <li>escucharan "Aquí hay una lista de ..." cuando es solo una mezcolanza de cosas, no realmente una lista.

Debe utilizar etiquetas adecuadas para el contenido que desea incluir. Esto no solo significa que ul / li sea más apropiado para listas. Esto también significa que debe considerar el contenido de su lista y ver si es una lista desordenada / ordenada o de definición.

Otro argumento es que cuando desactivas css. El navegador representará su estilo predeterminado, lo que lo hace más agradable de ver si se utilizan dispositivos de navegación alternativos. También mejora la accesibilidad.

Si usa div en su lugar, lynx no podrá representar la página de manera legible.

Personalmente, me gustan los li para la semántica. Al ver la fuente, verá inmediatamente que tiene una lista de algo si están envueltos por un li. Una colección div no proporciona ningún significado semántico, y normalmente la única semántica de la lista la introducen las clases css como "listItem". Lo que obviamente apunta al hecho de que debería haberse utilizado un li en primer lugar.

Si tiene un bucle en la lógica de su presentación, siempre prefiero un li sobre un div.

<li> significa un elemento en una lista y que permite a los analizadores (navegadores, motores de búsqueda, arañas) saber que está enumerando elementos. Puede usar DIV en lugar de LI, pero esos analizadores nunca sabrían que esos elementos se enumeran y DIV realmente no describe nada excepto que es un bloque.

Depende del proyecto. Recientemente hice un proyecto que tenía un menú diseñado usando una lista. Querían agregar un montón de efectos, como deslizamiento / desvanecimiento, y también querían hacerlo plegable con múltiples niveles.

En este caso, los DIV fueron mucho más adecuados. Pude crear contenedores para divs secundarios y aplicar jQuery para lograr los efectos deseados.

Incluso si su proyecto aún no tiene estos requisitos, puede ser prudente pensar en cómo puede cambiarlo en el futuro ...

El uso <li>(cuando corresponda) reduce la <div>sopa de etiquetas que con tanta frecuencia ve en las páginas web, lo que ayuda mucho a los desarrolladores.

No <div>es que sea malo, pero siempre que una etiqueta se usa en exceso (como <div>suele ser), diluye el significado semántico de la etiqueta hasta el punto de ser totalmente inútil. Aprendí esto recientemente de un contratista que contratamos para ayudar con el CSS / UI de nuestra aplicación web, y la diferencia que ha hecho en la legibilidad / mantenibilidad del código HTML es muy notable para mí.

Si lo único que le importa es hacer que las listas se vean de cierta manera con el mínimo esfuerzo, entonces esto ya es una obviedad: <li>es un carácter menos para escribir <div> y su etiqueta de cierre es opcional en HTML.

Y eso se suma a lo que todos los demás dijeron sobre la semántica.

Para renderizar correctamente en navegadores primitivos o dispositivos móviles

Tu pregunta ya fue respondida por Quiero agregar mis dos centavos aquí. Estaba trabajando en un proyecto en el que estaba haciendo la lógica de backend y mis datos se estaban agregando en una plantilla de página hecha por mi diseñador. usó etiquetas ul y li para representar todo tipo de listas en la página, algunas de las cuales eran widgets. Los datos provenían de un cms donde los usuarios podían ingresar texto enriquecido a través de etiquetas html. cuando los usuarios comenzaron a crear listas en su contenido, las listas ya no parecían listas con viñetas, sino que arruinaban toda la página.

lección aprendida: no use etiquetas de lista con selectores css genéricos si su contenido puede contener html en sí mismo.

otra cosa sobre ul li es; puedes usar ul como contenedor que te ayuda a configurar la clase Style

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

Me gusta este patrón cuando uso ul

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

Por supuesto, depende de cómo queramos usarlo y cómo nos guste. Esta es la forma en que me gusta

La esperanza ayuda Gracias