Um post de blog com todos os elementos HTML

 (patrickweaver.net)
5 pontos por GN⁺ 2023-08-14 | 1 comentários | Compartilhar no WhatsApp
  • Estudando acessibilidade na web, Patrick Weaver experimentou HTML semântico aplicando mais de 100 tags HTML reais em uma página do seu site pessoal baseado em Eleventy
  • O objetivo inicial era evitar ser travado no futuro pelo CSS de elementos pouco familiares ao escrever novos textos, mas concluir este único post levou um ano e meio
  • Com base na lista de elementos HTML do MDN Web Docs, ele revisitou elementos estruturais como , , , , ,
  • Elementos menos familiares como , , , , , revelam casos de uso concretos como direcionalidade, notação de pronúncia, saída de programa, quebra de linha, interatividade e web components
  • Entre suporte de navegador, geração de sites estáticos, reprodução de vídeo no Safari e comportamento de tags deprecated, ainda permanecem marcas de compatibilidade entre o significado do HTML e sua implementação real

O ponto de partida do experimento e seu objetivo

  • Depois de aprender mais sobre acessibilidade na web, ele começou a examinar elementos HTML pouco usados e a incorporá-los em seu site pessoal
  • O site foi feito com Eleventy, envolvendo o conteúdo dos posts do blog com e adicionando ao template de layout
  • Ele já havia ajustado o estilo de e para legendas de imagem, e também tinha interesse em implementar footnotes ou sidenotes relacionadas ao Recurse
  • Com base na lista de elementos HTML do MDN Web Docs, decidiu tentar usar todos os elementos em um único post
    • O objetivo era evitar que atualizações de CSS fossem adiadas no futuro por causa de elementos nunca usados antes ao escrever novos textos
    • Na prática, levou um ano e meio para ajustar estilos e templates por causa deste único texto
  • Há elementos como `` que são difíceis de inserir diretamente no corpo do texto, mas a página foi montada para que todos os elementos apareçam em algum lugar de patrickweaver.net

Estrutura do documento e elementos de metadados

  • `` não exigiu mudanças separadas, mas ele percebeu que nem sempre se lembra de atributos lang, como lang="en"
  • Antes de escrever este texto, `` não era um elemento familiar para ele, e depois passou a adicioná-lo ao template de layout junto com links relativos
    • Surgiram alguns problemas com desenvolvimento local e links relativos, mas foram resolvidos com facilidade
    • , , , , `` já eram elementos familiares e já existiam no site
  • Ao ler a documentação de ``, ele encontrou atributos como onbeforeprint e onblur
    • onbeforeprint se relacionava a uma funcionalidade que antes ele havia tratado de forma mais indireta
    • onblur parecia ter como uso principal algo parecido com pop-ups irritantes

Seções de conteúdo e hierarquia de títulos

  • Ele pensava que `` era exclusivo para endereços postais, mas descobriu que também pode ser usado para endereços de e-mail e links
  • O template de post do blog já usava ``, e depois de ler a documentação ele passou a pensar se isso também faria sentido em todas as páginas do site
  • Na área de footnotes, ele usa ``
    • `` representa uma parte indiretamente relacionada ao conteúdo principal do documento
    • Isso deixa aberta a possibilidade de futuramente estilizar essa área como sidenote
  • O design do site originalmente não tinha ``, mas ele o adicionou neste texto
  • Ele usava `` apenas no topo da página, mas confirmou que vários podem ser usados e passou a aplicá-lo também na área de cabeçalho de cada post do blog
  • Ele também reorganizou a hierarquia de títulos
    • Antes, usava o nome do site como , o nome da seção como , e o título do post como ``
    • Depois de ler a documentação e dicas do W3C, mudou o alvo de `` conforme a página, tratando o estilo com classes
    • Considerou essa abordagem mais alinhada à separação de responsabilidades entre HTML e CSS
  • Entre o início do experimento, no começo de 2022, e a publicação no verão de 2023, e foram adicionados à documentação do MDN
    • é usado para agrupar um título de seção e um subtítulo
    • `` é um elemento semântico que representa uma entrada de busca, não resultados de pesquisa
    • Como o site é gerado estaticamente e não cria resultados de busca no servidor, o exemplo precisa de JavaScript
    • Em 2023, ele não via `` nem na busca do cabeçalho do MDN nem no google.com
  • foi uma das curiosidades iniciais que o levaram a começar essa exploração, e após ler a lista do MDN ele adicionou ao menu superior
  • Ele também colocou `` no texto, mas não sabe se usará isso com frequência em outros lugares, porque manter o aninhamento visualmente claro ao misturar Markdown e HTML é difícil

Observações obtidas com elementos de conteúdo textual

  • Ele já tinha usado `` em embeds de tweets, mas neste texto adicionou um estilo de citação destacada independente
    • Antes de olhar a documentação com mais atenção, ele não conhecia o atributo cite de nem o elemento
  • , , são elementos que ele só conheceu mais tarde, e achou curioso que seja relativamente menos conhecido do que e
    • e têm margin padrão, mas em o margin está em
  • `` tem uma má reputação na web moderna por causa do uso excessivo, mas neste site foi pouco usado no começo
    • Com o surgimento de mais elementos que ele queria estilizar em conjunto, esse número subiu para cerca de 20
    • Isso mostra que muitos `` podem ser desnecessários em um site que não tem tantas “sections” genéricas
  • e foram elementos adicionados cedo, ao migrar textos do Medium, para expressar legendas de imagem de forma semântica
    • Pela documentação, `` pode ser usado não só para imagens, mas também para ilustrações, diagramas e trechos de código
    • Ele considera que atualmente muitos blocos de código também poderiam usar ``
  • Ao ver na documentação que `` não é uma linha horizontal visual, mas uma separação semântica, ele revisou novamente seu estilo
    • Ele colocou um emoji em hr:after, mas precisa verificar como isso se comporta em leitores de tela
  • foi um elemento que ele conheceu pela primeira vez, e achou surpreendente que tenha permanecido até o HTML5, já que os navegadores na prática o tratam como
  • A documentação de `` tinha menos orientação do que ele esperava, deixando a pergunta: um texto curto é “realmente um parágrafo”?
  • Ele pensava em `` apenas para blocos de código, mas confirmou que também pode ser usado para indicar espaçamento significativo

Elementos semânticos de texto inline

  • Ele usava [link](#) como se fosse um placeholder, mas na prática isso era um link que leva ao topo da página
  • `` parecia a tag com menor chance de uso, porque a documentação do MDN a descreve como “para conveniência do autor”
  • A diferença entre e era diferente do que ele entendia antes, quando pensava que havia substituído no HTML5
    • Como regra prática, ele concluiu que em geral usaria para nível de palavra e para nível de frase ou expressão
    • Isso é uma heurística simplificada da distinção real
  • `` é um elemento para lidar com texto cuja direção pode ser diferente da do texto ao redor
    • O exemplo é um nome, mas ele considera que também se aplica a texto Unicode arbitrário inserido por usuário
    • No futuro, pretende envolver com `` tags que possam conter entrada arbitrária
  • `` parece ser algo que ele usará menos, já que não lida com frequência com idiomas RTL, mas considera útil saber tratar pequenas porções de texto RTL
  • já teve uma época de uso indevido como acontecia com ``, mas ele acha que isso deve ter diminuído com o fortalecimento do CSS
    • Como o exemplo da documentação é um poema, ele ficou curioso sobre como se considera a fronteira entre parágrafo e linha independente
    • Em alguns casos, `` pode ser mais adequado
  • e representam novamente em HTML semântico significados que em muitos idiomas já aparecem como pontuação visível
    • O estilo padrão de é itálico, e adiciona aspas que não estão no texto
  • foi muito usado ao longo do texto, e ele ficou curioso se o suporte a Markdown do Google Docs usa, mas ao ver o HTML do documento percebeu que o Google Docs atualmente renderiza com ``
  • `` tinha um exemplo no MDN em que um nome de produto recebe um ID de produto no atributo value, e por isso foi difícil imaginar um caso real de uso
    • Se é um ID visível ao usuário, parece melhor mostrá-lo
    • Se é um ID invisível ao usuário, fica incerto para quem esse dado existe
    • Ele verificou que `` não aparece na especificação HTML5 do W3C
  • `` não envolve a definição em si, mas o termo dentro da definição, e por isso ele achou o nome estranho
    • Resumiu dizendo que parece estar presente apenas em uma proposta não oficialmente adotada do HTML 2.0
  • e também o fizeram pensar em critérios de uso, assim como e
    • Como regra prática, concluiu que em geral usaria para palavra e para frase ou expressão
    • Os exemplos da documentação usam muito `` para chamar atenção para expressões que podem ser confundidas
  • `` é para indicar teclas de teclado, mas ele se perguntou até onde vai o limite em ações como “Right click”
  • `` pareceu um vestígio de uma web de autoria bidirecional, como se usuários pudessem marcar texto em livros com marca-texto
  • , , `` são usados na tipografia do leste asiático para fornecer pronúncia, tradução e transliteração
    • `` serve para esconder os parênteses incluídos na fonte
  • `` é um elemento de tachado para texto que antes estava correto, mas agora não está mais, ou deixou de ser relevante
    • Foi deprecated no HTML 4.01 e teve seu significado redefinido no HTML5
    • Como alguns leitores de tela não anunciam o tachado, isso pode causar confusão, e ele adicionou ao site o CSS recomendado pelo MDN
  • é para indicar saída de programa, e ele atualizou posts antigos sobre Raspberry Pi que antes usavam para ``
  • `` renderiza texto pequeno, mas ele acha que na maioria dos casos continuará usando CSS
  • Ao ler a documentação de , ele se perguntou pela primeira vez por que são permitidos estilos contraditórios como ou ``
  • e talvez já tivessem tido implementações via CSS antes, mas ele os aplicou em exemplos de footnote e fórmulas
  • `` pareceu útil para HTML semântico, então ele o aplicou às datas dos posts do blog
    • Ele observou que nem mesmo os resultados de busca do Google parecem usar ``
  • `` é um elemento para o qual o MDN orienta fortemente que “na maioria dos casos você provavelmente não vai querer usá-lo”, e o principal uso recomendado parece ser indicar erro ortográfico
  • representa semanticamente cadeias de variáveis matemáticas ou de programação, e ele o usou junto com em um exemplo do teorema de Pitágoras
  • `` resolve o problema de quebrar linha em palavras longas, especialmente URLs
    • Ao inserir pontos de quebra em URLs longas, as quebras ficam mais legíveis em diferentes larguras de tela
    • Mesmo incluindo hífens na URL, navegadores modernos passam a ter pontos de quebra claros
    • URLs sem quebra de linha foram envolvidas separadamente em `` com rolagem para evitar quebrar o layout

Imagens, multimídia e embeds

  • e eram elementos com os quais ele não tinha familiaridade, apesar de já ter feito sites do tipo image map no passado
    • Mostrando como hoje são pouco usados, até a ferramenta de depuração de bordas de `` era difícil de utilizar
    • Durante o foco por tabulação, apenas uma borda de `` aparece por vez, e a estilização não funcionou
    • Ele considera algo mais próximo de um com forma
  • `` é uma tag multimídia emblemática do HTML5, então ele já a havia usado, mas ainda assim achou surpreendente não vê-la com mais frequência nos anos 2020
    • O player do Bandcamp usa uma combinação de , , com UI customizada, mas por baixo usa um oculto
  • Em ``, ele olhou com mais atenção para o atributo srcset
    • Criou uma demo fornecendo três imagens diferentes conforme a largura da tela
    • Como cache do navegador e scaled display afetam o comportamento, para ver o efeito pode ser necessário usar uma private window e uma non-scaled ou non-retina display
  • e são menos usados do que ``, e ele considera que vídeo online parece mais centralizado em torno do YouTube
    • Já o áudio, como em podcasts, continua mais distribuído por arquivos individuais
  • `` teve algumas limitações
    • Quando foi criado como self-closing tag, ele não renderizou
    • No Safari da época, o servidor de desenvolvimento talvez não suportasse vídeo porque não dava suporte ao header de request “Range”
    • Ele ficou curioso para saber se a versão hospedada no GitHub Pages reproduz no Safari
    • O problema de `` foi causado por um arquivo .vtt mal configurado no build do Eleventy
  • e permanecerem sem virar deprecated foi algo surpreendente, mesmo com muitos de seus usos substituídos por tags mais específicas como e
  • manteve o nome noventista “inline frame”, enquanto foi deprecated no HTML5
    • Ele também confirmou que renderiza com display: inline
  • e são elementos pensados para trocar versões de imagem em situações diferentes
    • Ele criou um exemplo que mostra um ícone de computador para mouse/trackpad, um ícone de telefone para touchscreen, e uma imagem fallback quando não é nenhum dos dois
  • `` pareceu ser um elemento experimental ligado a previews de links estilo iPad e a vantagens de desempenho em SPAs
    • Em 2023, não estava ativado por padrão em nenhum navegador
    • Parece ter existido uma flag experimental antiga do Chrome, mas em 2023 já não estava disponível em chrome://flags
    • Não parece estar na HTML 5 Spec, e ele não tem certeza de por que aparece na documentação do MDN

SVG, MathML e scripting

  • Ele achou interessante que a documentação do MDN agrupe e
    • `` é amplamente usado porque ferramentas como Figma e Sketch facilitam prototipar e exportar
    • `` parece ser um elemento bem mais raro
  • `` foi usado em um exemplo desenhando um círculo diretamente
  • `` foi tratado como um wrapper que envolve elementos não HTML do namespace MathML, e ele colocou apenas uma fórmula simples
  • `` foi algo que ele já havia explorado a fundo em 2020, no Recurse Center, ao lidar com o problema de desenhar linhas nítidas
    • Pela documentação do MDN, descobriu que existe um tamanho máximo de `` por navegador
    • Em navegadores modernos, cada dimensão fica em torno de 32.000 pixels
    • Ele reimplementou um falso com, ,
  • `` não parecia algo que soaria ultrapassado, mas ao escrever o texto ele percebeu que quase nunca o usa diretamente
    • A maior parte do JavaScript é inserida por ferramentas de build em uma única tag ``
    • Por isso, `` parece mais boilerplate do que uma tag de marcação
  • `` pareceu um elemento que ele não havia usado o suficiente em sites interativos
    • Especialmente em SPAs minificadas/compiladas, sem `` o usuário pode ver apenas uma página em branco
    • Neste texto, ele colocou junto de todas as tags

Marcação de edição, tabelas, formulários e interação

  • e eram elementos que ele conheceu pela primeira vez ao ver a documentação do MDN, e pareciam coisas típicas de processadores de texto
    • Ele pensou também na renderização do Google Docs, mas verificou novamente que ela usa ``
  • `` foi excessivamente usado para layout na web inicial, mas ele considera irônico que hoje, com mais dados na web, acabe sendo relativamente raro
    • Entre as razões, ele cita o design padrão pouco atraente e o objetivo de apresentar no UI web os dados de tabelas de banco de dados sob outro ponto de vista
    • O texto em si é orientado a documento, então não havia dados tabulares reais, mas ele incluiu como exemplo uma tabela de emoji que talvez se baseie no conjunto de emojis da Apple de 2023
    • e eram desconhecidos para ele, e ele não sabe se os usará mais do que designs customizados sem ``
  • `` e seus elementos relacionados eram usados normalmente quando o envio levava a uma nova página, mas continuam válidos também para interação do usuário dentro da mesma página
    • Ele acha possível que elementos de formulário sejam os mais importantes do ponto de vista de acessibilidade, e pretende consultar a documentação no futuro ao implementá-los
  • e são um caso comum do tipo “dá para fazer sem JavaScript”
    • Interfaces de expandir/recolher como essa foram funcionalidades que ele originalmente montava com JavaScript ou jQuery, e achou interessante que isso tenha ficado simples com algumas tags HTML
    • Ele especula que, se fosse proposto hoje na spec HTML, talvez tivesse sido rejeitado em favor de algum efeito equivalente em CSS
  • `` era um elemento cuja existência em HTML puro ele desconhecia
    • Para ser mais útil do que apenas um efeito de estilo, ele precisa de JavaScript
    • É um jeito simples de criar interações mais customizadas do que alert(), mas ainda estilizar com CSS

Web components e elementos deprecated

  • Web components estavam há muito tempo na lista de coisas que ele precisava estudar melhor, então ficou contente de ler a seção correspondente no MDN
  • Foi surpreendente descobrir que renderizar web components exige JavaScript e a sintaxe de Class
    • Depois de ler mais sobre Shadow DOM, isso passou a fazer sentido, já que o HTML não tem uma forma embutida de encapsular estilos
    • Conceitualmente, ele considerou isso até certo ponto semelhante a ``
  • Ele usou web components com e para montar o índice do texto
    • Não encontrou rapidamente uma forma de passar propriedades para atributos de elementos template filhos como se faz em componentes de frameworks frontend
    • Então passou o elemento `` inteiro a cada filho e definiu o href correto dentro de `
  • `
  • Ele também incluiu elementos HTML deprecated no fim do texto
    • , , , , `` são exemplos de funcionalidades de layout que migraram para o CSS
    • e faziam parte da spec de web components, mas não foram implementados por completo, então ele não conseguiu usá-los de verdade
    • parece uma espécie de de servidor web para listar diretórios, e ele o usou em um exemplo de listagem de diretório de um site estático com Eleventy
  • e foram projetados para ser usados no lugar de , então era difícil colocá-los diretamente no corpo normal do texto, e ele os usou apenas dentro de
  • `` parecia algo que não funcionaria, por causa da explicação do MDN de que não fazia parte da specification oficial, mas em 2023 parecia funcionar em alguns navegadores
    • Ele acha que isso pode existir como fallback contra possível confusão com ``
  • `` tinha suporte parcial no Firefox 8~84, mas ele não conseguiu fazer o exemplo funcionar nem em uma versão antiga instalada localmente
  • parece próximo de um fallback como, mas foi deprecated, enquanto `` continua na spec, o que o surpreendeu
  • deixou a impressão de que não está claro por que existia como elemento separado em vez de ser apenas um atributo de
    • Quando ele começou o texto, estava na seção “Embedding Content” do MDN, mas até o final havia sido marcado como deprecated
  • `` se destaca entre os elementos deprecated por realmente funcionar
    • Se usado diretamente, as páginas seguintes acabam sendo renderizadas como código-fonte, então ele o envolveu com ``
  • e tinham tag de fechamento, então foi possível usá-los no corpo do texto para mostrar código-fonte ou texto monoespaçado estilo teletype
  • e eram para indicar pronúncia de caracteres do leste asiático, mas ele resumiu dizendo que a spec parece ter sido simplificada
  • Ele também adicionou `` ao verificar outras listas de tags HTML, embora esse elemento não estivesse na lista do MDN
  • Em uma lista antiga do MDN, de 2013, apareciam elementos como , , ,
    • `` hoje é ignorado pela maioria dos navegadores por motivos de acessibilidade
    • `` não funciona em navegadores modernos e é algo que deveria ser feito com CSS
    • `` sugere uma visão mais multimídia de documentos web
    • `` parece um elemento vindo de um mundo sem JavaScript
  • Ele também menciona ``, mas não tentou usá-lo
  • Descobriu tardiamente que não existe uma implementação nativa de HTML para footnotes

Leituras relacionadas

1 comentários

 
GN⁺ 2023-08-14
Opiniões no Hacker News

  • O autor parece jovem demais para se lembrar de frames :) Eu ia apenas linkar o artigo da Wikipédia (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)), mas a explicação não é lá muito boa Quando a web inicial se popularizou, frames eram comumente usados para menus, barras laterais, cabeçalhos sempre visíveis etc.; era comum ter um cabeçalho fixo em cima, uma barra lateral à esquerda e o frame do conteúdo no centro Cada frame se comportava de forma bastante independente, com seu próprio histórico de voltar/avançar, e links, por padrão, às vezes mudavam apenas aquele frame. Por isso, voltar, avançar e recarregar não eram intuitivos e, se o conteúdo errado fosse carregado em um frame, era difícil se recuperar sem entrar de novo desde o começo Ainda bem que CSS substituiu a maior parte dos principais usos de frames; do ponto de vista do usuário, frames eram realmente dolorosos de lidar

    • Um dos usos de frames de que me lembro eram sites de índice de outros sites. Havia vários links na barra lateral esquerda, e o site correspondente abria no frame à direita Na época em que não havia abas no navegador, era um uso bem razoável, e era melhor percorrer uma lista de links em um frame dentro de uma única janela do que ficar indo e voltando no histórico ou gerenciando várias janelas
    • Até Eric Meyer, o rei do CSS, ainda mantém a antiga documentação de referência de CSS como uma página com frames: https://meyerweb.com/eric/css/references/css1ref.html
    • O primeiro site que fiz no GeoCities nos anos 90 também usava frameset, exatamente com o layout mencionado acima
    • https://tintara.tripod.com/FramesSuck.html
    • e agora não são simplesmente desencorajados, mas sim elementos obsoletos há muito tempo: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • Isso é tratado rapidamente, mas ainda me parece absurdo que não exista uma declaração CSS padrão simples para esconder algo da tela mantendo-o para leitores de tela O que vi até hoje continua sendo usar clip, mover o conteúdo para fora da página ou truques parecidos. Não sei por que isso não é um valor alternativo de display ou uma propriedade adicional A propriedade speak, que poderia resolver isso, já ficou circulando em um dos módulos teóricos de CSS, mas, pelo que sei, quase não foi adotada por implementações

  • Sobre o elemento que confundiu o autor: o **HTML 5.2** foi descontinuado pelo W3C em 2021 e substituído pelo HTML Living Standard da WhatWG O padrão da WhatWG, diferentemente do HTML 5.2, não tornou obsoleto; ele o redefiniu como “uma barra de ferramentas na forma de uma lista não ordenada de elementos li que representam comandos que o usuário pode executar ou ativar” A lista de elementos e as informações de versões de HTML da Wikipédia parecem estar desatualizadas nesse ponto, e ainda está vivo. Dito isso, considerando o histórico de várias marcações como desaconselhado e o fato de que navegadores recentes também tiveram confusão quanto à semântica correta, quase sempre é melhor usar com um papel ARIA apropriado (toolbar, menu, menubar)

  • A razão pela qual a maioria desses elementos não é amplamente usada é que eles eram tentativas antigas de resolver problemas que já não existem, ou, como o próprio autor reconhece, podiam ser resolvidos melhor com CSS, ou dependiam muito da implementação dos navegadores Por exemplo, quando e chegaram a todos os navegadores com atualização contínua, eu fiquei animado, mas era preciso JavaScript para abrir de forma deslizante, guiando o usuário, em vez de simplesmente expandir o conteúdo de repente. A melhor implementação que vi usava WAAPI, e o Safari chegou a adicionar pseudo-elementos próprios

  • As tags / podem ser aninhadas. Uma vez criei com isso um jogo de aventura de escolhas e publiquei na intranet da empresa Havia um script gerador que juntava os fragmentos, e o texto real tinha só algumas páginas, mas o HTML chegou a 5 MB. Naquele dia, quebrei muitos navegadores e acabei tendo que apagar

    • Interessante, mas não entendi bem. Gostaria de ouvir mais sobre como o aninhamento de details/summary levou a 5 MB de HTML e como isso quebrou muitos navegadores

  • Isso me lembra de quando aprendi HTML pela primeira vez, por volta de 1995. Alguém se lembra do Barebones Guide to HTML, do Kevin Werbach? Era um site que listava praticamente todas as tags HTML e suas funções. Com esse material, um editor de texto e uma versão inicial do Netscape Navigator, dava para aprender e experimentar na hora

  • Há alguns dias, tentei criar um agente de IA para navegação na web e fiquei chocado ao ver que os comentários do Hacker News são implementados como uma tabela dentro de uma tabela dentro de uma tabela

    • Fiquei até feliz ao saber disso. Criei um userContent.css para tornar o HN mais legível, limitando a largura do corpo, definindo line-height como 1.5em e adicionando uma margem superior extra a todos os parágrafos Agora não preciso mais sofrer lendo o HN com 250 caracteres por linha em um navegador largo. Cada parágrafo ficou mais fácil de ler, e a separação entre parágrafos também aparece de forma mais clara do que apenas pelo espaçamento entre linhas

  • HTML semântico tem muito potencial. Pessoalmente, gosto do estilo em que notas de rodapé do texto ficam na margem direita, em uma fonte menor ou semitransparente, com elementos expansíveis / quando necessário Mas, para implementar esse tipo de estilo de fato, parece que sempre é preciso conhecer CSS com bastante detalhe para fazer tudo funcionar direito

  • Antes de tudo, esta é uma forma realmente excelente de aprender e um bom exercício. Também é divertido ver o autor olhar para elementos antigos, hoje obsoletos, que antes era empolgante de repente poder usar, e tentar adivinhar para que serviam. Porém, como alguém que escreve HTML à mão desde todas as versões posteriores ao Mosaic, não gosto quando a MDN renomeia retroativamente coisas como description list. Prefiro o definition list da especificação original. Para mim, é mais natural pensar em dl, dt, dd como “lista de definições”, “termo definido” e “definição”. description é um termo mais amplo que definition, mas, ao pensar em definition list, fica fácil lembrar que um dl contém termos (dt) e definições (dd). O W3 também chama de definition list: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • Você já viu algum caso no mundo real que chegasse até ``?

    • Sim. Meu primeiro emprego técnico foi em uma agência de marketing hiperlocal, e eu passava a maior parte do tempo atualizando cardápios de restaurantes e informações de vendas de pequenas lojas locais. Cardápios de restaurantes às vezes ficam absurdamente profundos em termos de hierarquia, porque muitos restaurantes criaram menus demais. Para representar corretamente mozzarella sticks e arancini, às vezes é necessária uma hierarquia como Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy.
    • Sim. Isso aparece em especificações ou em outra documentação técnica. Por exemplo, a própria especificação HTML[1] é assim. [1]: https://html.spec.whatwg.org/#link-type-next
    • É uma das coisas irritantes. Não entendo por que limitar de 1 a 6 e não permitir um atributo que especifique um tamanho arbitrário.
    • Transformei em versão web um livro enorme escrito por um antigo professor e chefe meu, e com certeza usamos 6 níveis de títulos; talvez até precisássemos de mais.