Meta tags:
description=Em HTML, existem três tipos principais de listas: não ordenadas, ordenadas e de descrição. Cada uma é definida com tags diferentes;

Headings (most frequently used words):

html, de, lista, exemplo, para, uma, listas, ordenada, em, com, da, tag, criar, não, css, ul, ordenadas, descrição, horizontal, resultado, type, ol, dl, aninhada, um, aninhadas, controle, contagem, acessibilidade, praticar, itens, marcados, marcadores, usada, propriedade, list, style, letras, algarismos, romanos, mista, dentro, usando, start, continuar, entre, seções, contando, partir, número, especificado, reversed, value, migrando, atributo, obsoleto, quando, usar, vez, pares,

Text of the page (most frequently used words):
html (112), lista (61), list (52), para (42), type (41), title (34), uma (32), listas (31), style (30), não (29), com (26), body (23), head (23), exemplo (23), ordenada (21), css (20), você (19), itens (19), item (19), svg (19), #descrição (17), #ordenadas (16), tag (16), aprender (15), copiar (14), w3docs (12), the (12), doctype (12), que (11), document (11), atributo (11), tags (11), cada (9), experimente (9), mesmo (9), criar (9), canvas (9), this (8), marcadores (8), por (8), none (8), href (8), color (8), pode (8), dentro (8), menu (7), termo (7), são (7), diferentes (7), quando (7), pares (7), html5 (7), elemento (6), navegação (6), número (6), tipos (6), use (6), nav (6), medal (6), start (6), valor (6), todos (5), elementos (5), adicionar (5), deve (5), como (5), qual (5), usar (5), ordem (5), está (5), string (5), home (5), for (5), apenas (5), value (5), reversed (5), partir (5), entre (5), forma (5), padrão (5), atributos (5), aninhada (5), roman (5), strawberry (5), banana (5), apricot (5), peach (5), obsoleto (5), propriedade (5), introdução (5), formatter (5), code (4), generator (4), quizzes (4), prática (4), snippets (4), remover (4), semântica (4), dos (4), tela (4), etapas (4), tipo (4), https (4), www (4), tools (4), padding (4), referência (4), vez (4), podem (4), ser (4), portanto (4), esse (4), number (4), tea (4), books (4), drink (4), usamos (4), marcados (4), json (3), encoder (3), editor (3), ferramentas (3), exercícios (3), php (3), javascript (3), horizontal (3), acessibilidade (3), contagem (3), cores (3), links (3), verificar (3), nunca (3), role (3), voiceover (3), ainda (3), pois (3), etapa (3), definição (3), importa (3), leitores (3), sequência (3), lists (3), text (3), display (3), abaixo (3), valores (3), diretamente (3), usuários (3), contact (3), about (3), estilo (3), mais (3), números (3), único (3), imagens (3), seção (3), começa (3), seus (3), três (3), drinks (3), navegadores (3), conteúdo (3), hot (3), vários (3), nome (3), essa (3), vem (3), numbered (3), abertura (3), fechamento (3), ice (3), circle (3), square (3), templates (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), praticar (2), controle (2), aninhadas (2), page (2), substituir (2), conjunto (2), div (2), definiu (2), anuncie (2), significativa (2), anunciam (2), marcando (2), receita (2), onde (2), quais (2), mencionados (2), artigo (2), selecione (2), todas (2), opções (2), corretas (2), functions (2), you (2), can (2), example (2), navigation (2), background (2), center (2), flex (2), margin (2), hexadecimais (2), seu (2), propriedades (2), usando (2), linha (2), aos (2), main (2), label (2), comum (2), papel (2), ela (2), seja (2), explícito (2), significado (2), tecnologias (2), assistivas (2), visual (2), anuncia (2), ver (2), estrutura (2), também (2), segunda (2), gold (2), silver (2), bronze (2), first (2), with (2), numera (2), útil (2), específico (2), seguintes (2), continuam (2), dele (2), copybook (2), pencil (2), pen (2), section (2), títulos (2), termina (2), water (2), coffee (2), nested (2), recuo (2), isso (2), genuinamente (2), dados (2), descrições (2), termos (2), forem (2), simples (2), associação (2), chave (2), glossário (2), data (2), resultado (2), cold (2), lowercase (2), numerals (2), alphabetized (2), letras (2), algarismos (2), romanos (2), estilos (2), marcador (2), código (2), equivalente (2), tabela (2), iii (2), lower (2), upper (2), alpha (2), antigo (2), mas (2), usada (2), escrito (2), fanta (2), coca (2), cola (2), unordered (2), alterar (2), migração (2), existem (2), definida (2), accept (2), dir (2), formulários (2), tutorial (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, sobre, empresa, try, tutoriais, exemplos, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, nada, necessário, afeta, faz, diferença, delas, associa, numerada, quiz, tool, using, different, properties, create, styling, horizontally, 981816, hover, decoration, align, white, block, f44336, escritas, literais, manter, independente, projeto, real, normalmente, faria, variáveis, cor, sistema, design, personalizadas, codificar, estilizar, definindo, dispor, estilizadas, muitas, maneiras, classificações, instruções, posições, distinção, transmitida, exibida, visualmente, aria, site, convencionalmente, expõe, ponto, pular, enquanto, interno, mantém, agrupados, contados, envolva, safari, aplicar, menus, personalizado, fazer, navegador, descartar, implícito, modo, anunciada, tal, preservar, adicione, algumas, diretrizes, práticas, transmitem, leitor, chega, ele, geralmente, depois, posição, contexto, ajuda, conseguem, entender, escolher, correto, decisão, invertida, acima, renderiza, segundo, forçado, terceiro, mostra, continues, jumps, setting, countdown, maior, menor, contagens, regressivas, rankings, top, exibidos, pior, melhor, salta, continuing, procedure, whose, ended, step, counting, control, contando, especificado, única, lógica, dividida, parágrafos, primeira, continua, numeração, permaneça, correta, após, quebra, continuar, seções, define, manualmente, daquele, conta, decrescente, crescente, contar, permitem, comportamento, bread, order, preference, fruit, shopping, mista, misturar, vice, versa, automaticamente, nível, aninhado, via, esquerdo, hierarquia, lida, clareza, recuam, colocada, pai, filho, direto, válido, outro, fairy, tale, detective, copybooks, contains, inside, contém, outra, foi, usado, indevida, pelo, somente, consulte, páginas, dedicadas, detalhes, uso, incorreto, also, used, cooking, and, cleaning, calories, caffeinated, espresso, seguido, várias, compartilhar, mesma, ambos, válidos, sem, escolha, certa, simule, alternando, perde, sua, entradas, metadados, autor, publicação, categoria, pergunta, resposta, faq, diálogos, torna, relacionamento, marcação, comunicar, juice, description, usadas, associar, suas, semelhante, dicionário, letters, marcações, primeiro, usa, possa, produção, defina, decimal, saída, corresponde, migrando, numerá, los, antiga, era, funciona, nos, prefira, novo, ordered, listar, disc, creams, examples, especificar, image, pequenos, círculos, pretos, podia, moderna, suportada, controlar, tanto, quanto, mapa, completo, antigos, one, more, another, declarado, agrupar, possuem, numérica, muda, veja, seguir, principais, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, class, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, filtros, stroking, path, polyline, polygon, elipse, círculo, retângulo, texto, gradientes, coordenadas, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, table, sup, summary, sub, strong, strike, span, spacer, source, small, select, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, meter, meta, menuitem, marquee, mark, map, link, legend, keygen, kbd, isindex, ins, input, img, iframe, hgroup, header, frameset, frame, form, footer, font, figure, figcaption, fieldset, embed, dialog, dfn, details, del, datalist, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, article, area, applet, address, acronym, abbr, evento, globais, obsoletas, xhtml, mime, mensagens, status, métodos, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, suporte, áudio, vídeo, semânticos, layout, computercode, caminhos, arquivo, scripts, blocos, tabelas, comentários, formatação, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset listas html em html existem três tipos principais de listas não ordenadas ordenadas e de descrição cada uma é definida com tags diferentes em html existem três tipos de listas não ordenadas ordenadas e de descrição cada uma é definida com tags diferentes veja a seguir listas não ordenadas em html usamos listas não ordenadas para agrupar itens que não possuem ordem numérica ao alterar a ordem dos itens da lista o significado não muda para criar uma lista não ordenada usamos a tag ul essa tag vem em pares o conteúdo é escrito entre as tags de abertura ul e fechamento ul cada elemento de uma lista não ordenada é declarado dentro da tag li exemplo da tag html ul para criar uma lista não ordenada um exemplo de lista não ordenada w3docs doctype html html head title title of the document title head body h1 an unordered list h1 ul li this is a list item li li this is another list item li li this is one more list item li ul body html copiar experimente você mesmo os itens em listas não ordenadas são marcados com marcadores pequenos círculos pretos por padrão o antigo atributo type type circle type square podia alterar o estilo do marcador mas está obsoleto no html5 use a propriedade css list style type é a forma moderna e suportada de controlar marcadores tanto em listas não ordenadas quanto em ordenadas o mapa completo de migração dos valores antigos do type para css está na seção de listas ordenadas abaixo exemplo da tag html ul para criar uma lista não ordenada com itens marcados com marcadores exemplo do atributo type para listas html doctype html html head title title of the document title head body ul type circle li list item li li list item li li list item li ul ul type square li list item li li list item li li list item li ul body html copiar experimente você mesmo resultado você também pode usar a propriedade css list style type ou list style image para especificar o tipo de elemento de item de lista exemplo da tag html ul usada com a propriedade css list style type para criar uma lista não ordenada exemplo da propriedade list style type doctype html html head title title of the document title head body h2 examples of unordered lists h2 ul style list style type square li cold drinks li li hot drinks li li ice creams li ul ul style list style type disc li coca cola li li fanta li li ice tea li ul ul style list style type circle li coca cola li li fanta li li ice tea li ul body html copiar experimente você mesmo listas ordenadas em html a lista ordenada em html é usada para listar itens marcados com números ela começa com a tag ol essa tag vem em pares o conteúdo é escrito entre as tags de abertura ol e fechamento ol cada item da lista ordenada começa com a tag de abertura li e termina com a tag de fechamento li exemplo da tag html ol para criar uma lista ordenada exemplo de lista ordenada html w3docs doctype html html head title title of the document title head body h1 an ordered list h1 ol li this is list item number 1 li li this is list item number 2 li li this is list item number 3 li ol body html copiar experimente você mesmo os itens de uma lista ordenada são marcados com números por padrão para numerá los com letras ou algarismos romanos a forma antiga era adicionar type a ou type i à tag ol esse atributo type ainda funciona nos navegadores mas está obsoleto no html5 portanto prefira a propriedade css list style type em código novo migrando o atributo type obsoleto para css cada valor antigo de type corresponde diretamente a um valor css de list style type atributo obsoleto css equivalente exemplo de saída type 1 list style type decimal 1 2 3 type a list style type upper alpha a b c type a list style type lower alpha a b c type i list style type upper roman i ii iii type i list style type lower roman i ii iii o primeiro exemplo abaixo usa o atributo type obsoleto para que você possa ver todos os estilos de marcador de uma vez em código de produção defina o valor equivalente de list style type da tabela exemplo da tag html ol para criar uma lista ordenada com letras e algarismos romanos exemplo de diferentes marcações de itens de lista doctype html html head title title of the document title head body h3 a numbered list h3 ol li peach li li apricot li li banana li li strawberry li ol h3 an alphabetized list h3 ol type a li peach li li apricot li li banana li li strawberry li ol h3 an alphabetized list lowercase letters h3 ol type a li peach li li apricot li li banana li li strawberry li ol h3 a numbered list roman numerals h3 ol type i li peach li li apricot li li banana li li strawberry li ol h3 a numbered list lowercase roman numerals h3 ol type i li peach li li apricot li li banana li li strawberry li ol body html copiar experimente você mesmo listas de descrição em html as listas de descrição em html são usadas para associar termos às suas descrições de forma semelhante a um dicionário ou glossário para criar uma lista de descrição usamos a tag dl essa tag vem em pares dentro de dl usamos as tags dt para um termo nome na lista de descrição e dd para a descrição de um termo nome na lista de descrição exemplo da tag html dl para criar uma lista de descrição exemplo de lista de descrição w3docs doctype html html head title title of the document title head body h1 description lists h1 dl dt tea dt dd hot drink dd dt juice dt dd cold drink dd dl body html copiar experimente você mesmo resultado quando usar dl em vez de um ul de pares use uma lista de descrição quando seus dados forem genuinamente um conjunto de pares nome valor termo definição entradas de glossário metadados chave valor autor data de publicação categoria pares de pergunta resposta de faq ou diálogos o elemento dl torna esse relacionamento explícito na marcação o que tecnologias assistivas podem comunicar se seus itens forem apenas uma sequência simples sem estrutura em pares um simples ul é a escolha certa não simule a associação chave valor alternando itens li dentro de um ul isso perde a associação semântica entre o termo e sua descrição um único dt pode ser seguido de vários elementos dd um termo várias descrições e vários elementos dt podem compartilhar um único dd vários termos com a mesma definição ambos são válidos dl dt coffee dt dt espresso dt dd a hot caffeinated drink dd dt water dt dd a drink with no calories dd dd also used for cooking and cleaning dd dl copiar uso incorreto comum o dl já foi usado de forma indevida apenas pelo seu recuo padrão nunca o use apenas para recuo visual use margin padding do css para isso use dl somente quando o conteúdo for genuinamente dados de termo descrição consulte as páginas dedicadas de dl dt e dd para mais detalhes listas aninhadas em html uma lista aninhada contém uma lista dentro de outra lista exemplo de lista aninhada em html doctype html html head title title of the document title head body h2 a nested html list h2 p a nested list contains a list inside a list p ul li copybooks li li books ul li detective books li li roman books li li fairy tale books li ul li ul body html copiar experimente você mesmo a lista aninhada deve ser colocada dentro de um elemento li e não diretamente entre os itens li do pai um ul ol não é um filho direto válido de outro ul ol você pode misturar tipos de lista uma lista ordenada pode ser aninhada dentro de uma lista não ordenada e vice versa os navegadores automaticamente recuam cada nível aninhado via o padding esquerdo padrão em ul ol para que a hierarquia seja lida com clareza exemplo de lista aninhada mista lista ordenada dentro de uma lista não ordenada doctype html html head title title of the document title head body h2 shopping list h2 ul li fruit li li drinks in order of preference ol li coffee li li tea li li water li ol li li bread li ul body html copiar controle de contagem de listas por padrão uma lista ordenada numera seus itens a partir de 1 três atributos permitem substituir esse comportamento start em ol o número a partir do qual a lista começa a contar reversed em ol conta de forma decrescente em vez de crescente value em um li específico define manualmente o número daquele item os itens seguintes continuam a partir dele usando start para continuar uma lista entre seções o atributo start é mais útil quando uma única lista lógica é dividida por títulos imagens ou parágrafos por exemplo se a primeira seção termina na etapa 39 você continua as etapas na segunda seção com ol start 40 para que a numeração permaneça correta após a quebra exemplo de lista html contando a partir de um número especificado doctype html html head title title of the document title head body h2 list counting control h2 p continuing a procedure whose first section ended at step 39 p ol start 40 li pen li li pencil li li copybook li ol ol type i start 40 li pen li li pencil li li copybook li ol body html copiar experimente você mesmo exemplo de reversed e value o atributo reversed numera a lista de maior para menor útil para contagens regressivas ou rankings top n exibidos do pior para o melhor o atributo value em um único li salta a contagem para um número específico e os itens seguintes continuam a partir dele doctype html html head title title of the document title head body h2 a reversed list countdown h2 ol reversed li bronze medal li li silver medal li li gold medal li ol h2 setting an item s number with value h2 ol li first li li value 5 jumps to 5 li li continues at 6 li ol body html copiar a lista invertida acima renderiza como 3 bronze medal 2 silver medal 1 gold medal na segunda lista o segundo item é forçado para 5 portanto o terceiro item mostra 6 acessibilidade de listas html as listas transmitem significado para tecnologias assistivas não apenas estilo visual quando um leitor de tela chega a um ul ol ou dl ele anuncia o papel da lista e geralmente o número de itens por exemplo lista 3 itens depois anuncia a posição de cada item esse contexto ajuda os usuários que não conseguem ver os marcadores ou números a entender a estrutura portanto escolher o tipo correto de lista também é uma decisão de acessibilidade algumas diretrizes práticas remover marcadores pode remover a semântica da lista no safari com voiceover aplicar list style none comum para menus de navegação e listas com estilo personalizado pode fazer o navegador descartar o papel implícito de lista de modo que ela não seja mais anunciada como tal para preservar a semântica adicione um role list explícito ul role list style list style none li home li li about li li contact li ul copiar envolva listas de navegação em nav um menu de site é convencionalmente uma lista de links dentro de um nav o nav expõe um ponto de referência de navegação para o qual usuários de leitores de tela podem pular enquanto o ul interno mantém os itens agrupados e contados nav aria label main ul li a href home home a li li a href about about a li li a href contact contact a li ul nav copiar use ol quando a ordem for significativa etapas classificações instruções e ul quando não for leitores de tela anunciam as posições de listas ordenadas portanto a distinção é transmitida aos usuários não apenas exibida visualmente lista horizontal com css as listas html podem ser estilizadas de muitas maneiras diferentes com css você pode estilizar listas html usando diferentes propriedades css por exemplo pode criar um menu de navegação definindo list style type none para remover os marcadores e display flex para dispor os itens em uma linha as cores abaixo são escritas como valores hexadecimais literais para manter o exemplo independente em um projeto real você normalmente faria referência às variáveis de cor do seu sistema de design propriedades personalizadas do css em vez de codificar valores hexadecimais diretamente exemplo de lista horizontal com css doctype html html head title title of the document title style ul list style type none margin 0 padding 0 display flex background color f44336 li a display block color white text align center padding 16 px text decoration none li a hover background color 981816 style head body h2 navigation menu example h2 p you can style html lists using different css properties for example you can create a navigation menu styling the list horizontally p ul li a href home home a li li a href https www w3docs com tool tools a li li a href https www w3docs com snippets snippets a li li a href https www w3docs com quiz quizzes a li li a href https www w3docs com string functions string functions a li ul body html copiar experimente você mesmo praticar prática quais são os diferentes tipos de listas html mencionados no artigo selecione todas as opções corretas quais são os diferentes tipos de listas html mencionados no artigo selecione todas as opções corretas lista ordenada lista não ordena...