Uma Lista errada em HTML

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.
-- Bruno de Lucca

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.
-- Leonardo Airam Vieira

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:

<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:

<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.

Comments

[Angela Caldas]

Duas coisas realmente muito massas que surgiram da nossa conversa: aprendi essa da tag inexistente virar div (isso explodiu minha cabeça) e sobre a dl, dt e dd! Muito obrigada por ter compartilhado!

[Ezequiel Otoni]

Caramba Html vive me surpreendendo. Sempre aparece uma coisa que não sabia e nosso código fica menos rico e semântico por não usar. Parabéns mano e obrigado por compartilhar 👏🏻👏🏻