Sobre `<dl>` (2021)

 (benmyers.dev)
1 pontos por GN⁺ 9 시간 전 | 2 comentários | Compartilhar no WhatsApp
  • `` é um elemento HTML que representa semanticamente uma lista de pares nome–valor, sendo adequado para padrões de UI como comodidades, itens de cobrança e glossários técnicos
  • Uma lista de descrição tem a estrutura de colocar nomes** e ** valores dentro de um ``, e um mesmo nome pode ter vários valores
  • Quando é preciso agrupar e relacionados para fins de estilização, pela especificação apenas um wrapper `` pode envolver o grupo
  • Se você usar apenas aninhados, tecnologias assistivas podem ter dificuldade para reconhecer o padrão de lista, mas oferece vantagens de navegação como quantidade de itens, posição atual e pular a lista
  • Dados de números, habilidades e ações em formatos diferentes, como em um bloco de estatísticas de Dungeons & Dragons, também podem ser divididos em listas de descrição, mostrando bem sua versatilidade

O padrão representado por ``

  • `` é um elemento HTML que representa uma lista de pares nome–valor, dando semântica a um padrão que aparece repetidamente em interfaces web
  • Estruturas em que nome e valor formam um par, como comodidades de hospedagem, itens individuais do aluguel mensal e glossários técnicos, são candidatas típicas
  • não é um elemento isolado, mas forma grupos nome–valor pela combinação de três elementos:, e
  • Antes do HTML5, `` era chamado de definition list e originalmente servia para representar glossários de termos e definições

Estrutura básica de uma lista de descrição

  • , , ``

    • **** envolve a lista de descrição inteira, em um papel parecido com o de ou `` envolvendo uma lista completa
    • ** é o termo de descrição (description term) e representa o nome, enquanto ** é o detalhe da descrição (description detail) e representa o valor
    • e também eram conhecidos anteriormente como definition term e definition detail, respectivamente
    • A estrutura básica é colocar um depois de um

	Title
	Designing with Web Standards

  • Vários pares nome–valor

    • Para adicionar outros pares nome–valor na mesma lista, basta colocar um novo e em sequência

	Title
	Designing with Web Standards
	Publisher
	New Riders Pub; 3rd edition (October 19, 2009)

  • Vários valores para um mesmo nome

    • Um único pode ter vários **valores**
    • Isso permite expressar diretamente uma estrutura em que um mesmo nome tem vários valores, como no caso de um livro com vários autores

	Title
	Designing with Web Standards
	Author
	Jeffrey Zeldman
	Ethan Marcotte
	Publisher
	New Riders Pub; 3rd edition (October 19, 2009)

  • Wrapper para estilização

    • Quando for preciso agrupar e relacionados para fins de estilização, é possível usar um wrapper ``
    • Pela especificação, o único elemento wrapper que pode envolver um grupo / é ``
    • Mais detalhes sobre a estrutura permitida e as restrições podem ser vistos na documentação do `` no MDN ou na especificação HTML

		Title
		Designing with Web Standards

		Author
		Jeffrey Zeldman
		Ethan Marcotte

Por que a semântica é importante

  • Grupos nome–valor podem ser montados visualmente só com `` aninhados, mas fica difícil para navegadores ou tecnologias assistivas reconhecerem isso como um padrão de lista
  • A escolha de um elemento semântico pode ser guiada pela pergunta: quando o computador reconhece esse padrão, isso gera um benefício real para a pessoa usuária?
  • Ao usar ``, pessoas que usam leitores de tela conseguem navegar mais facilmente por uma lista de grupos nome–valor
    • Podem saber a quantidade de grupos nome–valor na lista
    • Podem identificar em que posição atual estão na lista
    • Se não tiverem interesse, podem pular a lista inteira como se fosse um bloco único
  • Em uma estrutura com aninhados, cada nome e valor tende a ser tratado como um nó de texto independente, enquanto dá significado estrutural à mesma informação
  • Essas vantagens são de fato oferecidas ao usar `` na maioria das combinações de navegador/leitor de tela
  • Porém, como o suporte a ainda não é totalmente universal, se a experiência de fallback como nós de texto independentes não for suficiente, você também pode optar por outro elemento, como, até que o suporte melhore

Exemplo de bloco de estatísticas de Dungeons & Dragons

  • O bloco de estatísticas de Dungeons & Dragons é um exemplo com muitos pares nome–valor, e nele é possível encontrar vários candidatos a listas de descrição
  • Valores básicos como Armor Class, Hit Points e Speed, atributos como STR e DEX, informações como Senses, Languages e Challenge, além de Traits e Actions, podem ser divididos em listas de descrição separadas
  • Mesmo listas visualmente diferentes, como uma lista de atributos e uma lista de ataques, ainda podem ser representadas pelo padrão de lista de descrição
  • Para distinguir várias listas de descrição ou conectá-las a um título, é possível usar aria-label e aria-labelledby
  • Essa marcação é apenas uma das formas possíveis e mostra como o padrão `` é versátil o bastante para se aplicar a conjuntos de dados de formatos diferentes

