As melhores práticas de HTML ajudam os desenvolvedores a oferecer sites e aplicativos web inovadores e altamente interativos. Estas melhores práticas ajudam a desenvolver os aplicativos mais ricos em recursos e centradas nos negócios. Além disso, as organizações podem aproveitar estas melhores práticas para proporcionar uma experiência de usuário perfeita.

Hoje, quando falamos de HTML, normalmente discutimos HTML5 (e não de seus predecessores imediatos). HTML5 é uma linguagem de marcação poderosa que permite aos desenvolvedores web criar um documento web. É fácil de usar e entender, e quase todos os navegadores o suportam. Além disso, é a base de quase todos os Sistemas de Gerenciamento de Conteúdo (CMS).

Como desenvolvedor web com experiência mínima, questões como “Como posso escrever melhor HTML?” freqüentemente surgem. Este artigo tem como objetivo ajudá-lo a começar com o pé direito.

Abordagem geral de codificação HTML

Você provavelmente já tem uma compreensão desta linguagem de marcação, mas aqui estão algumas das melhores práticas HTML5 que lhe permitirão codificar melhor.

Declare sempre um tipo de documento

Ao criar um documento HTML, a declaração DOCTYPE é necessária para informar ao navegador quais padrões você está usando. Seu objetivo é tornar sua marcação correta.

Por exemplo:

Versão Declaração de tipo de documento
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5 <!DOCTYPE html>

A declaração <DOCTYPE> deve estar na primeira linha do seu documento HTML. Aqui está uma comparação entre sua implementação correta e errada:

Melhores práticas Má prática 
<!DOCTYPE html>
<html>...</html>
 
<html>...</html>

Alternativamente, você pode usar o doctype correspondente à versão HTML/XHTML que você deseja usar. Saiba mais sobre a lista recomendada de declarações doctype para ajudá-lo a escolher a correta.

Colocação de tags HTML

Os desenvolvedores sabem que o objetivo das tags é ajudar os navegadores da web a distinguir entre o conteúdo HTML e o conteúdo comum. As tags HTML contêm uma tag de abertura, conteúdo e tag de fechamento. No entanto, muitas vezes eles estão confusos sobre a colocação correta das tags, os elementos que requerem tags de fechamento, ou quando omitir tags.

Por exemplo, onde é o melhor lugar para colocar tags <script>?

As tags do script são normalmente colocadas dentro do elemento <head> Mas uma melhor prática HTML moderna é colocá-las no final do documento, antes de fechar a <body> prática HTML moderna é colocá-las no final do documento, antes de fechar a <corpo> tag, para atrasar seu download. A página web carregará primeiro o Modelo de Objeto do Documento (DOM), mostrá-lo-á ao usuário, e depois solicitará os scripts, reduzindo o tempo para o primeiro byte (TTFB).

O navegador interpreta seu documento HTML linha por linha, de cima para baixo. Assim, quando lê a cabeça e se depara com uma etiqueta de script, ele inicia um pedido ao servidor para obter o arquivo. Não há nada de inerentemente errado com este processo, mas se a página estiver carregando um arquivo enorme, isso levará muito tempo e afetará muito a experiência do usuário.

O elemento root

Sob o elemento root está o atributo <lang> , ou idioma. Este atributo ajuda na tradução de um documento HTML para a linguagem apropriada. A melhor prática é manter o valor deste atributo o mais curto possível.

Por exemplo, a língua japonesa é usada principalmente no Japão. Portanto, o código do país não é necessário quando o idioma japonês é o alvo.

Melhores práticas Má prática
<html lang="ja"> <html lang="ja-JP">

O que fazer e o que não fazer no HTML

Uma das melhores práticas HTML mais comuns é verificar o que você deve e não deve fazer. Aqui estão alguns exemplos do que não se deve fazer quando se trata de codificação HTML:

Descrição Boas Práticas Má prática
No texto, utilize o código HTML equivalente aos caracteres Unicode em vez do próprio caractere. <p>Copyright © 2021 W3C<sup>®</sup></p> <p>Copyright © 2021 W3C<sup>®</sup></p>
Eliminar espaços brancos em torno de tags e valores de atributos. <h1 class="title">HTML5 Best Practices</h1> <h1 class=" title " > HTML5 Best Practices </h1>
Pratique a consistência e evite misturar os casos de caráter. <a href="#status">Status</a> <a HREF="#status">Status</a>
Não separar atributos com dois ou mais espaços brancos. <input type="text" name="LastName"> <input type="text" name="LastName">

