Aprenda a criar Listas Simples e Listas Ordenadas em HTML

Lista de ingredientes, lista de pessoas, passo-a-passo enumerado de um tutorial...listas e mais listas.

Apostila online e gratuita de HTML para download
Tutorial completo de HTML para iniciantesSão elementos textuais muito importantes e são de suma importância na criação de sites, para uma boa experiência do usuário e até para o SEO (otimização de sites para buscadores).


Neste tutorial de nossa apostila de HTML vamos aprender como criar dois tipos de listas, as mais comuns:

  • listas as simples (que somente apresentam aquelas bolinhas ao lado), que são mostrados na figura de cima

  • listas enumeradas (que mostram uma sequência numérica)., que estão sendo exibidas ao lado



Qual a utilidade das listas para um site ?

Não tenha dúvidas e nem importa qual é seu site nem sua temática, sempre que possível use listas para organizar seu conteúdo.

As listas são muito úteis para guiar os usuários, pois organiza de forma incrível um texto.
Se seu site for de tutoriais, dicas ou assuntos do tipo, usar uma lista que tem uma ordem numérica pode ser uma boa pedida, pois passa a impressão de um passo-a-passo, e eles fazem bastante sucesso na internet, pois passam a impressão de ser algo simples e óbvio a ser seguido.

Há outros nichos de site que as listas são praticamente obrigatórias, como em sites de receitas culinárias.
Esse é um bom exemplo de uso das listas (uso este que pode ser estendido para outros tipos de site que você venha a criar para você ou para seus clientes), pois será necessário uma lista sem ordem, apenas para descrever os ingredientes, e outra lista, mas esta deverá ser ordenada numericamente já que é necessário seguir uma ordem lógica para preparar a receita.

Outro aspecto importante, que você provavelmente não deva ter percebido como leitor, mas terá que saber já que é um webmaster, e que nenhum outro site ou curso de HTML ensina é que as listas chamam atenção.
As pessoas vão direto para listas para olhar seu conteúdo.
Uma boa dica para chamar atenção e prender seus leitores no seu site é usar listas numéricas com os números no título, por exemplo: "7 dicas sobre CSS", "Os 5 erros mais comuns na criação de sites", "Os 5 melhores cursos de webdesign grátis e online".

Agora que sabe a importância das listas, vamos aprender como cria-las em HTML.

A tag <li> - Itens e listas

Antes de entrarmos em detalhes como fazer as listas em HTML, precisamos entender como funcionam.

Existem mais de um tipo de listas, neste tutorial de nosso curso de HTML, vamos estudar dois tipos: as listas ordenadas (com uma ordem numérica) e as listas não ordenadas (sem números, apenas aquelas bolinhas, chamadas bullets).

Esses números ou bullets são chamados de itens da lista, e são definidos usando a seguinte tag:
<li> e </li>

Onde 'li' é de list item, do inglês.
Usamos essas tags <li> e </li> para cada um dos itens de uma lista.

Essa tag é sempre a mesma. Mas, se a tag é a mesma, como vamos dizer para o HTML que tipo de lista queremos? Se ordenada com números ou só aquelas listas de bolinha?

É aí que entra as tags de lista.
Neste artigo de HTML vamos ensinar dois tipos de listas (ordenadas e não ordenadas).

Usamos a tag de lista apenas uma vez, para definir o tipo de lista. Uma vez definida a lista, vamos colocar a tag <li> de itens dentro desta tag de lista, aninhada.

Seja <tag_de_lista> um exemplo de tag que define o tipo de lista, a sintaxe geral das listas será, portanto:
<tag_de_lista>
	<li> Elemento 1 da lista </li>
	<li> Elemento 2 da lista </li>
	<li> Elemento 3 da lista </li>
</tag_de_lista>
Vamos agora estudar as tags de listas.



A tag <ul> - Lista de itens não ordenados

