La etiqueta <li> en HTML se usa para definir el elemento de la lista en un documento HTML. Se usa dentro de una Lista Ordenada <ol> o Lista No Ordenada <ul> . La etiqueta <li> requiere una etiqueta inicial y otra final.
Nota: La etiqueta final se puede omitir si el elemento de la lista va seguido inmediatamente por otro elemento <li>, o si no hay más contenido en su elemento principal.
Sintaxis:
<li> List Items </li>
Valor de atributo:
valor: el atributo de valor se utiliza para especificar el número inicial del elemento de la lista. El elemento de la lista comienza con este número e incrementa su valor con cada adición de elementos. El atributo de valor solo funciona para las listas ordenadas, es decir, la etiqueta <ol>.
Ejemplo 1: este ejemplo usa la etiqueta <li> dentro de las listas ordenadas.
html
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>HTML li Tag</h2> <ol> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ol> </body> </html>
Producción:
Ejemplo 2: este ejemplo usa la etiqueta <li> con listas desordenadas.
html
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>HTML li Tag</h2> <ul> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html>
Producción:
Ejemplo 3: este ejemplo usa la etiqueta <li> con atributo de valor para crear listas.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>HTML li Tag</h2> <ol> <li value="5">Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ol> </body> </html>
Producción:
Aplicación de estilos a la etiqueta <li>: algunas propiedades de CSS también se pueden usar para diseñar los elementos <li> que son: list-style , list-style-image , list-style-position y list-style-type . Estas propiedades se pueden aplicar directamente al elemento <li> aunque, por lo general, se aplican al elemento padre.
Navegadores compatibles:
- Google cromo 1
- Borde 12
- Internet Explorer 5.5
- Firefox 1
- Ópera 12.1
- Safari 3
Publicación traducida automáticamente
Artículo escrito por MayankKhare y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA