Escrever HTML como se fosse 1999

Tenho certeza de que é seguro dizer que a maioria dos desenvolvedores adora usar as mais recentes e melhores ferramentas da web disponíveis. Recursos úteis, como pré-processadores, mecanismos de modelos, formatadores de sintaxe – o nome dele – podem tornar a vida do desenvolvedor mais fácil. Infelizmente, isso às vezes tem um custo: a estrutura HTML.

É por isso que eu tento o meu melhor para escrever HTML como se eu estivesse preso com as restrições dos anos 90 (dentro da razão). o que isso significa, exatamente? Isso significa que tablessão codificados com tableelementos. Navegações são codificadas com navitens de lista ordenados / não ordenados. Entradas de formulário não são definidas display: nonee substituídas por contêineres personalizados. Você sabe, HTML semântico .

Para ser claro, não estou defendendo a criação de projetos que pareçampertencer aos anos 90. Eu preferiria que os desenvolvedores / designers fossem mais conscientes do seu esqueleto HTML .

Práticas incorretas de HTML

Vamos fazer uma análise muito simples de alguns dos mais comuns HTML no-nos:

• ❌ Usando spanou divelementos para navegações ou componentes de lista
• ❌ Implementação de divlayouts personalizados para formulários ao remover itens como selectouradio
• ❌ Criando tabelas construídas a partir de divelementos personalizados
• ❌ Over-aninhamento de elementos ou tornando a profundidade excessivamente complexa para componentes simples
• ❌ Conteúdo sendo fortemente dependente de “injeção” de JavaScript

Boas práticas de HTML

Então, o que você deve fazer no lugar dessas implementações ruins de HTML?

• ✅ Use apropriado nav, ule olpara navegações ou listar componentes
• ✅ Elementos de formulário de estilo diretamente isso já é suportado em navegadores
• ✅ Construir tabelas usando tableestrutura de elementos (alucinante, eu sei!)
• ✅ Manter a hierarquia de elementos tão fina e de nível superior quanto possível
• ✅ Evite injetar qualquer conteúdo via JavaScript (eu entendo que isso é difícil para alguns aplicativos, mas tente minimizar isso o máximo possível)

Meu teste básico de “estrutura”

Eu encontrei um ponto de partida bastante simples para testar os ossos de um siteusando a seguinte linha simples de CSS:

* {
    border: 2px dotted black;
}

Essa propriedade simplesmente descreve todos os elementos da página atual em uma borda pontilhada. Colocando uma borda em cada elemento HTML você pode ver instantaneamente quão complexo ou feio sua estrutura pode estar sob o capô.