html - section - ¿Por qué debería usar ''li'' en lugar de ''div''?
selectores css avanzados (15)
No estoy seguro de por qué tengo que usar ul-li vs simplemente usar divs al enumerar artículos. Puedo hacer que ambos se vean exactamente iguales
Que hay una palabra clave en su pregunta: "mirar". ¿También puede hacer que escriban lo mismo para las personas ciegas que usan un lector de Braille? ¿Puedes hacer que suenen igual para las personas ciegas que usan un sintetizador de texto a voz? ¿ Todavía puede hacer que se vean iguales para las personas con discapacidad visual que utilizan hojas de estilo de usuario personalizadas de CSS del lado del cliente?
Esa palabra, "mirar", es una palabra muy peligrosa: cuando la usas en relación con HTML, todas las alarmas deberían sonar en tu cabeza. HTML es un lenguaje para describir la estructura semántica de un documento hipermedia. Una estructura semántica no tiene un "aspecto", es un concepto abstracto.
Incluso si no te importan todos estos hocuspocus semánticos y no te importan las personas ciegas, considera esto: Google, Yahoo, MSN y Co. no tienen ojos, no "miran" a tu CSS renderizado .
No estoy seguro de por qué tengo que usar ul-li vs 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 versus alinear divs?
<li> significa un elemento en una lista y permite a los analizadores (navegadores, motores de búsqueda, arañas) saber que está enumerando elementos. Puedes usar DIV en lugar de LI, pero esos analizadores nunca sabrán que esos elementos están en la lista y DIV realmente no describe nada, excepto que es un bloque.
Debe usar etiquetas apropiadas para el contenido que desea colocar adentro. Esto no solo significa que ul / li es más apropiado para las 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 deshabilita css. El navegador mostrará su estilo predeterminado, lo que lo hace más atractivo si se utilizan dispositivos alternativos de navegación. También mejora la accesibilidad.
Depende del proyecto. Hace poco 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, las DIV eran mucho más adecuadas. Pude crear contenedores para divisiones secundarias y aplicar jQuery para lograr los efectos deseados.
Incluso si su proyecto aún no cuenta con estos requisitos, puede ser prudente pensar cómo puede cambiarlo en el futuro ...
Mediante el uso de marcado semánticamente correcto, está incorporando información adicional en su texto. Al usar ul / li, se 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.
Para la corrección semántica. HTML tiene la capacidad de expresar listas de cosas y ayuda a que el robot de Google, los lectores de pantalla y todo tipo de usuarios a los que no les importe únicamente la presentación del sitio comprendan mejor su contenido.
Para renderizar correctamente en navegadores primitivos o dispositivos móviles
Personalmente me gusta el li para la semántica. Al ver la fuente, inmediatamente verá que tiene una lista de algo si está envuelto por un li. Una colección div no proporciona ningún significado semántico, y generalmente las semánticas de la lista son introducidas por las clases css como "listItem". Lo que obviamente apunta al hecho de que se debería haber usado un li en primer lugar.
Si tiene un bucle en su lógica de presentación, siempre estoy a favor de un li sobre un div.
Respuesta directa a su pregunta: La ventaja funcional es que los divs significan poco por sí solos, mientras que ul lis significa explícitamente "esta es una lista de elementos no ordenados".
El término "semántica" se refiere a la forma en que usas 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 existen reglas / pautas / formas establecidas de usarlas para que su documento HTML publicado transmita lo que quiere que signifique.
Si incluye algo en su documento, agregue una lista ordenada (UL) o una lista desordenada (OL). Por otro lado, el elemento de división de páginas (DIV) se usa para crear un contenido específico y separado.
El elemento div "divide". Cuando mira una página, hay partes específicas como un cuerpo de contenido, el pie de página, un encabezado, navegación, menús, formularios, etc. Y puede 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 utilizar divisiones de página explícitas (DIV) para recortar su diseño en CSS es un ajuste natural. De esta forma las etiquetas div se vuelven estructurales.
Si hace un uso indebido o excesivo de la etiqueta div , puede crear un significado involuntario y una inflamació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 desactives todos los estilos (Shift + Cmd / Crtl + S en Firefox con la barra de herramientas WebDeveloper), los divs deberían desaparecer y acumularse naturalmente. Su HTML desnudo debería representar una buena página con una jerarquía clara: de arriba a abajo, primero el contenido más importante y listas con viñetas y números para los artículos 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 encabezados principales (como una tabla de contenido).
Finalmente, tenga en cuenta que está construyendo un documento. Sin todos los efectos visuales, todavía debería ser un documento convincente.
Si todo lo que te importa es obtener listas para que se vean de cierta manera con el mínimo esfuerzo, entonces esto ya es obvio: <li> tiene menos de un carácter para escribir que <div> y su etiqueta de cierre es opcional en HTML.
Y eso se suma a lo que todos los demás dijeron sobre semántica.
Si usa div en su lugar, lynx no podrá mostrar la página de forma legible.
Tu pregunta ya está respondida por quiero agregar mis dos centavos aquí. Estaba trabajando en un proyecto en el que estaba haciendo la lógica de back-end y mis datos se agregaban en una plantilla de página creada por mi diseñador. usó etiquetas ul y li para representar todo tipo de lista 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 se veían como viñetas con viñetas en lugar de arruinar 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.
Usar <li> (donde sea apropiado) reduce la sopa de etiquetas <div> que con tanta frecuencia se ve en las páginas web, lo que ayuda mucho a los desarrolladores.
No es que los <div> estén mal, pero cada vez que una etiqueta se usa en exceso (como suele ser <div> ), 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 tenido en la legibilidad / mantenibilidad del código HTML es muy notable para mí.
otra cosa sobre ul li es; puedes usar ul como un contenedor que te ayuda a establecer la clase de Estilo
<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 queremos usarlo y cómo nos gusta. Esta es la forma en que me gusta
La esperanza ayuda Gracias
Se habla mucho sobre el uso de <li> o el uso de <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 tan importantes ya que no puedo decirte la última vez que realmente 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 ingredientes para un pastel, sí, eso es una lista. Si está haciendo una lista de cosas para empacar para un viaje de excursión, sí, eso es una lista.
Pero, ¿qué pasa con una forma 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, algunas son casillas de verificación y otras son texto. Divídelo, si me preguntas. Una persona ciega sería informada mal si estaba marcada con <ul> y <li> y escucharon "Aquí hay una lista de ..." cuando es solo un montón de cosas, no una lista en realidad.