Leituras relacionadas

2 comentários

 
GN⁺ 6 시간 전
Opiniões no Lobste.rs
  • É uma pena que o Markdown não tenha listas de descrição (description list)
    • O Markdown ao estilo Pandoc suporta pelo menos duas sintaxes para listas de descrição
      mas, de fato, a maioria das implementações não oferece suporte. Em contrapartida, o Typst, que é um sistema de composição/linguagem de marcação, oferece listas de descrição como sintaxe de primeira classe, como em / term: description, e acho que isso combina bem com listas com marcadores - e listas numeradas automáticas com +
    • Lembro que algumas implementações, como Hugo, Pandoc e GFM, suportam algo nesse formato 
      dt  
: dd  

dt  
: dd
    • O Markdown pode ter tudo o que o HTML tem, porque é um superconjunto do HTML
    • https://www.djot.net/ suporta listas de descrição. Mais importante ainda: o Djot não é um superconjunto do HTML, então pode ser usado fora de navegadores com suporte pesado a HTML
  • Pessoalmente, está entre os cinco melhores elementos de todos os tempos
    • Junto com <details>, com certeza fica no topo. Eu gostaria que houvesse mais elementos interativos assim
  • Também é possível colocar vários <dt> em um mesmo item. Isso pode ser usado para expressar coisas como sinônimos em listas de dicionário
    Ao estilizar com CSS, vale a pena se acostumar com o seletor de irmãos adjacentes
    Referência: https://developer.mozilla.org/en-US/docs/…
 
