HTML ul
Postado: 28 de março de 2022
Tempo de Leitura: 2 Minutos
HTML ul
As tags usadas para criar uma lista não ordenada são <ul> e <li>.
A tag <ul> é usada para definir a lista e a tag <li> é usada para cada item da lista.
Lista é um importante recurso de HTML, pois permite criarmos tópicos de textos para uma melhor exemplificação de um determinado assunto. São recursos extremamente usados, inclusive quando nem imaginamos que ele esta sendo usado, como no caso de menus. A maioria dos menus em HTML são feitos com listas.
Definição e uso
- O elemento HTML <ul> é encontrado dentro da tag <body>
- Use a tag
<ul> junto com a tag <li> para criar listas não ordenadas.
- Use a tag <ul> quando os itens da lista não tiverem ordenação numérica.
- Você pode aninhar listas <ol> , <ul> e <menu> .
Dica: Use CSS para estilizar listas .
Dica: Para listas ordenadas, use a tag <ol> .
Veja um exemplo da tag <ul> no Código HTML:
Lista HTML não ordenada
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>.
Exemplo:
<ul>
<li>Html5</li>
<li>Css3</li>
<li>jQuery</li>
<li>WordPress</li>
</ul>
O elemento HTML<ul> representa uma lista de itens sem ordem rígida, isto é, uma coleção de itens que não trazem uma ordenação numérica e as suas posições, nessa lista, são irrelevantes.
Caracteristicamente, os itens em uma lista desordenada são exibidos com um marcador que pode ter várias formas, como um ponto, um círculo, ou um quadrado. O tipo de marcador não é definido na descrição HTML da página, mas na CSS associada, utilizando a propriedade (list-style-type).
Veja o exemplo na prática
<ul style="list-style-type:circle">
<li>Html</li>
<li>Css</li>
<li>Jquery</li>
</ul>
<ul style="list-style-type:disc">
<li>Html</li>
<li>Css</li>
<li>Jquery</li>
</ul>
<ul style="list-style-type:square">
<li>Html</li>
<li>Css</li>
<li>Jquery</li>
</ul>
Você personalizar com css utilizando class
Html
<ul class="menu">
<li>Html</li>
<li>Css</li>
<li>Jquery</li>
</ul>
Css
.menu {
width:100%;
float:left;
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Veja a definição do <ul> <li>
A tag <ul> define uma lista não ordenada (com marcadores).
Use a tag <ul> junto com a tag <li> para criar listas não ordenadas.
Use CSS para estilizar listas.
Veja aqui mais artigos que usamos a tag <ul>
Neste artigo abordamos sobre a tag HTML ul.
Veja aqui outros artigos que eu usei a tag ul estilizada com css.
Menus estilizados com css
Publicado por: Loop Nerd
1.301 Visualizações
Deixe um comentário