html - numerada - ¿Es peligroso usar<li> sin incluir etiquetas<ul>?
numeracion en html (12)
¿Comportamientos inesperados en diferentes navegadores? SEO?
¿Cuáles son los peligros de insertar <li>...</li> en una página sin encerrar los elementos en un bloque <ul> ? Por ejemplo:
<div style="border:solid 1px red;">
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</div>
La validación es la menor de mis preocupaciones, me pregunto qué podría interrumpir esto en los navegadores para que el usuario final pueda ver la página como está previsto.
¿Peligroso? No soplará nada. Puede causar problemas si el diseño es importante para usted.
Simplemente no sabrás cómo el navegador lo renderizará.
Como diseñador / desarrollador web, sabe que está muy lejos cuando comienza a escribir HTML que incluso FrontPage o Microsoft Word no generarían.
La adhesión a las normas es una calle de doble sentido. Si queremos que los desarrolladores de navegadores creen motores de renderización rápidos, confiables y consistentes, debemos encontrarlos a medio camino mediante la creación de HTML coherente, limpio y bien formado.
Correspondería a la implementación del navegador decidir qué hacer con él. Si realmente quieres hacer esto, pruébalo en todos los navegadores que quieras admitir antes de usarlo.
También tenga en cuenta que los comportamientos de los navegadores pueden cambiar en el futuro.
El uso de marcas no válidas como su ejemplo puede causar un comportamiento inesperado en diferentes páginas. Si usa un marcado válido, los navegadores (o deberían) mostrar su contenido según la especificación. Pero si usa un marcado no válido, el navegador intentará interperetar el marcado y mostrará la página como cree que era . A veces lo mostrarán como quieras, a veces no. Aquí hay un ejemplo de Firefox 3.5 en una Mac.
La primera lista es su código, pero con la etiqueta <ul> adecuada que reemplaza a la etiqueta <div> . La segunda lista es su código exactamente. Observe que en la segunda lista faltan los márgenes predeterminados de la izquierda y las viñetas.
Básicamente, nada morirá si utiliza un marcado no válido como este, pero es una práctica muy mala, ya que dará lugar a resultados inesperados e inconsistentes.
Es lo mismo que usar etiquetas <td> dentro de <p> . Claro, podría funcionar de alguna manera en algunos navegadores, pero definitivamente estará roto. El comportamiento de tal construcción no está definido , no hay garantías sobre cómo funcionará en diferentes navegadores. Por no hablar de accesibilidad, los programas de lectores de pantalla estarían bastante perplejos con respecto a este tipo de estructura.
¿Por qué no puedes usar una etiqueta <ul> o <ol> adecuada? Puede ser estilizado y se maneja de la misma manera que un <div> .
Esto se hace eco de la respuesta de todos los demás, en parte: con cualquier marca, hay una pregunta empírica de si funciona o no en los navegadores en los que se está probando. Lo probaste en todos tus navegadores, y estás feliz. Eso es genial y es una gran parte del trabajo.
Pero más allá de eso, también está la pregunta hipotética de qué tan bien podría funcionar en combinaciones de plataforma de navegador que no haya probado, ya sea porque:
- no los incluiste en el set de prueba
- no existen todavía o
- no están disponibles para pruebas (rastreadores web, por ejemplo)
Para este conjunto, que siempre se vuelve relevante tarde o temprano, debe seguir los estándares, cuando sea posible, y usar las etiquetas UL o OL que se incluyen (en este caso).
También vale la pena mencionar que hace que las etiquetas LI sean más fáciles de rastrear si está ejecutando scripts o si alguien está ejecutando scripts en su página (por ejemplo, Greasemonkey).
La mayoría de los navegadores probablemente tomarán eso y se ejecutarán con él, pero hay dos tipos de lista diferentes disponibles: Desorden <ul> y listas ordenadas <ol>, donde una lista ordenada tiene números para cada elemento.
En lugar de usar etiquetas <li>, puede usar un carácter de viñeta "•" (& bull;), y luego un <br /> al final de cada línea.
No confiaría en un comportamiento no especificado. Simplemente reemplaza ese <div> por <ul> y usa CSS para darle estilo.
No puedo ver por qué no se mostraría correctamente, mientras que no está destinado a existir por sí solo, se verá bien.
Probablemente debería ponerlo en un <ul> no hay beneficios para el marcado que está utilizando si no lo hace correctamente.
Realmente no puedo imaginar por qué no querrías poner las etiquetas <ul> o <ol> , definen la lista. A continuación, puede controlar cómo se muestra la lista, no dejar que el navegador la decida, lo que es importante. Perderlos es simplemente escribir un marcado no válido, sí funcionará en algunos navegadores, pero los identificadores definitivamente los mantienen.
No es un marcado válido en absoluto. Si se muestra correctamente, es sólo una cuestión de suerte.
Como parece definirse como peligroso por "interrumpir los navegadores para que el usuario final pueda ver la página como está previsto", entonces sí, es peligroso.
Los navegadores hacen todo lo posible para compensar el marcado no válido, pero no hay ninguna garantía de que su página se muestre correctamente.
Usted dice que la validación es la menor de sus preocupaciones, reconsidere y eche un vistazo a ¿Por qué validar? . Si le importa que su página se muestre correctamente sin peculiaridades, entonces valide.
Finalmente, HTML Tidy puede ayudarlo a arreglar el html existente.
EDITAR: envié su fragmento a browsershots.org para ver cómo se procesa en diferentes navegadores .