O que há com HTML no frontend? Recentemente, conversei com muitos desenvolvedores. Parece que alguns nem sequer entendem HTML. Quero dizer, eles entendem alguma coisa. Eles entendem o que é uma
div e o que é uma
span , e quando tudo parece bom e funciona com um clique, é o suficiente para eles. A tal ponto que muitas pessoas respondem à pergunta sobre HTML: "Ah, sim, estou fazendo tudo no React ou no Vue agora". Mas realmente não importa que você escreva apenas Javascript. Se você está desenvolvendo sites, o HTML é a coisa mais importante para você. Esta
é a web.
É sobre o que é consumido pelo usuário. Estes são UI e UX. Aqui está o pacote inteiro. Em ordem decrescente de importância: HTML, CSS e comportamento (que podem ser fornecidos por Javascript - ou talvez não).
Vejo um problema no fundo desta pirâmide tecnológica. O menor denominador comum da web. A base. Banda de ritmo. Savoyards de todas as sobremesas da web. Isto é HTML. E me parece cada vez mais que toda uma camada de engenheiros de front-end não conhece ou não entende a principal tecnologia do front-end.
Uma página da web é um documento. Qualquer componente, seja um modelo de blog, site de notícias, painel de estatísticas de marketing ou formulário de registro, faz parte do documento. Os documentos têm uma estrutura. Na Internet, não se trata apenas dos elementos visuais ou da arquitetura que sua plataforma fornece. Trata-se de escolher os elementos semanticamente corretos para que sua página da Web, componente, seja qual for, seja corretamente formatada estruturalmente. Os títulos devem ser títulos, as listas devem ser listas, os botões devem ser botões e as tabelas devem ser tabelas. Você pode estilizá-las (praticamente) como quiser - o título não precisa ser grande e em negrito com o recuo abaixo. Depende de você, mas definitivamente deve ser uma manchete, e eu posso lutar com você se você fizer isso como uma
div .
O HTML não é tão difícil de aprender, especialmente se você já conhece as estruturas JavaScript. Não considerei, mas tenho certeza de que existem apenas 116 elementos lá e a maioria de vocês nunca será necessária. Por que não aprendê-los?
Eu sou um daqueles caras que trabalha no limite do front end. Eu faço HTML e CSS, então é fácil para mim incentivar todos a aprender o que eu já sei (para o registro, eu não sei tudo - ainda temos muito debate em nosso escritório sobre a melhor maneira de marcar um componente específico). Não é que meu trabalho seja mais importante que o seu. Se você escreve um código que exibe algo no navegador, esse é definitivamente o seu trabalho.
É sobre usabilidade e acessibilidade. Se você não considera importante a estrutura semântica da sua página da web ou aplicativo, em essência diz: "Bem, tudo funciona para mim, você pode liberá-lo". Eu não acho que Javascript é suficiente aqui, como é CSS. Os mecanismos de pesquisa devem ler seu conteúdo, não desfrutar de animações rápidas ou gradientes sofisticados. O leitor de tela deve ler seu conteúdo. Usuários sem mouse devem trabalhar com seu site. Quem sabe qual será a próxima tecnologia e como ela perceberá sua aplicação, mas estou apostando no bitcoin mais recente, que provavelmente será ajudado pela capacidade de ler, analisar e navegar com facilidade no conteúdo. Todas essas tecnologias devem perceber o conteúdo como conteúdo integral, e não apenas linhas de texto envoltas em tags sem sentido. Eles devem ver o que é uma tabela e como apresentá-la, o que é uma lista e como apresentá-la, o que é um botão e o que é um sinalizador. Faça tudo div, e eles precisam fazer muito trabalho para reconhecer essas coisas.
“Mas minha estrutura cuida de tudo. Estou apenas escrevendo modelos .jsx »
Não. Escreva o HTML correto em seu JSX. Você consegue. Só porque você usa o React, o Vue ou qualquer outra coisa, não precisa escrever tudo com divs. Não é necessário.
"Essa biblioteca em todos os lugares adiciona atributos WAI-Aria, então tudo fica bem com a acessibilidade".
Ótimo. Se você escreveu o HTML correto, a maioria desses atributos não seria necessária. Você obtém várias funções de acessibilidade gratuitamente, apenas usando um
button real em vez de uma
div com um
onClick eventos
onClick . GRÁTIS. É acessibilidade, desempenho e facilidade de uso, gratuitamente. GRÁTIS!
Essas são coisas realmente importantes. Se não for seguido, ele lentamente (na verdade não tão lentamente) interrompe a web. No mínimo, o torna menos acessível para as pessoas que usarão seu produto. Se você se considera um engenheiro de front-end, sua responsabilidade é descobrir e usar o básico da Web, comum a todos os navegadores, plataformas, dispositivos ou eletrodomésticos que podem acessar a Internet.
Por favor faça isso. Tornar a Internet melhor, abordar com responsabilidade o desenvolvimento. Existem recursos suficientes na Web que podem ajudar, aqui estão alguns para você começar:
- Aprenda a organizar um documento em HTML. Tente exercícios mentais simples ao olhar para um pôster de concerto ou página de jornal - e imagine como ele será estruturado em HTML. Se você tiver tempo, escreva este HTML. Use esse conhecimento no trabalho diário.
- O MDN é um ótimo recurso com blogs, tutoriais e links úteis.
- Entre em contato com as pessoas da comunidade. Leia os blogs (por exemplo, a postagem recente de Andy Bell sobre o uso de HTML semântico) e assista ao vídeo .
- Quando eu estava estudando, olhar a fonte ainda era útil. Coletivamente, resolvemos isso para as gerações atuais e futuras, mas posso impressioná-lo com o poder das "Ferramentas do desenvolvedor" no navegador
- Aprenda como a tecnologia assistida funciona na web
- Veja as especificações HTML ou apenas uma lista de elementos HTML e exemplos de uso.
- Se você trabalha em equipe, discuta a marcação. Na verdade, será correto inserir algum elemento na forma de
table ou dl ( Elemento da lista de descrição , MDN). Vai ser muito divertido, eu prometo.
- Descubra quem é o melhor especialista em HTML da sua equipe e peça que eles revisem seu código. Se sou eu, sempre feliz em conversar.