Mantenha simples

Como qualquer prática de codificação, o princípio “keep it simple” é muito aplicável ao HTML e ao HTML5. Geralmente, o HTML5 é compatível com versões HTML mais antigas e XHTML. Por esse motivo, recomendamos evitar o uso declarações ou atributos XML.

Por exemplo:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>

Você não precisa declarar o código como tal, a menos que queira escrever um documento XHTML. Da mesma forma, você não precisa de atributos XML, como por exemplo:

<p lang="en" xml:lang="en">...</p>

Código com SEO em mente

Os desenvolvedores devem codificar com SEO em mente. Os conteúdos da Web que não são encontrados também não são indexados. Por essa razão, aqui estão algumas das melhores práticas de SEO a serem consideradas:

Adicionar metadados significativos

A tag <base> é uma tag útil, mas seu mau uso pode resultar em alguns comportamentos não-intuitivos. Assim, se você declarar uma tag base, então cada link no documento será relativo, a menos que explicitamente especificado:

<base href="http://www.kinsta.com/" />

Esta sintaxe altera o comportamento padrão de alguns links. Por exemplo, link para uma página web externa com apenas o nome da página e extensão:

href="coding.org"

Ou o navegador irá interpretá-lo como:

href="http://www.kinsta.com/coding.org"

Esta interpretação torna-se caótica, por isso é mais seguro usar sempre caminhos absolutos para seus elos.

Por outro lado, escrever descrições metatag não é estritamente uma parte das melhores práticas de HTML, mas ainda assim é igualmente importante. O atributo <meta name="description"> é o que os buscadores se referem quando indexam sua página, por isso é vital para sua saúde SEO.

Definir tags de título apropriadas

O <title> tag faz um motor de busca de página web amigável. Por um lado, o texto dentro da <title> tag aparece nas Páginas de Resultados do mecanisme de pesquisa (SERP) do Google e na barra e guias do navegador da web do usuário.

Veja, por exemplo, quando você pesquisa a palavra-chave “HTML5”. O título neste resultado de busca indica o atributo específico do título e o autor. Isto é muito importante para  efeitos de SEO e geração de tráfego para o site.

As imagens devem ter um atributo Alt

O uso de um atributo alt significativo com <img> elementos é uma obrigação para escrever um código válido e semântico.

Na tabela abaixo, a coluna de más práticas mostra um elemento <img> sem um atributo alt. Embora o segundo exemplo na mesma coluna tenha um atributo alt, seu valor não tem significado.

Boas Práticas Má prática 
<img id="logo" src="images/kinsta_logo.png" alt="Kinsta logo" />
 
<img id="logo" src="images/kinsta_logo.png" />
<img id="logo" src="images/kinsta_logo.png" alt="kinsta_logo.png" />

Meta atributos descritivos

A meta description (meta descrição) é um elemento HTML que descreve e resume o conteúdo de uma página da web. Seu objetivo é que os usuários encontrem o contexto da página. Embora os metadados não ajudem mais na classificação SEO, a meta descrição ainda desempenha um papel significativo na SEO da página.

Aqui está um exemplo de código que inclui as palavras-chave, descrição, nome do autor e conjunto de caracteres. O conjunto de caracteres é usado para suportar quase todos os caracteres e símbolos de diferentes idiomas. Por outro lado, você pode definir cookies, adicionar uma data de revisão e permitir que a página seja atualizada.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Best Practices in Website Design</title>
    <meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
    <meta name = "description" content = "Learn about HTML best practices." />
    <meta name = "author" content = "John Doe" />
    <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
  </head>
  <body>
    <p>Let's learn how to code HTML5!</p>
  </body>
</html>

Atributo de título com links

Nos elementos de ancoragem, a melhor prática é usar os atributos de título para melhorar a acessibilidade. O atributo de título aumenta o significado da etiqueta da âncora. A <a> tag (ou elemento de âncora) emparelhado com seu atributo href, cria um hyperlink para páginas web, endereços de e-mail e arquivos. É usado para vincular locais dentro da mesma página ou endereços externos.

Verifique o exemplo sob a coluna de más práticas – está lá por ser redundante. Este tipo de prática é evidente se um usuário utiliza um leitor de tela para ler a etiqueta de âncora e ler o mesmo texto duas vezes para o ouvinte. Um leitor de tela é uma tecnologia de assistência fornecida aos deficientes visuais ou àqueles com uma deficiência de aprendizagem. Como uma boa prática, se você estiver apenas repetindo o texto da âncora, então é melhor não usar um título de forma alguma.

