Mientras creamos una lista desordenada , podemos hacer uso de dos tipos diferentes de etiquetas. Estos se utilizan para generar listas de directorios y listas de menús.
Listas de directorios: la lista de directorios se crea utilizando la etiqueta HTML <dir> . Esta etiqueta se utiliza como contenedor de listas de archivos/carpetas de un directorio. Con la introducción de HTML 5, la etiqueta <dir> ha quedado obsoleta y ya no se admite.
Sintaxis:
<dir> lists.... </dir>
Ejemplo: Este ejemplo ilustra la etiqueta <dir> en HTML.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Dir Tag</h2> <p>List of all computer science subjects:</p> <!-- dir tag starts here--> <dir> <li>Admin</li> <li>User</li> <li>Writer</li> <li>Database Manager</li> <li>Founder</li> </dir> <!-- dir tag ends here--> </body> </html>
Producción:
Listas de menús: las listas de menús funcionan de la misma manera que las listas de directorios. La etiqueta <menu> se utiliza para crear una lista de menú. Sirve como contenedor para los elementos del menú y los muestra en forma de lista. Consulte el enlace para conocer la diferencia entre <nav> y <menu> para una mejor comprensión.
Sintaxis:
<menu> lists... </menu>
Ejemplo: Este ejemplo ilustra la etiqueta <menu> en HTML
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Menu Tag</h2> <p>List of all folders in the directory</p> <!-- menu tag starts here--> <menu> <li>Admin</li> <li>User</li> <li>Writer</li> <li>Database Manager</li> <li>Founder</li> </menu> <!-- menu tag ends here--> </body> </html>
Producción:
Listas desordenadas: las listas desordenadas también se utilizan para crear una lista de elementos. Como sugiere el nombre, no hay un orden particular de los elementos, es decir, no están ordenados.
Sintaxis:
<ul> lists.... </ul>
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Menu Tag</h2> <p>unordered list for professions</p> <ul> <li>Teacher</li> <li>Admin</li> <li>User</li> <li>Writer</li> <li>Manager</li> <li>Founder</li> <li>Salesperson</li> </ul> </body> </html>
Diferencia entre la lista de directorios, la lista de menús y la lista desordenada:
| Listas de directorios | Listas de menú | Lista desordenada |
| Ha quedado obsoleto en HTML5, es decir, la última versión de HTML | Es compatible con HTML 5. | Es compatible activamente con HTML 5. |
| No admiten ningún atributo para el estilo de las viñetas. | No admiten ningún atributo para el estilo de las viñetas. | Las viñetas en una lista desordenada se pueden diseñar usando el atributo de tipo de estilo de lista |
| Los atributos de estas listas no son compatibles con ninguno de los navegadores. | Los atributos de estas listas no son compatibles con ninguno de los navegadores. | Los atributos de la lista desordenada son compatibles con todos los navegadores de renombre disponibles en el mercado. |
| Por lo general, son menos preferidos en los resultados de los motores de búsqueda. | Por lo general, son menos preferidos en los resultados de los motores de búsqueda. | Son útiles en SEO (optimización de motores de búsqueda) ya que producen menos ruido y devuelven mejores resultados en una búsqueda. |