Uma Lista errada em HTML
Tags: beginners, webdev, html, frontend
Published: 2023-03-15 17:40:55

## No Inicio...

Antes de tudo, realmente estou no inicio da minha carreira como programador. E tenho feitos muitos erros, admito. Isso por si não é um problema tão grande. O ponto é que eu estava insistindo em um erro sem saber.

Quando estava aprendendo a criar as minhas primeiras páginas HTML fui ensinado a trabalhar com as mais diversas ``<tags>``, e dentre elas as listas, ``<ul>`` e ``<ol>``.

## O erro

Foi então que eu comecei a desenvolver minhas páginas e em toda lista que eu precisava fazer em vez de colocar tag `<li>` de List Item, eu colocava `<ln>`.

O problema aqui é que essa tag não existe no HTML. Ou seja, durante todo esse tempo eu estava usando um elemento HTML que só existia nos meu códigos e que não gerava qualquer diferença para a estrutura dos mesmos.

## Uma visão de fora

Segui assim até essa semana, quando durante uma discussão sobre os códigos junto aos meus colegas de estudos, um deles me perguntou o que era aquela tal `<ln>`, e eu não soube responder.

Essa duvida inundou o meu pensamento, pois mais ninguém sabia se realmente existia essa tag. Perguntei para alguns outros conhecidos no mundo da TI que possuem bem mais experiência do que eu, e dois deles me deram as seguintes respostas:

> Pode ser que tenha alguma equivalência em versões anteriores do HTML.
-- <a href="https://www.linkedin.com/in/bruno-de-lucca/">Bruno de Lucca</a>

###

> Por padrão, no HTML puro, sem frameworks ou similares, quando você nomeia uma tag, ele a considera como uma `<div>` genérica com `display:block`.
-- <a href="https://www.linkedin.com/in/airamvieira/">Leonardo Airam Vieira</a>

Foi aí que notei meu erro, e obtive uma explicação do porque ainda sim funcionava o código.

## Mas mesmo errando se adquire conhecimento

No entanto, durante a minha busca, utilizei o queridinho do momento, o ChatGPT, para saber se realmente existia a `<ln>`.

Porem encontrei outro recurso. Alem das famosas `<ul>` e `<ol>` com  suas `<li>`, "descobri" sobre as tags `<dl>`, `<dt>` e `<dd>`, cuja estrutura semântica é a seguinte:

```html
<dl>
   <dt>Termo 1</dt>
   <dd>Definição 1</dd>
   <dt>Termo 2</dt>
   <dd>Definição 2</dd>
   <dt>Termo 3</dt>
   <dd>Definição 3</dd>
<dl>
```

1. A tag `<dl>` é usada para criar a lista de definições. Ela deve ser usada como o elemento pai que contém todas as definições da lista.
2. A tag `<dt>` é usada para representar o termo ou item que está sendo definido. Ela deve ser usada como um elemento filho da tag `<dl>`.
3. A tag `<dd>`, por sua vez, é usada para representar a definição do termo ou item. Ela deve ser usada como um elemento filho da tag `<dl>`, após o `<dt>` correspondente.

Essa estrutura de lista é utilizada principalmente para dicionários ou artigos que utilizam Termos que necessitam de uma explicação, ou como a própria tag indica, uma definição externa ao conteúdo apresentado.

Um exemplo prático seria o seguinte:

```html

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, ou Linguagem de Marcação de HyperTexto,
      utilizado para estruturar a maior parte das
      páginas Web na internet.</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, ou Folha de Estilo em Cascata,
      utilizado para "decorar" e estilizar as páginas HTML.</dd>
  
  <dt>JavaScript</dt>
  <dd>Uma linguagem de programação utilizada em páginas web para
      gerar interações com o usuário e
      se comunicar com servidores, etc.</dd>
</dl>
```

## Conclusões

Sendo assim, um pequeno erro que já nem lembro mais como se iniciou, me gerou uma dúvida, e essa dúvida me trouxe dois novos conhecimentos sobre o HTML:

1. Que `<tags>` inexistentes são lidas como `<divs>`; e
2. Existe um conjuntos de tags expecificas para a criação de uma lista de definições dentro HTML.

Logo, vejo que eu realmente tenho muito o que aprender, porém, mesmo os mais experientes não sabem de tudo.