html - tipos - ¿Por qué se acepta utilizar una estructura UL, LI en las listas de menús?

listas numeradas html

Question

Soy nuevo en HTML. Cuando comencé a leer documentación sobre listas, noté que en todas partes se usa una estructura <ul> , <li> , incluso para crear listas muy simples.

Pero para mí es más cómodo usar solo elementos <a> con CSS:

display: block;
/* and/or */
float: left;

Entonces, ¿por qué usar <ul> , <li> lugar de solo <a> ?

Muchas gracias.

Answer 1

Debido a que se supone que su marca es semántica, no solo para fines de visualización.

Cualquier persona, o cualquier otra cosa, que lea su documento puede decir inmediatamente que una sección marcada con etiquetas <ul><li>...</li></ul> es una lista.

CSS no describe qué es algo, solo cómo se debe representar. Idealmente, debería marcar su documento para describir qué es cada parte, y luego usar CSS para representar esas partes adecuadamente.

Answer 2

Para aquellos que no están lo suficientemente convencidos por la semántica, creo que es justo mencionar que el uso de una etiqueta de lista puede extenderse muy bien para incluir la navegación de segundo nivel. Luego agregue algunos css (y algunos javascript para IE) y bosh ... tiene menús de superfish .

Answer 3

Porque UL, LI y OL son los elementos HTML creados con el propósito específico de ser listas. Al usar el marcado adecuado, está agregando más información a su contenido, cualquier herramienta automatizada que vea su código sabrá que esas son listas y podrá actuar en consecuencia.

Si desea enlaces dentro de un elemento de la lista, puede colocar un elemento A anidado dentro de la LI:

<ul>
    <li><a href="example.com">Example</a></li>
</ul>

Answer 4

Porque estructuralmente son los elementos más apropiados para ese propósito. También ayuda a los usuarios de lectores de pantalla en términos de dictar correctamente los elementos de una página.

Recuerde que HTML es para marcado / contenido (¿qué es este texto? ¿Un párrafo? Envuélvalo en una etiqueta ap), CSS es para estilo, JS es para comportamiento.

Puede tener miles de anclajes en su página web, pero ¿qué sucede si desea diseñar anclajes anidados dentro de los elementos enumerados de manera diferente a otros anclajes?

<ul>
<li><a href="#">blah</a></li>
</ul>

<a href="#">sfl</a>

Si hubieras hecho las cosas correctamente, tu css sería trivial de implementar

a { }
ul li a { }

De lo contrario, tendrías que lanzar clases alrededor de anclas y sería desordenado y poco estructural.

En lo que respecta al SEO, creo que en el pasado el código marcado semánticamente no tenía mucho que ver, pero hoy en día con elementos como RDF, HTML 5, la web se está volviendo cada vez más semántica, por lo que es beneficioso ser tan semántico como usted puede ser.

En 2010, Google especificó tres formas de metadatos estructurados que sus sistemas utilizarán para encontrar contenido semántico estructurado dentro de las páginas web. Google utilizará dicha información, cuando esté relacionada con reseñas, perfiles de personas, listados de negocios y eventos, para mejorar el ''fragmento de código'', o un fragmento corto de texto entre comillas que aparece cuando la página aparece en los listados de búsqueda. Google especifica que los datos pueden proporcionarse utilizando microdatos, microformatos o RDFa. [13] Los microdatos se especifican dentro de los atributos itemtype e itemprop agregados a los elementos HTML existentes; las palabras clave de microformato se agregan dentro de los atributos de clase como se discutió anteriormente; y RDFa se basa en los atributos rel, typeof y property agregados a los elementos existentes. [14]