GN⁺ 9 시간 전
Comentários do Hacker News

  • Isto está errado: não tem um papel implícito correspondente, mas pode receber os papéis `group`, `list`, `none` e `presentation` `aria-label` só pode ser definido em elementos com um papel compatível, implícito ou explícito, e embora `aria-label` seja permitido na maioria dos papéis, aqui `presentation` e `none` ficam de fora, então sobram apenas `group` e `list` `group` é estranho e `list` é aceitável, então a conclusão é: **remover o aria-label** ou adicionar `role="list"`. Nesse caso, os filhos também precisariam de `role="listitem"` O ponto que o texto deixou passar é que não existe apenas um; pode haver vários em sequência. O exemplo da especificação é bom: https://html.spec.whatwg.org/multipage/grouping-content.html... Isto não é um par nome-valor, e sim um grupo de nome-valor

    • Eu realmente não sabia disso. Fiquei curioso: você colocaria role="listitem" no elemento que envolve e ? `role="listitem"` parece ser permitido em , mas quando vários são agrupados juntos isso não parece exato, e também não sei se isso atrapalharia a forma como é interpretado originalmente como termo
    • O antigo artigo do HTML5 Doctor continua sendo o meu favorito: https://html5doctor.com/element-index/

  • Isto provavelmente não vai ser popular aqui, mas minha vida ficou mais fácil desde que parei de tentar usar HTML semântico. O design simplesmente não é bom Toda vez que tentei usar , acabei me arrependendo. Porque eu precisava de várias camadas de wrappers, ou de divisórias entre seções, ou de ícones, ou de um título que abrangesse vários pares chave-valor Há alguma flexibilidade, mas está muito longe de dar conta de verdade do conceito generalizado que diz representar. Claro, eu ainda uso elementos equivalentes com benefícios observáveis, como e ``, mas se não encaixa exatamente no modelo de dados e eu preciso sobrescrever tudo, então não é uma escolha prática Se em 99% dos usos você está contornando a API, então não deveria ser tão controverso dizer que isso provavelmente é culpa da API

    • Como alguém que usa leitor de tela todos os dias, concordo plenamente Seria melhor para todo mundo se o W3C largasse a ladainha ideológica de pureza semântica e adotasse uma abordagem mais realista. Em vez de se preocupar se a API é semanticamente pura, deveria olhar para o que os desenvolvedores querem fazer, que tipo de gambiarra vão usar mesmo que você seja contra, e como permitir isso da forma mais benéfica possível para todos ARIA live region é um exemplo perfeito. O que o desenvolvedor realmente quer é document.speakText. O que ele de fato tem é uma API estranha que lê o texto da página quando ele muda. É preciso fazer a ponte entre as duas coisas, e mesmo quando bem implementado isso é difícil e quase um hack. Mas pelo menos o método de live region é HTML semanticamente puro, imagino
    • Então isso me soa mais como culpa do CSS. Assim como display:contents permite remover wrappers, eu acho que deveria haver uma forma de agrupar elementos como se tivessem um ancestral comum :wrap(dt, dt+dd) {border: solid 1px}
    • Tenho uma sensação parecida em relação ao HTTP. Este protocolo encaixa muito bem em armazenamentos de recursos como o S3. GET, PUT e DELETE fazem todo sentido, e os códigos de status HTTP também foram feitos exatamente para esse tipo de uso Mas, como desenvolvedor web, na maior parte do tempo você não está criando um armazenamento de recursos. Isso é algo muito genérico que pode ser criado uma vez e usado por milhões de apps. Quando alguém escreve código que interage com HTTP, na maioria das vezes está fazendo chamada de procedimento remoto Se você usa GraphQL, gRPC ou outro sistema de chamada de procedimento remoto, evita tudo isso de uma vez. Você envia tudo por POST para um único endpoint e sobe mais uma camada de abstração, sem precisar devolver erros 4XX/5XX para cada situação muito específica da aplicação Os autores das RFCs claramente exageraram um pouco. 402 Payment Required, 407 Proxy Authentication Required e 508 Loop Detected parecem tentativas de enfiar funcionalidades específicas de certos apps ou tipos de implantação na base da web Eu não entendo por que as necessidades específicas dos autores das RFCs são implementadas na base da web, enquanto as minhas precisam encontrar algum ponto de coincidência e enfiar todos os elementos específicos da aplicação em 400 Bad Request ou 500 Internal Server Error. Sempre reviro os olhos quando vejo uma aplicação web usando de fato mais que o mínimo de códigos de status HTTP. Isso deveria ficar na camada da aplicação. Este protocolo não foi feito para você, mas para apps LAMP stack que em grande parte serviam ativos estáticos

  • Aula de história das listas. Se você olhar o manual de DCF/GML de mainframe IBM de 1985 abaixo, DL-DT-DD já existia antes da web No documento de mais de 40 anos aparecem Definition lists (DL), mas também Glossary lists (GL), Ordered lists (OL), Unordered lists (UL) e Simple lists (SL) ibm :: 370 :: DCF :: SH35-0050-2 Document Composition Facility Generalized Markup Language Implementation Guide Rel 3 Mar85 https://archive.org/details/bitsavers_ibm370DCFSpositionFaci...

    • GML remonta a 1969, e SGML aos anos 1970. Internamente eles usavam algo chamado BookMaster, que às vezes parecia um antecessor do HTML Em vez de ``, era :p., e em vez de `

  • era:li.`. Na época em que o TBL estava desenvolvendo HTML e HTTP, por volta de 1990–1991, também houve uma tentativa chamada HyTime, uma aplicação SGML focada em hipermídia. O HTML a superou bem rápido Sobre Charles Goldfarb, que liderou GML/SGML, veja https://en.wikipedia.org/wiki/Charles_Goldfarb; sobre SGML, veja https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La...

    • Pelo que sei, a Generalized Markup Language da IBM evoluiu para SGML (Standard Generalized Markup Language), e SGML era muito usado no CERN, onde Tim Berners-Lee estava trabalhando no HTML. O HTML derivou bastante disso O interessante no HTML é que algum tipo de linguagem de marcação ficou circulando por décadas até que Berners-Lee adicionou hiperlinks a ela
    • Agora não é description list?

  • O primeiro site da web usava muito `` https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ é uma espécie de landing page que dá contexto e direcionamento sobre o verdadeiro primeiro site

  • As toolkits GUI nativas morreram todas, e agora as pessoas conseguem escrever longos ensaios sobre um único elemento HTML. Não sei se isso é progresso

  • Antes do HTML5, isto era chamado de definition list, e eu só agora descobri que originalmente `` servia apenas para representar glossários feitos de termos e definições. Então eu estava chamando isso pelo nome errado há 10 anos

    • E agora b quer dizer “bring attention to”. Ah, fala sério
    • Você não está sozinho. Foi a segunda vez que vi isso esta semana, e na primeira achei que fosse um erro
    • Só agora descobri que o nome mudou de definition list
    • Não quero conferir em que ano o HTML5 foi padronizado. Grande chance de já ter mais de 10 anos ;)

  • Bom artigo. Só para fazer uma correção bem pequena: o elemento small não deveria ser usado para subtítulos; para isso deveria existir o elemento hgroup O elemento small representa comentários acessórios, como texto miúdo. Texto miúdo normalmente inclui isenções de responsabilidade, advertências, restrições legais e copyright. Às vezes também é usado para cumprir exigências de atribuição ou licenciamento (https://html.spec.whatwg.org/multipage/text-level-semantics....)

  • Há uma nota útil sobre o quanto os leitores de tela suportam bem ``: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...

  • O último exemplo da ficha de atributos de DnD me fez pensar se também é válido anexar dentro de outro Por exemplo, algo como Actions ...?

  • Eu gosto de . Pelo menos no passado, parecia que as tabelas eram mal utilizadas com ainda mais frequência para imitar , e a inconveniência da marcação de tabelas é pior do que ter vários div

    • Se você omitir as tags de fechamento desnecessárias, não é tão inconveniente assim first second what ever Acho isso mais simples e limpo do que qualquer sintaxe de tabela em Markdown
    • Verdade. Mas forçar tabelas a imitar `` ainda era um uso indevido muito melhor do que muitos outros usos indevidos de tabelas
    • Eu sempre pensei em `` como se fosse uma única linha de uma tabela