O exemplo mais simples de de lista é aquela que tem apenas uns pontos, ou bolinhas.

É a lista do tipo "Unordered List" (lista sem ordem), onde os itens da lista aparecem na ordem que você colocar no código HTML, e não tem nenhuma numeração ou lógica de ordenamento, apenas a ordem dita por você.

A sintaxe para esse tipo de tag é:
<ul> e </ul>

Por exemplo, que linguagens e tecnologias precisamos aprender para ser um webmaster profissional?
O código HTML de nosso website que mostra essa lista será:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> O que aprender para criar um site </title>
		<meta name="description" content="Veja o que é necessário aprender para ser um webmaster">
	</head>
 
	<body>
		<h1>Lista do que e necessario aprender para criar sites profissionais:</h1>
 
		<ul>
			<li>CSS</li>
			<li>PHP</li>
			<li>JavaScript</li>
			<li>HTML 5.0</li>
			<li>MySQL (Banco de dados)</li>
		</ul>
 
	</body>
 
</html>
Onde o resultado é o seguinte:

  • CSS
  • PHP
  • JavaScript
  • HTML 5.0
  • MySQL (Banco de dados)

A tag <ol> - Lista de itens ordenados por número

Vamos agora ensinar como criar listas com uma ordem numérica.
Certamente você já deve ter criado algum documento no Microsoft Word, por exemplo, onde você escrevia uma linha, dava enter para escrever outras linhas da lista, e a cada vez que fazia isso aparecia automaticamente os números no início da linha.

É exatamente isto que vamos fazer.
Com tag <ol> não é necessário colocar o número, somente os itens da lista, pois os navegadores (browsers) farão a contagem automaticamente ao interpretarem o código HTML que você criou.

A sintaxe é análoga ao da lista sem ordem (<ul>):
<ol> e </ol>

O 'ol' é do inglês "Ordered List".

No exemplo passado criamos um site que exibia as principais linguagens e ferramentes para nos tornarmos webmasters profissionais, porém não vamos aprender tudo ao mesmo tempo muito menos em qualquer ordem, o indicado é seguir uma ordem de aprendizado.

Vamos criar um site que exiba a mesma lista passada, mas agora exibida em uma lista ordenada.
Veja como ficará o código HTML de nosso site:
<!DOCTYPE html>
 
<html>
	<head>
  		<title> O que aprender para criar um site </title>
		<meta name="description" content="Veja o que é necessário aprender para ser um webmaster">
	</head>
 
	<body>
		<h1>Lista do que e necessario aprender para criar sites profissionais:</h1>
 
		<ol>
			<li>HTML 5.0</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>PHP</li>
			<li>MySQL (Banco de dados)</li>
		</ol>
 
	</body>
 
</html>
E o resultado é o seguinte:

  1. HTML 5.0
  2. CSS
  3. JavaScript
  4. PHP
  5. MySQL (Banco de dados)


Exercícios de HTML:

Questão 1:

Crie um site que exiba 10 tags que você aprendeu aqui, em nosso curso online e gratuito de HTML.
Essa lista não precisa ser ordenada, apenas vá citando elas com a tag <ul>.

Questão 2:

Pegue a lista da questão anterior e ordena ela com a tag <ol>, que exibirá uma sequência numérica.
Essa ordem de números significará as tags mais importantes, em sua opinião.
Por exemplo, as três tags mais importantes são: <html>, <head> e <body>

Questão 3:

O que aparece se usarmos somente a tag <li>, sem definir uma <ol> ou <ul> ?
Teste.

Um comentário:

Gabriela Dias disse...

Tudo que eu não entendo lendo o conteúdo eu aprendo nessas atividades, eu tinha lido isso em outro curso online mas esse negocio de listas ordenadas e não ornadas me confundia totalmente, lendo lá em cima eu consegui diferenciar elas e fixar na mente com os exercícios.

Obrigada a todos do curso de HTML Progressivo :3