HTML Outras Listas

Estamos falando de listas HTML Other . As listas de descrição também são suportadas por HTML .

Uma lista de descrição contém uma lista de termos acompanhados por uma descrição. Listas HTML são usadas para descrever informações específicas.



Listas de descrição HTML

Nas listas HTML , uma lista de descrição consiste em uma lista de termos descritos de uma maneira particular em relação às outras listas HTML.

A lista de descrição é definida pela tag <dl> , a tag <dt> determina o termo (nome) e cada termo é descrito pela tag <dd> :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Tea</dt>
<dd>- black cold Cofee</dd>
<dt>Juice</dt>
<dd>- black cold drink</dd>
</dl>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo de lista de descrição:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<p>Companies around the world:</p>
<dl>
<dt>Telsa</dt>
<dd>Founder of Tesla is Elon Must.</dd>
<dt>Microsoft</dt>
<dd>Founder of Microsoft is Bill Gates</dd>
<dt>Facebook</dt>
<dd>Founder of Facebook is Mark Zukerberg</dd>
</dl>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Termo único, várias descrições

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Chrome</dt>
<dt>Google Chrome</dt>
<dt>Gc</dt>
<dd>
Google Chrome is a free, open source, cross-platform web browser developed by Google.
</dd>
<dd>
It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, and also for Android, where it is the default browser.
</dd>
</dl>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Vários termos, descrição única

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Chrome</dt>
<dt>Google Chrome</dt>
<dt>Gc</dt>
<dd>
Google Chrome is a free, open source, cross-platform web browser developed by Google.
</dd>
</dl>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Metadados

Os metadados podem ser apresentados como pares chave-valor com listas de descrição.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Name</dt>
<dd>Google Chorme</dd>
<dt>First Released</dt>
<dd>2008</dd>
<dt>Programming languages</dt>
<dd>JavaScript, Java, Python, HTML, C, C++, Assembly language</dd>
<dt>Developers</dt>
<dd>Google</dd>
</dl>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conselho: um separador de valor-chave CSS pode ser útil, por exemplo:

dt::após {
conteúdo: “:”;
}


Marcas de Lista HTML

Marcação Visão geral
<li> Os itens da lista são definidos por esta propriedade em outras listas HTML.
<ol> Listas que são ordenadas .quando se trata de listas HTML outras
<dt> Representa um termo em uma lista de descrição.
<ul> As listas são definidas como não ordenadas em outras listas HTML.
<dl> Especifica uma lista de descrição.
<dd> Fornece uma lista de descrição para o termo.

Visite nossa referência de tags HTML se desejar um resumo exaustivo de todas as tags HTML acessíveis.


Vantagens de usar a lista de descrição HTML

Aqui estão alguns benefícios das listas de descrição HTML:

  • Fornece informações claras e estruturadas: as listas de descrição permitem que você apresente as informações de maneira clara e estruturada, tornando mais fácil para os leitores entender e digerir as informações.
  • Ajuda na acessibilidade: as listas de descrição HTML podem ser facilmente lidas por leitores de tela e outras tecnologias assistivas, tornando-as uma excelente maneira de melhorar a acessibilidade do seu conteúdo.
  • Melhora o SEO: ao usar listas de descrição, você pode incluir palavras-chave e frases importantes de uma maneira fácil para os mecanismos de pesquisa reconhecerem e indexarem, melhorando o SEO do seu conteúdo.
  • Economiza espaço: as listas de descrição permitem que você apresente informações de maneira mais concisa e compacta, economizando espaço em sua página da Web e tornando mais fácil para os leitores digitalizar e encontrar as informações de que precisam.
  • Suporta vários formatos: as listas de descrição HTML podem ser facilmente formatadas e estilizadas usando CSS, permitindo que você personalize a aparência e o layout do seu conteúdo para atender às suas necessidades.

Se este artigo de alguma forma atendeu aos seus requisitos educacionais, compartilhe esse conteúdo significativo com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone