50 melhores práticas e diretrizes de HTML

para construir melhores projetos na web

Antes do ponto e vírgula 11 de fevereiro  ·  14 min de leitura

HTML é a espinha dorsal de qualquer aplicativo da web e, apesar de ser muito fácil
de entender, há um grande número de tags contendo easter eggs. Como o HTML
não reclama quando você faz coisas erradas, você pode ser afetado por não seguir
certas boas práticas para o seu aplicativo.

Verifique a lista de outras práticas recomendadas

50 melhores práticas de CSS

50 melhores práticas de Javascript

1 - Evite o estilo embutido

A única coisa que pode substituir um estilo inline é o sinalizador CSS! Important,
o que não é uma boa prática ( verifique o artigo 50 de melhores práticas de CSS
para obter mais detalhes ). O estilo inline deve servir a um propósito muito
específico, como alguma manipulação de estilo feita do lado do Javascript, mas não
como uma forma de estilizar seu HTML.
2 - Adicione um estilo crítico primeiro e depois
Se você colocar todos os estilos do site em um arquivo, pode levar muito tempo para
buscar e analisar, o que pode atrasar a renderização do seu site. O que você deve
fazer é incluir os estilos principal e básico para o site em uma tag de estilo no
cabeçalho ou uma folha de estilo menor para carregar primeiro - apenas o estilo
necessário para a primeira renderização - então uma folha de estilo externa com
os estilos secundários, mas adiados .

Os estilos secundários podem ser qualquer estilo para coisas que exigem a revelação
da interação do usuário, como componentes modais, suspensos e de
notificação. Mesmo as coisas mais abaixo na página que o usuário precisa rolar.

3 - Evite tag Script com código quando possível

Muitos SDKs mostrarão um exemplo de código de script para incluir no cabeçalho
do seu site, mas você pode se safar apenas colocando-os em uma tag de script
externa às vezes e controlar como ele carrega. Se precisar usar algo desses,
certifique-se de que carregue antes de começar a usá-los, mas em geral, você deve
evitar misturar código Javascript com seu HTML.

4 - As tags de script vão na parte inferior

Essa regra é ainda melhor para o navegador que não oferece suporte a
determinados atributos de otimização, como adiar e assíncrono . Em geral, é
uma boa prática incluir suas tags de script por último para dar ao navegador tempo
para terminar de analisar e renderizar HTML e CSS, se eles não forem assíncronos
ou adiados.

Se você estiver gerando HTML e CSS a partir de Javascript - como com React,
Angular e Vue - você definitivamente deve colocar a tag de script por último.

5 - Reduzir o número de links externos

Sempre tente combinar suas folhas de estilo externas e arquivos de script em um
arquivo reduzido. Você sempre pode adiar ou pré - carregar / pré-buscar . Isso
vai para quaisquer links de arquivo no cabeçalho, bem como para arquivos de
script. Tenha alguns deles e sempre diga ao navegador como lidar com eles.

// diga ao navegador quais links priorizar

<link rel = "preload" ... />
<link rel = "prefetch" ... />
 // diga ao navegador para buscar enquanto analisa a página
<script async />

// diga ao navegador que você precisa disso após analisar

<script adiar />

6 - Sempre adicione uma tag alt às imagens

A alt tag tem o texto alternativo para mostrar caso a imagem não carregue. Ele
também fornece o contexto extra do que é a imagem e é ótimo para o seu SEO. Isso
torna suas imagens pesquisáveis e identificáveis.

7 - Não se esqueça do título da página

Não apenas o título da página, mas muitos outros títulos de muitas tags HTML. Os
títulos das páginas são usados nos resultados da pesquisa em páginas de
mecanismos de pesquisa como Google e Bing. O título é usado nas guias para que
as pessoas vejam e é usado por muitos sites de mídia social quando as pessoas colam
seu site como uma forma de compartilhá-lo.

Faça com que o título descreva o conteúdo da página em poucas palavras. Pode

conter o nome do site, o título de um artigo ou um simples título da página.

<title> Antes do ponto e vírgula - página Sobre </title>

<title> Antes do ponto e vírgula - Vídeos e blog de tecnologia
</title>
<title> Título do meu artigo super legal </title>

8 - Algumas tags de elementos requerem um título

Você pode nomear várias tags HTML que os ajudam ainda mais, por exemplo:

Você pode especificar folhas de estilo alternativas e, adicionando o atributo de

título, você dá ao usuário uma boa descrição da finalidade do estilo.

<link href = "reset.css" rel = "stylesheet" type = "text / css">

<link href = "default.css" rel = "stylesheet" title = "Estilo
padrão" >

Folha de estilo alternativa <link href = "fancy.css" rel = "folha

de estilo alternativo" title = "Fancy" >
<link href = "basic.css" rel = "folha de estilo alternativo" title
= "Básico" >
 Se você usar a tag <abbr> , não se esqueça do título porque ele é usado como
uma dica para as pessoas descobrirem para que serve a abreviatura.

<abbr title = "Cascading Style Sheets" > CSS </abbr>

Um campo de entrada pode ser aprimorado com um título que é usado como
uma dica de ferramenta para explicar o campo também. Um atributo de título e
um rótulo para a entrada têm finalidades diferentes. Um bom caso de uso é
incluir um título para entrada com o atributo pattern especificado.

<input type = "password" id = "pwd" name = "pwd"

pattern = ". {8,}" title = "Oito ou mais caracteres" >

9 - Uma tag h1 por página?

Se sua página inclui o logotipo do site, você pode usar a tag h1 para envolver o
nome do site do logotipo como o título principal superior. Você também pode usar
várias tags h1 para destacar vários pontos superiores da página. Esta regra não é
crítica para o seu site e dependerá da sua preferência, desde que você não aninhe
erroneamente as tags de título.

10 - Incluir metatags
As metatags podem ajudar muito o seu site. Todo mundo que cria sites com o SEO
em mente sabe como eles podem ser importantes. As metatags não são apenas para
SEO, mas para se comunicar com seu navegador sobre determinados recursos que
você deseja. Algumas contas de mídia social requerem algum tipo de metatags .

// informa ao navegador sobre o conjunto de caracteres que você

deseja usar
< meta charset = "utf-8">

// Diz ao navegador para redirecionar para

// beforesemicolon.com após 3 segundos
< meta http-equiv = "refresh" content = " 3 ; url =
https://beforesemicolon.com ">

// informa ao Twitter sobre sua conta do Twitter

// quando alguém compartilha o link do seu site
< meta name = " twitter: site " content = " @beforesemicolon ">
 // informa ao navegador que seu site é responsivo
< meta name = "viewport" content = " width = device-width, initial-
scale = 1 ">

11 - Adicionar links de fonte de pré-busca ao cabeçalho

A melhor maneira de carregar as fontes do seu site é incluindo-as no cabeçalho com
a tag de link e o atributo prefetch / preload. Você ainda pode incluir
a regra CSS @ font-face em sua folha de estilo externa.

12 - Sempre use metatags responsivas

Você deve sempre tornar seu site responsivo. Agora as pessoas podem solicitar uma
experiência de desktop ou mobile através do navegador e o mínimo que você pode
fazer é tornar seu site fluido, mas a capacidade de resposta é uma obrigação.

< meta name = "viewport" content = " width = device-width, initial-

scale = 1 ">

13 - O componente personalizado precisa estar acessível

Sempre que você deseja construir componentes customizados para substituir
elementos embutidos, como marca de seleção, botão, entrada de intervalo sabe que
você está descartando recursos de acessibilidade ao fazer isso. Se for personalizado,
adicione tags de acessibilidade e siga as diretrizes de acessibilidade.

Aprenda a construir vários elementos personalizados com acessibilidade

14 - Prefira função padrão e acessibilidade integrada

Você não precisa incluir certas funções em muitas tags HTML5 e deve personalizar /
estilizar os elementos HTML5 tanto quanto possível, em vez de criar alternativas.

// são tags semânticas

// não precisam de função
<nav role = "navigation" > ... </nav>
<button role = "button" > ... </button>

// você pode precisar fazer isso se o seu link

// funcionar como um botão
<a href="" role="button" />

15 - Evite adicionar tags HTML para fins de estilo

O HTML estrutura seu site e você deve evitar marcação extra para fins de
estilo. CSS é super poderoso e permite looks incríveis sem alterar o conteúdo. Isso
é o que o CSS Zen Garden estava tentando provar. HTML é para marcar o
conteúdo, não para fazer do estilo o seu conteúdo.

Pode haver momentos em que você precise quebrar essa regra, mas em geral, mudar
seu HTML não deve ser o número um que está surgindo em sua cabeça ao tentar
estilizar as coisas.

16 - Evite formatar o texto você mesmo

Adicione conteúdo no formato que precisa ser. Não tente ajustar o conteúdo para
obter determinados formatos. Existem muitas marcas e propriedades CSS que
permitem alterar a aparência do texto.

17 - Use tags de contêineres apropriadas (div vs seção vs artigo)

Você se beneficiará muito ao compreender quando usar a Seção vs Artigo vs Div
em Html . Entender quando usar essas tags tem um grande impacto em seu site e
você deve evitar o uso de tags div em todos os lugares. HTML5 está cheio de tags
semânticas.

18 - Sempre use tags semânticas

Se houver uma tag semântica que você possa usar, dê preferência. Sempre tenha
seu HTML que pode falar por si, o que ajuda a evitar funções e classes
desnecessárias. Algumas dessas tags têm algum estilo mínimo que pode ajudar seu
conteúdo e escrever ainda menos CSS.

19 - Não use a tag IMG para imagens sem conteúdo

Você deve aprender quando usar a tag de imagem HTML versus imagem de fundo
CSS o mais rápido possível. Um erro comum que você pode descobrir são os
desenvolvedores que usam a tag de imagem para incluir imagens sem conteúdo,
como ícones. Se a imagem não ajudar, o conteúdo faz sentido, não deve ser uma tag
de imagem e um teste simples é olhar o conteúdo sem a imagem. Se fizer sentido, a
imagem é decorativa.

20 - Sempre feche ou feche as tags

O navegador faz o possível para fechar as tags para você, mas nem sempre
acerta. Algumas tags devem ser fechadas (html, head, body, p, dd, li, option, etc) e
outras são proibidas de serem fechadas (img, input, br, hr, meta, etc).

21 - Adicionar arquivo favicon ao diretório raiz

O navegador irá buscar automaticamente um favicon para você. Você nem precisa
especificar o link para o favicon , apenas inclua-o na raiz do seu site. Faça o que
fizer, sempre inclua o favicon para o seu site explicitamente e de vários tamanhos e
alvos.

Quando as guias são muito pequenas para ler o título, o favicon torna-se útil. Você
deve tentar usar um gerador de favicon para oferecer suporte a muitos outros
dispositivos, navegadores e outras situações em que são usados.

22 - Adicionar um manifesto
Incluir um manifesto é uma das etapas necessárias para criar o PWA e acho que,
em geral, você deve sempre incluí-lo porque ele informa melhor ao navegador sobre
como lidar com seu site.

Você pode especificar nomes curtos e longos para o site, como ele deve ser
processado e todos os tamanhos de ícone para usar em guias e quando as pessoas
adicionam ou adicionam seu site à tela inicial de seus dispositivos
móveis. Experimente um dos muitos geradores de manifesto que existem.

23 - Sempre especifique o DOCTYPE

Pode parecer desnecessário, mas incluir o atributo HTML no DOCTYPE garantirá que
o navegador renderize suas coisas corretamente. Ele informa ao navegador que
você projetou o site para navegadores modernos e não deve se preocupar com
o modo quirks.

<! DOCTYPE html>

24 - Idioma da página
Especificar o idioma do seu site ajudará os leitores de tela a escolher o idioma certo
para anunciar. Os navegadores também o usam para determinar se devem traduzir
automaticamente o seu site ou não. O atributo lang deve descrever o idioma usado
pela maior parte do conteúdo do site.

<html lang = "en">

25 - Caracteres especiais de escape ('& <> ”)

O HTML tem alguns caracteres específicos que significam algo para ele, como os
símbolos cada vez maiores. Ao não fazer isso, você pode interromper a renderização
do seu site, especialmente se estiver usando conteúdo proveniente de fontes não
confiáveis ou entrada do usuário.

26 - Use dados- * corretamente

Não use o atributo de dados para incluir dados confidenciais ou coisas que podem
ser classificadas e para as quais outros atributos podem ser mais apropriados. Você
pode aprender sobre eles neste incrível artigo de truques CSS .

27 - Adicionar DateTime à tag de tempo

Uma coisa fácil de esquecer é o atributo datetime na etiqueta de tempo. Este
pequeno detalhe ajuda seus dispositivos a encontrar datas no conteúdo que você
pode clicar facilmente para adicionar ao seu calendário, por exemplo.

<time datetime = "20:00"> 20:00 </time>

28 - Você pode omitir os atributos “for” e “placeholder” quando usados

juntos
Você não precisa dos atributos for e placeholder se envolver seus campos dentro de
uma tag label. O aninhamento os torna implicitamente vinculados e também é uma
ótima maneira de estilizar entradas. Você pode verificar um exemplo de como usar
isso no vídeo da técnica de estilo de entrada para obter mais detalhes.

<label>
Nome:
<input type = "text" />
</label>

29 - Pare de usar a tag <hgroup />

O HTML5 nos deu tags legais e algumas delas acabaram
desaparecendo. A tag hgrouppode parecer legal, mas você deve parar ou nunca
usá-la . Existem muitos outros quevocê não deve tentar porque foram
descontinuados. Aqui está uma lista completa de tags que incluem algumas que
você provavelmente nunca usará.

30 - Siga um formato HTML consistente

É importante manter a consistência em seu estilo HTML. Você pode usar o mais
bonito para ajudá-lo com isso, mas o objetivo é sempre seguir uma maneira
consistente de codificar sua marcação.

31 - Evite tags SIBU

As tags SIBU são tags <s /> , <i /> , <b /> e <u /> que são apenas para fins
de estilo, não são tags semânticas e tudo o que fazem pode ser realizado apenas com
CSS ou outro tags semânticas.

<strong /> em vez de <b />

<em /> em vez de <i />

decoração de texto: sublinhado em vez de <u />

text-decoration: line-through em vez de <s />

// Não
<i class = "icon-name"> </i>
<p> Uma equação simples: <b> x </b> = <b> y </b> + 2 </p>

// Faça
<span class = "icon-name" aria-hidden = "true"> </span>
<p> Uma equação simples: <var> x </var> = <var> y </var> + 2 </p>

32 - Omitir valores de atributos booleanos

Alguns atributos não precisam de valor, portanto, você não deve precisar incluí-
los. Eles são chamados de atributos booleanos e seus valores são iguais aos do nome
do atributo, portanto, você pode ir em frente e omiti-lo.

<button type = "button" disabled />

<input type = 'checkbox' marcado />

33 - Você pode colocar links sociais dentro da tag de endereço

A etiqueta de endereço deve ser usada para envolver qualquer informação
relacionada a como as pessoas devem entrar em contato ou entrar em contato com
você - endereço de correspondência, números de telefone, e-mail, site da Web, links
de mídia social (se contextual).

34 - Não coloque tags de bloco dentro de tags inline

Pense em tags de bloco como caixas e tags em linha como envelopes. Não tente
colocar caixas dentro de envelopes. Alguns navegadores, em algumas situações,
removerão a tag de bloqueio de dentro da tag embutida, quebrando sua
marcação. As tags de bloco e embutido não devem ser confundidas com bloco de
exibição CSS e embutido. Aos olhos das tags HTML, as tags serão sempre embutidas
ou em bloco, independentemente de seu valor de exibição CSS.

35 - Cuidado com a meta tag de base

A tag base é muito mal compreendida e antes de decidir usá-la, recomendo que a
conheça porque é fácil bagunçar links no seu site e não é intuitivo o que está
acontecendo.

Pode ser muito útil e criar problemas se for mal utilizado.

<base href = "https://www.beforesemicolon.com/">

<base href = "/">

36 - Continue a usar tabelas

Definitivamente, não use tabelas para layout (os desenvolvedores de layout de e-
mail ainda usam) e se você tiver que usar tabelas para layout, adicione a função de
apresentação. A tabela é a escolha perfeita para representar dados tabulares e sua
acessibilidade é de conteúdo tabular, portanto, continue a usar a tabela. Se você
deseja o comportamento da tabela, mas não deseja usar tags de tabela, use a
propriedade de exibição CSS que tem opções para a tabela.

37 - Adquira o hábito de usar atributos de função e ária

Você deve se familiarizar com os atributos de função e ária e usá-los sempre que
possível. Eles são inúteis para alguns elementos HTML, mas adicione-os a qualquer
coisa personalizada que você criar para tornar seus componentes personalizados
acessíveis para qualquer usuário e tecnologia de leitura de tela.

Aprenda a construir componentes acessíveis

38 - Comentários?
Os comentários podem ser realmente úteis, mas por que comentar o HTML
certo? Use comentários no final de um contêiner para facilitar a localização de itens
quando eles são recolhidos. Além disso, comente a mensagem para você mais tarde
e nunca envie marcação comentada.
 <main> ...
<section> ...
</section> <! - seção sobre ->
</main> <! - seção principal ->

39 - Sempre especifique várias fontes de backup para mídia

Para vídeo e áudio, sempre inclua fontes múltiplas.

<controles de áudio>
<source src = "myAudio.mp3" type = "audio / mpeg">
<source src = "myAudio.ogg" type = "audio / ogg">
<p> Seu navegador não suporta áudio HTML5. </p>
</audio>

<video controls width = "250">

<source src = "flower.webm" type = "video / webm">
<source src = "flower.mp4" type = "video / mp4">
<p> Seu navegador não t suporta vídeo HTML5. </p>
</video>

40 - Prefira a imagem às imagens onde se aplica

A marca de imagem permite que você especifique vários recursos para tamanhos de
viewport diferentes, o que permite carregar imagens apropriadas mais rápido e usar
imagens diferentes para os tamanhos de view apropriados. Isso permite que você
carregue imagens de tamanho menor para dispositivos móveis com mais rapidez e
imagens maiores para desktop.

<imagem>
<source srcset = "surfer-240-200.jpg" media = "(min-width:
800px)">
<img src = "painted-hand-298-332.jpg" alt = "" />
< / imagem>

41 - Pare de apoiar o IE
Quaisquer comentários ou tags que você adicionar ao seu HTML para oferecer
suporte ao IE, pare! A menos que você tenha que construir estritamente para esse
navegador, tente recomendar outros navegadores para aquele usuário em vez de
adicionar algo hacky à sua marcação para o IE. A Microsoft está interrompendo o
suporte para o IE11 em meados de 2021.

42 - Evite muito HTML

Muito HTML não é bom. Adote estratégias que permitam carregar apenas o HTML
suficiente para a renderização inicial e ter o resto em uma página diferente ou que
possam ser buscados posteriormente em um scroll ou clique em algum botão por
Javascript. Muito HTML significa tempo de análise mais longo e desnecessário em
geral.

43 - Imagens de carregamento lento

Alguns navegadores carregarão as imagens apenas se estiverem na visualização
dessa forma, se você tiver uma página com 100 imagens, apenas aquelas dentro da
janela de visualização serão carregadas e, conforme o usuário rolar, o resto é
carregado de acordo. Tudo que você precisa fazer é especificar o atributo de
carregamento com um valor lazy. Também existe um polyfill se você quiser esse
recurso em todos os navegadores.

<img src = "imagem.jpg" alt = "..." loading = "preguiçoso" >

44 - Sempre especifique a opção de pré-carregamento para o vídeo

Você também pode carregar vídeos lentamente na página com o atributo
preload. É uma prática recomendada sempre incluir esse atributo porque
navegadores diferentes têm padrões diferentes. O pré-carregamento de nenhum
impedirá que o navegador carregue o vídeo imediatamente e mostre o marcador de
posição enquanto isso.

<video controls preload = "none" poster = "simple-placeholder.jpg">

<source src = "one-does-not-Simply.webm" type = "video / webm">
<source src = "one-does- not-simplesmente.mp4 "type =" video /
mp4 ">
</video>

45 - Às vezes, vídeos são melhores do que GIF

Muitas vezes os desenvolvedores usam um GIF em vez de um vídeo acreditando que
o GIF pode ser mais leve, mas dependendo do vídeo e do formato, os vídeos podem
ser uma opção melhor , então, sempre compare seu vídeo e o GIF antes de tomar
uma decisão.
46 - Sempre especifique o tipo de botão
Regra simples! Sempre especifique o tipo do botão. O botão é do tipo “enviar” por
padrão, o que nem sempre é o comportamento que você deseja. Em geral, seja
sempre explícito sobre o tipo de coisas que deseja, mesmo que seja o valor padrão.

<button type = "button" > Meu botão </button>

<input type = "text" />

47 - Blockquote envolve a tag que contém o texto e a tag q é quase

inútil
Você não deve envolver o texto com a tag blockquote diretamente. Coloque o texto
dentro da tag ap e envolva a tag p com o blockquote. A tag q simplesmente
adicionará aspas ao texto. É ótimo para citação, mas em geral as pessoas preferem
tags âncora para citação. Você pode apenas adicionar citações você mesmo ou usá-
lo para direcionar o texto citado no CSS.

<blockquote cite = " https://www.huxley.net/bnw/four.html ">

<p> Palavras podem ser como raios X, se você as usar corretamente
- elas passarão por qualquer coisa. Você lê e tem um piercing. </p>
</blockquote>

"algum texto citado"

// igual a
<q> algum texto citado </q>

48 - Evite tags Div e Span

Quase sempre você pode encontrar tags semânticas para usar em vez
de tags div e span. As pessoas normalmente os usam para embrulhar
determinado conteúdo e eu também sou culpado disso, especialmente quando estou
usando estruturas / bibliotecas Javascript. Em geral, sempre prefira tags
semânticas. Div é para blocos assim como span é para tags embutidas.

49 - Minimize o seu HTML

Algo que você não ouve com frequência, mas não é apenas o CSS e o Javascript que
você precisa reduzir. Você precisa minimizá-lo, especialmente se o seu site for
estático.

50 - Valide o seu HTML

Sempre valide seu HTML para ter certeza de que é uma marcação válida. Evita
que você cometa erros estúpidos e, com o tempo, aprenderá o suficiente para evitar
esses erros por completo. Isso pode até ser adicionado ao seu processo de
construção para garantir que seu site não seja implantado com marcação inválida.

Conclusão
As regras de práticas recomendadas são regras comuns seguidas por uma
comunidade, mas cada experiência é única. Você deve sempre testar e experimentar
regras diferentes para encontrar algo que faça sentido para você, sua equipe e o tipo
de projeto que você tem em mãos.