Boas Práticas Má prática
<a href="https://kinsta.com/our-pricing" title="Learn about our products.">Click here</a> <a href="https://kinsta.com/our-pricing" title="Click Here">Click here</a>

Melhores práticas de HTML para o layout da página

O desenvolvimento do site não é simplesmente uma questão de criar um bloco de texto e cabeçalhos, páginas de link, e você está acabado. Há algumas melhores práticas em HTML a considerar para fazer o melhor de seu site.

Definir uma estrutura de documentos adequada

Os documentos HTML ainda funcionarão sem os elementos primários: <html> , <head> , e <body>. Entretanto, as páginas podem não renderizar corretamente se estes elementos estiverem faltando. Para isso, é importante usar a estrutura apropriada dos documentos de forma consistente.

Seções relevantes do grupo

ou um agrupamento tematizado de conteúdo, use o elemento de seção. De acordo com a especificação do W3C, uma <section> deve conter um título (H1, H2, etc.). Alguns desenvolvedores ignoram completamente o uso do elemento título, mas recomendamos incluí-lo para melhor alcançar as pessoas que utilizam leitores de tela:

Boas Práticas Má prática 
<section>
<h1>HTML Best Practices 2021</h1>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>
 
<section>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>

Melhores práticas de conteúdo embutido

A <embed> etiqueta serve como um recipiente para um recurso externo. Isto inclui páginas da web, fotos, vídeos ou plug-ins. Entretanto, você deve considerar que a maioria dos navegadores não suporta mais Java Applets e plug-ins. Além disso, os controles ActiveX não são mais suportados em nenhum navegador e o suporte a Shockwave Flash também foi desligado nos navegadores modernos.

Recomendamos o seguinte:

  • Para uma foto, use a tag <img>.
  • Para HTML puxado de outro site, use a tag <iframe>.
  • Para vídeos ou áudios, use as tags <video> e <audio>.

O atributo alt no elemento <img> fornece uma descrição da imagem útil para os motores de busca e leitores de tela. Ele pode ser especialmente útil para os usuários quando as imagens não podem ser processadas:

Boas Práticas Má prática
<img alt="HTML Best Practices" src="/img/logo.png"> <img src="/img/logo.png">

Deixe o atributo alt vazio se houver texto suplementar para explicar a imagem. Isto é para evitar redundância:

Boas Práticas Má prática
<img alt="" src="/img/icon/warning.png"> Warning <img alt="Warning Sign" src="/img/icon/warning.png"> Warning

Deixe <iframe> elementos vazios se houver algumas restrições em seu conteúdo. Um elemento iframe vazio é sempre seguro:

Boas Práticas Má prática 
<iframe src="/default.html"></iframe>
 
<iframe src="/default.html">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</iframe>

Os desenvolvedores devem fornecer conteúdo fallback, ou links de backup, para qualquer <audio> ou <video> elementos, assim como com imagens. O conteúdo fallback é necessário, especialmente para elementos recentemente introduzidos em HTML:

Boas Práticas Má prática 
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...<iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>
 
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...</video>

Reduza o número de elementos

Os documentos HTML se tornam complicados, especialmente para páginas da web com muito conteúdo. É melhor reduzir o número de elementos em uma página para o mínimo que você puder administrar. Aprenda como usar os elementos de cabeçalho sabiamente e siga como <h1> a <h6> elementos denotam a hierarquia de conteúdo HTML. Isto torna seu conteúdo mais significativo para seus leitores, software de leitura de tela e mecanismos de busca.

Exemplo:

<h1>The topmost heading</h1>
<h2>This is a subheading that follows the topmost heading.</h2>
<h3>This is a subheading that follows the h2 heading.</h3>
<h4>This is a subheading that follows the h3 heading.</h4>
<h5>This is a subheading that follows the h4 heading.</h5>
<h6>This is a subheading that follows the h5 heading.</h6>

Para desenvolvedores de WordPress e criadores de conteúdo, use o elemento <h1> para o título do post do blog ao invés do nome do site. Isto ajuda na pesquisa em motores de busca, e esta abordagem é amigável em termos de SEO.

Além disso, use o elemento HTML correto para transmitir as informações que ele contém para obter uma estrutura de conteúdo semântica e significativa. Por exemplo, use <em> para ênfase e <strong> para ênfase pesada em vez de seus predecessores <i> ou <b> , que agora são depreciados.

Exemplo:

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

Igualmente importante, use <p> para parágrafos, e evite usar <br /> para adicionar uma nova linha entre parágrafos. Em vez disso, faça uso da margem CSS e/ou das propriedades de preenchimento para posicionar melhor seu conteúdo. Algumas vezes, você pode se sentir tentado a usar a <blockquote> tag para fins de recuo. Evite esta armadilha – use-a exclusivamente ao citar o texto.

O que fazer e o que não fazer no layout da sua página

Uma das melhores práticas de HTML é usar elementos semanticamente apropriados no layout de sua página. Vários elementos o ajudarão a organizar seu layout em seções.

Com a grande amplitude de tópicos sob layout HTML, é melhor destacar o que fazer e o que não fazer em layout rapidamente. Por exemplo, o HTML dá mais significado semântico aos elementos de cabeçalho e rodapé, portanto não negligencie o uso da tag <header> como é usada em qualquer seção ou artigo dado. Além de controlar as <title> e <meta> tags e outros elementos estilísticos do documento, ele é usado em cabeçalhos, datas de publicação e outros conteúdos introdutórios de sua página ou seção. Da mesma forma, você pode eliminar a noção de que os rodapés pertencem somente à seção de direitos autorais – agora, você pode usá-la praticamente em qualquer lugar.

Para o elemento <nav>, você deve usá-lo para navegação em todo o site. Não há necessidade de declarar um papel, pois o uso já está implícito na tag.

Boas Práticas Má prática
<nav></nav> <nav role="navigation"></nav>

Quanto ao elemento <main>, ele já faz parte das últimas versões HTML5, que denotam o conteúdo principal do corpo do documento. Portanto, não há mais necessidade de usar o <div> quando temos uma tag mais específica para nosso conteúdo principal.

Boas Práticas Má prática
<main id="content"></main> <div id="content"></div>

O <article>  usado para um bloco de conteúdo. É uma peça isolada e faz sentido sem a necessidade de dar mais explicações, enquanto a <section> tag é usada para dividir uma página em diferentes áreas temáticas ou para seção de um artigo individual. Infelizmente, muitos desenvolvedores ainda usam as duas indistintamente.

Considere que a <section> tag é uma tag mais genérica do que a <article> tag. Isto significa que a primeira denota conteúdo relacionado ao tópico em questão, mas não necessariamente auto-contido. A segunda, ao contrário, é uma propriedade independente.

Mas quando não há uma tag de marcação apropriada para seus propósitos, o que você deve usar? A resposta é usar <div> quando nenhum outro elemento funciona ou quando se trata de um elemento especificamente estilístico. Para nossos propósitos, usar <div> também é uma má prática.

Voltemos à <section> tag, que é uma tag de marcação semântica. Não é uma tag estilística, e é importante enfatizá-la. De fato, uma boa prática de codificação deve incluir uma tag de cabeçalho.

Agora, o não com a <section> segue que você não deve usá-la para etiquetar uma embalagem, um recipiente, ou qualquer outro bloco puramente estilístico. Abaixo está um exemplo de má prática de codificação com a <section> tag:

<section id="wrapper">
  <section class="container-fluid">
    <div id="main">
    </div>
  </section>
</section>

Esta é uma abordagem melhor, mas utiliza em demasia a etiqueta <div>:

<div id="wrapper">
  <div class="container-fluid">
    <div id="main">
    </div>
  </div>
</div>

Portanto, uma prática de codificação muito melhor é:

<body id="wrapper">
  <div class="container-fluid">
    <main id="main">
    </main>
  </div>
</body>

Uma parte popular de muitos layouts são figuras para representação de dados, e o elemento <figure> é usado principalmente com figuras. Entretanto, ele tem uma gama maior de usos possíveis, pois qualquer coisa relacionada ao documento poderia ser posicionada em qualquer lugar e envolvida em um elemento <figure>. Alguns exemplos incluem ilustrações, tabelas, ou diagramas em um livro.

Um recurso interessante da <figure> é que ela não contribui para o esboço do documento. Portanto, você pode usá-la para agrupar elementos com um tema comum – por exemplo, várias imagens com uma <figcaption> comum, ou mesmo um bloco de código.

Ao agrupar elementos com <figure> , use <figcaption>. A <figcaption> caption deve ir ou diretamente após a abertura <figure> tag, ou diretamente antes do fechamento </figure> tag :

<figure>
  <img src="image1.jpg" alt="Bird Image">
  <img src="image2.jpg" alt="Tree Image">
  <img src="image3.jpg" alt="Sun Image">
  <figcaption>Three images related to a topic</figcaption>
</figure>

Melhores práticas de HTML em scripting

O HTML é uma das tecnologias centrais no desenvolvimento web. Ele tem um poder e características impressionantes que o tornaram popular entre desenvolvedores e proprietários de empresas. O desenvolvimento de Frontend continua inovando e, para acompanhá-lo, os desenvolvedores devem conhecer as melhores práticas em HTML scripting.

Utilização de folhas de estilo externas

Estilos em linha desordenam seu código e o tornam ilegível. Para este fim, sempre faça a ligação e utilize folhas de estilo externas. Evite também utilizar declarações de importação em seus arquivos CSS, pois elas geram um pedido extra ao servidor.

O mesmo se aplica ao CSS e JavaScript em linha. Além de problemas de legibilidade, isto tornará seu documento mais pesado e difícil de manter, para que você possa evitar códigos em linha.

Use tags em minúsculas

O uso de caracteres minúsculos em código é uma prática padrão da indústria. Embora o uso de letras maiúsculas ou outros casos de texto ainda renderizem sua página, o problema não é a padronização, mas a legibilidade do código.

A legibilidade do código é um aspecto importante da codificação, uma vez que ajuda a tornar os aplicativos manejáveis e seguras. Além disso, o desenvolvimento web compreende principalmente uma equipe. Tornar seu código legível torna seu trabalho e o trabalho de sua equipe menos complicado.

Boas Práticas Má prática 
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>
 
<DIV>
<IMG SRC="images/sample.jpg" alt="sample"/>
<A HREF="#" TITLE="TEST">test</A>
<P>some sample text</P>
</DIV>

O que fazer e o que não fazer no Scripting

Embora haja muitas coisas que não se codificam em HTML, vamos compartilhar duas coisas básicas que não se codificam em scripts:

  • Escrever códigos bem estruturados e formatados de forma consistente: Um código limpo e bem escrito promove uma melhor legibilidade em seu site, o que é uma grande ajuda para seu desenvolvedor e outras pessoas que possam trabalhar com o site. Também demonstra grande profissionalismo e atenção aos detalhes, refletindo bem sobre sua atitude como desenvolvedor.
  • Abster-se de incluir comentários excessivos: Os comentários são essenciais e tornam seu código mais fácil de entender. Entretanto, a sintaxe HTML é muito auto-explicativa, portanto, comentários não são necessários a menos que você tenha que esclarecer a semântica e as convenções de nomenclatura.

Validar e minimizar

Os códigos de validação e minificação são usados para identificar erros desde cedo. Não espere até terminar seu documento HTML – torne um hábito validar e identificar erros com freqüência. Você pode fazer a validação manualmente ou usar qualquer ferramenta de validação conhecida, como o W3C Markup Validator.

Você também pode tirar proveito do recurso de minificação de código incorporado no painel MyKinsta. Isto permite aos clientes ativar a minificação automática de CSS e JavaScript com um simples clique, o que irá acelerar seus sites com zero esforço de trabalho manual.

Ao mesmo tempo, pratique a minificação removendo qualquer coisa que não seja essencial, como comentários ou espaço em branco. Assegure-se de escrever códigos limpos e concisos para reduzir o tamanho de seu arquivo HTML. Você pode usar ferramentas como o Minificador HTML e outras.

Resumo

Muitos recursos das melhores práticas HTML5 para 2021 estão disponíveis on-line para ajudá-lo. No entanto, lembre-se da regra geral na codificação: consistência. Este artigo forneceu insights básicos e o ajudou a dar o pontapé inicial nessa jornada de desenvolvimento de vanguarda. Usando este guia, você será um especialista em HTML5 semanticamente correto em pouco tempo.

Quando estiver pronto, veja além do que o HTML pode oferecer e explore alguns frameworks HTML de código aberto também para construir aplicativos web modernos e de página única. Eles oferecem excelente sincronização entre os dados e a UI e funcionam perfeitamente com CSS e JavaScript.

Perdemos alguma das melhores práticas de HTML que você usa em sua própria codificação? Informe-nos na seção de comentários!

Iryne Vanessa Somera