{"id":43929,"date":"2021-08-24T19:20:33","date_gmt":"2021-08-24T17:20:33","guid":{"rendered":"https:\/\/kinqsta.com\/?p=99189"},"modified":"2023-10-11T05:20:01","modified_gmt":"2023-10-11T08:20:01","slug":"melhores-praticas-html","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/melhores-praticas-html\/","title":{"rendered":"Melhores Pr\u00e1ticas de HTML para Cria\u00e7\u00e3o de Sites Manej\u00e1veis e Escal\u00e1veis"},"content":{"rendered":"

As melhores pr\u00e1ticas de HTML ajudam os desenvolvedores a oferecer sites e aplicativos web inovadores e altamente interativos. Estas melhores pr\u00e1ticas ajudam a desenvolver os aplicativos mais ricos em recursos e centradas nos neg\u00f3cios. Al\u00e9m disso, as organiza\u00e7\u00f5es podem aproveitar estas melhores pr\u00e1ticas para proporcionar uma experi\u00eancia de usu\u00e1rio perfeita.<\/p>\n

Hoje, quando falamos de HTML<\/a>, normalmente discutimos HTML5 (e n\u00e3o de seus predecessores imediatos)<\/a>. HTML5 \u00e9 uma linguagem de marca\u00e7\u00e3o poderosa que permite aos desenvolvedores web criar um documento web. \u00c9 f\u00e1cil de usar e entender, e quase todos os navegadores o suportam. Al\u00e9m disso, \u00e9 a base de quase todos os Sistemas de Gerenciamento de Conte\u00fado (CMS).<\/p>\n

Como desenvolvedor web com experi\u00eancia m\u00ednima, quest\u00f5es como “Como posso escrever melhor HTML?” freq\u00fcentemente surgem. Este artigo tem como objetivo ajud\u00e1-lo a come\u00e7ar com o p\u00e9 direito.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Abordagem geral de codifica\u00e7\u00e3o HTML<\/h2>\n

Voc\u00ea provavelmente j\u00e1 tem uma compreens\u00e3o desta linguagem de marca\u00e7\u00e3o, mas aqui est\u00e3o algumas das melhores pr\u00e1ticas HTML5 que lhe permitir\u00e3o codificar melhor.<\/p>\n

Declare sempre um tipo de documento<\/h3>\n

Ao criar um documento HTML, a declara\u00e7\u00e3o DOCTYPE<\/code> \u00e9 necess\u00e1ria para informar ao navegador<\/a> quais padr\u00f5es voc\u00ea est\u00e1 usando. Seu objetivo \u00e9 tornar sua marca\u00e7\u00e3o correta.<\/p>\n

Por exemplo:<\/p>\n

\n\n\n\n\n\n\n\n
Vers\u00e3o<\/th>\nDeclara\u00e7\u00e3o de tipo de documento<\/th>\n<\/tr>\n<\/thead>\n
HTML<\/span> 4.01<\/td>\n<!DOCTYPE<\/span> HTML<\/span> PUBLIC \"-\/\/W3C<\/span>\/\/DTD<\/span> HTML<\/span> 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"><\/code><\/td>\n<\/tr>\n
XHTML<\/span> 1.1<\/td>\n<!DOCTYPE<\/span> html PUBLIC \"-\/\/W3C<\/span>\/\/DTD<\/span> XHTML<\/span> 1.1\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd\"><\/code><\/td>\n<\/tr>\n
HTML5<\/span><\/td>\n<!DOCTYPE<\/span> html><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

A declara\u00e7\u00e3o <DOCTYPE><\/code> deve estar na primeira linha do seu documento HTML. Aqui est\u00e1 uma compara\u00e7\u00e3o entre sua implementa\u00e7\u00e3o correta e errada:<\/p>\n

\n\n\n\n\n\n
Melhores pr\u00e1ticas<\/th>\nM\u00e1 pr\u00e1tica<\/th>\n<\/tr>\n<\/thead>\n
\n
<!DOCTYPE<\/span> html>\n<html>...<\/html><\/code><\/pre>\n<\/td>\n
\n
<html>...<\/html><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Alternativamente, voc\u00ea pode usar o doctype correspondente \u00e0 vers\u00e3o HTML\/XHTML que voc\u00ea deseja usar. Saiba mais sobre a lista recomendada de declara\u00e7\u00f5es doctype<\/a> para ajud\u00e1-lo a escolher a correta.<\/p>\n
Coloca\u00e7\u00e3o de tags HTML<\/h3>\n
Os desenvolvedores sabem que o objetivo das tags \u00e9 ajudar os navegadores da web a distinguir entre o conte\u00fado HTML e o conte\u00fado comum. As tags HTML cont\u00eam uma tag de abertura, conte\u00fado e tag de fechamento. No entanto, muitas vezes eles est\u00e3o confusos sobre a coloca\u00e7\u00e3o correta das tags, os elementos que requerem tags de fechamento, ou quando omitir tags.<\/p>\n
Por exemplo, onde \u00e9 o melhor lugar para colocar tags <script><\/code>?<\/p>\n
As tags do script s\u00e3o normalmente colocadas dentro do elemento <head><\/code> Mas uma melhor pr\u00e1tica HTML moderna \u00e9 coloc\u00e1-las no final do documento, antes de fechar a\u00a0<body><\/code> pr\u00e1tica HTML moderna \u00e9 coloc\u00e1-las no final do documento, antes de fechar a <corpo> tag, para atrasar seu download<\/a>. A p\u00e1gina web carregar\u00e1 primeiro o Modelo de Objeto do Documento (DOM), mostr\u00e1-lo-\u00e1 ao usu\u00e1rio, e depois solicitar\u00e1 os scripts, reduzindo o tempo para o primeiro byte (TTFB)<\/a>.<\/p>\n
O navegador interpreta seu documento HTML linha por linha, de cima para baixo. Assim, quando l\u00ea a cabe\u00e7a e se depara com uma etiqueta de script, ele inicia um pedido ao servidor para obter o arquivo. N\u00e3o h\u00e1 nada de inerentemente errado com este processo, mas se a p\u00e1gina estiver carregando um arquivo enorme, isso levar\u00e1 muito tempo e afetar\u00e1 muito a experi\u00eancia do usu\u00e1rio.<\/p>\n
O elemento root<\/h3>\n
Sob o elemento root est\u00e1 o atributo <lang><\/code> , ou idioma<\/em>. Este atributo ajuda na tradu\u00e7\u00e3o de um documento HTML para a linguagem apropriada. A melhor pr\u00e1tica \u00e9 manter o valor deste atributo o mais curto poss\u00edvel.<\/p>\n
Por exemplo, a l\u00edngua japonesa \u00e9 usada principalmente no Jap\u00e3o. Portanto, o c\u00f3digo do pa\u00eds n\u00e3o \u00e9 necess\u00e1rio quando o idioma japon\u00eas \u00e9 o alvo<\/a>.<\/p>\n
\n\n\n\n\n\n
Melhores pr\u00e1ticas<\/th>\nM\u00e1 pr\u00e1tica<\/th>\n<\/tr>\n<\/thead>\n
<html lang=\"ja\"><\/code><\/td>\n<html lang=\"ja-JP\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
O que fazer e o que n\u00e3o fazer no HTML<\/h3>\n
Uma das melhores pr\u00e1ticas HTML mais comuns \u00e9 verificar o que voc\u00ea deve e n\u00e3o deve fazer. Aqui est\u00e3o alguns exemplos do que n\u00e3o se deve fazer quando se trata de codifica\u00e7\u00e3o HTML:<\/p>\n
\n\n\n\n\n\n\n\n\n
Descri\u00e7\u00e3o<\/th>\nBoas Pr\u00e1ticas<\/th>\nM\u00e1 pr\u00e1tica<\/th>\n<\/tr>\n<\/thead>\n
No texto, utilize o c\u00f3digo HTML equivalente aos caracteres Unicode em vez do pr\u00f3prio caractere.<\/td>\n<p>Copyright \u00a9 2021 W3C<\/span><sup>\u00ae<\/sup><\/p><\/code><\/td>\n<p>Copyright © 2021 W3C<\/span><sup>®<\/sup><\/p><\/code><\/td>\n<\/tr>\n
Eliminar espa\u00e7os brancos em torno de tags e valores de atributos.<\/td>\n<h1 class<\/span>=\"title\">HTML5<\/span> Best Practices<\/span><\/h1><\/code><\/td>\n<h1 class<\/span>=\" title \" > HTML5<\/span> Best Practices<\/span> <\/h1><\/code><\/td>\n<\/tr>\n
Pratique a consist\u00eancia e evite misturar os casos de car\u00e1ter.<\/td>\n<a href=<\/span>\"#status\">Status<\/span><\/a><\/code><\/td>\n<a HREF<\/span>=\"#status\">Status<\/span><\/a><\/code><\/td>\n<\/tr>\n
N\u00e3o separar atributos com dois ou mais espa\u00e7os brancos.<\/td>\n<input type=\"text<\/span>\" name=\"LastName\"><\/code><\/td>\n<input type=\"text<\/span>\" name=\"LastName\"><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Mantenha simples<\/h3>\n
Como qualquer pr\u00e1tica de codifica\u00e7\u00e3o, o princ\u00edpio “keep it simple” \u00e9 muito aplic\u00e1vel ao HTML e ao HTML5. Geralmente, o HTML5 \u00e9 compat\u00edvel com vers\u00f5es HTML mais antigas e XHTML. Por esse motivo, recomendamos evitar o uso declara\u00e7\u00f5es ou atributos XML<\/a>.<\/p>\n
Por exemplo:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n<!DOCTYPE html>\n<\/code><\/pre>\n
Voc\u00ea n\u00e3o precisa declarar o c\u00f3digo como tal, a menos que queira escrever um documento XHTML. Da mesma forma, voc\u00ea n\u00e3o precisa de atributos XML, como por exemplo:<\/p>\n
<p lang=\"en\" xml:lang=\"en\">...<\/p> <\/code><\/pre>\n
C\u00f3digo com SEO em mente<\/h2>\n
Os desenvolvedores devem codificar com SEO em mente<\/a>. Os conte\u00fados da Web que n\u00e3o s\u00e3o encontrados tamb\u00e9m n\u00e3o s\u00e3o indexados. Por essa raz\u00e3o, aqui est\u00e3o algumas das melhores pr\u00e1ticas de SEO a serem consideradas:<\/p>\n
Adicionar metadados significativos<\/h3>\n
A tag <base><\/code> \u00e9 uma tag \u00fatil, mas seu mau uso pode resultar em alguns comportamentos n\u00e3o-intuitivos. Assim, se voc\u00ea declarar uma tag base, ent\u00e3o cada link no documento ser\u00e1 relativo, a menos que explicitamente especificado:<\/p>\n
<base href=\"http:\/\/www.kinqsta.com\/\" \/><\/code><\/pre>\n
Esta sintaxe altera o comportamento padr\u00e3o de alguns links. Por exemplo, link para uma p\u00e1gina web externa com apenas o nome da p\u00e1gina e extens\u00e3o:<\/p>\n
href=\"coding.org\"<\/code><\/pre>\n
Ou o navegador ir\u00e1 interpret\u00e1-lo como:<\/p>\n
href=\"http:\/\/www.kinqsta.com\/coding.org\"<\/code><\/pre>\n
Esta interpreta\u00e7\u00e3o torna-se ca\u00f3tica, por isso \u00e9 mais seguro usar sempre caminhos absolutos para seus elos.<\/p>\n
Por outro lado, escrever descri\u00e7\u00f5es metatag n\u00e3o \u00e9 estritamente uma parte das melhores pr\u00e1ticas de HTML, mas ainda assim \u00e9 igualmente importante. O atributo <meta name=\"description\"><\/code> \u00e9 o que os buscadores se referem quando indexam sua p\u00e1gina, por isso \u00e9 vital para sua sa\u00fade SEO<\/a>.<\/p>\n
Definir tags de t\u00edtulo apropriadas<\/h3>\n
O <title><\/code> tag faz um motor de busca de p\u00e1gina web amig\u00e1vel. Por um lado, o texto dentro da <title><\/code> tag aparece nas P\u00e1ginas de Resultados do mecanisme de pesquisa (SERP) do Google e na barra e guias do navegador da web do usu\u00e1rio.<\/p>\n
Veja, por exemplo, quando voc\u00ea pesquisa a palavra-chave “HTML5”. O t\u00edtulo neste resultado de busca indica o atributo espec\u00edfico do t\u00edtulo e o autor. Isto \u00e9 muito importante para\u00a0 efeitos de SEO e gera\u00e7\u00e3o de tr\u00e1fego para o site<\/a>.<\/p>\n
As imagens devem ter um atributo Alt<\/h3>\n
O uso de um atributo alt significativo<\/a> com <img><\/code> elementos \u00e9 uma obriga\u00e7\u00e3o para escrever um c\u00f3digo v\u00e1lido e sem\u00e2ntico.<\/p>\n
Na tabela abaixo, a coluna de m\u00e1s pr\u00e1ticas mostra um elemento <img><\/code> sem um atributo alt. Embora o segundo exemplo na mesma coluna tenha um atributo alt, seu valor n\u00e3o tem significado.<\/p>\n
\n\n\n\n\n\n
Boas Pr\u00e1ticas<\/th>\nM\u00e1 pr\u00e1tica<\/th>\n<\/tr>\n<\/thead>\n
\n
<img id=\"logo\" src=\"images<\/span>\/kinsta_logo.png\" alt=\"Kinsta<\/span> logo\" \/><\/code><\/pre>\n<\/td>\n
\n
<img id=\"logo\" src=\"images<\/span>\/kinsta_logo.png\" \/>\n<img id=\"logo\" src=\"images<\/span>\/kinsta_logo.png\" alt=\"kinsta_logo.png\" \/><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Meta atributos descritivos<\/h3>\n
A meta description (meta descri\u00e7\u00e3o)<\/a> \u00e9 um elemento HTML que descreve e resume o conte\u00fado de uma p\u00e1gina da web. Seu objetivo \u00e9 que os usu\u00e1rios encontrem o contexto da p\u00e1gina. Embora os metadados n\u00e3o ajudem mais na classifica\u00e7\u00e3o SEO, a meta descri\u00e7\u00e3o ainda desempenha um papel significativo na SEO da p\u00e1gina.<\/p>\n
Aqui est\u00e1 um exemplo de c\u00f3digo que inclui as palavras-chave, descri\u00e7\u00e3o, nome do autor e conjunto de caracteres. O conjunto de caracteres \u00e9 usado para suportar quase todos os caracteres e s\u00edmbolos de diferentes idiomas. Por outro lado, voc\u00ea pode definir cookies, adicionar uma data de revis\u00e3o e permitir que a p\u00e1gina seja atualizada.<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>HTML Best Practices in Website Design<\/title>\n    <meta name = \"keywords\" content = \"HTML, Website Design, HTML Best Practices\" \/>\n    <meta name = \"description\" content = \"Learn about HTML best practices.\" \/>\n    <meta name = \"author\" content = \"John Doe\" \/>\n    <meta http-equiv = \"Content-Type\" content = \"text\/html; charset = UTF-8\" \/>\n  <\/head>\n  <body>\n    <p>Let's learn how to code HTML5!<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n
Atributo de t\u00edtulo com links<\/h3>\n
Nos elementos de ancoragem, a melhor pr\u00e1tica \u00e9 usar os atributos de t\u00edtulo para melhorar a acessibilidade. O atributo de t\u00edtulo aumenta o significado da etiqueta da \u00e2ncora. A <a><\/code> tag (ou elemento de \u00e2ncora) emparelhado com seu atributo href<\/code>, cria um hyperlink<\/a> para p\u00e1ginas web, endere\u00e7os de e-mail e arquivos. \u00c9 usado para vincular locais dentro da mesma p\u00e1gina ou endere\u00e7os externos.<\/p>\n
Verifique o exemplo sob a coluna de m\u00e1s pr\u00e1ticas – est\u00e1 l\u00e1 por ser redundante. Este tipo de pr\u00e1tica \u00e9 evidente se um usu\u00e1rio utiliza um leitor de tela para ler a etiqueta de \u00e2ncora e ler o mesmo texto duas vezes para o ouvinte. Um leitor de tela \u00e9 uma tecnologia de assist\u00eancia fornecida aos deficientes visuais ou \u00e0queles com uma defici\u00eancia de aprendizagem. Como uma boa pr\u00e1tica, se voc\u00ea estiver apenas repetindo o texto da \u00e2ncora, ent\u00e3o \u00e9 melhor n\u00e3o usar um t\u00edtulo de forma alguma.<\/p>\n
\n\n\n\n\n\n
Boas Pr\u00e1ticas<\/th>\nM\u00e1 pr\u00e1tica<\/th>\n<\/tr>\n<\/thead>\n
<a href=<\/span>\"https:\/\/kinqsta.com\/our-pricing\" title=\"Learn about our products.\">Click here<\/span><\/a><\/code><\/td>\n<a href=<\/span>\"https:\/\/kinqsta.com\/our-pricing\" title=\"Click Here\">Click here<\/span><\/a><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Melhores pr\u00e1ticas de HTML para o layout da p\u00e1gina<\/h2>\n
O desenvolvimento do site n\u00e3o \u00e9 simplesmente uma quest\u00e3o de criar um bloco de texto e cabe\u00e7alhos, p\u00e1ginas de link<\/a>, e voc\u00ea est\u00e1 acabado. H\u00e1 algumas melhores pr\u00e1ticas em HTML a considerar para fazer o melhor de seu site.<\/p>\n
Definir uma estrutura de documentos adequada<\/h3>\n
Os documentos HTML ainda funcionar\u00e3o sem os elementos prim\u00e1rios: <html><\/code> , <head><\/code> , e <body><\/code>. Entretanto, as p\u00e1ginas podem n\u00e3o renderizar corretamente se estes elementos estiverem faltando. Para isso, \u00e9 importante usar a estrutura apropriada dos documentos de forma consistente.<\/p>\n
Se\u00e7\u00f5es relevantes do grupo<\/h3>\n
ou um agrupamento tematizado de conte\u00fado<\/a>, use o elemento de se\u00e7\u00e3o. De acordo com a especifica\u00e7\u00e3o do W3C, uma <section><\/code> deve conter um t\u00edtulo (H1, H2, etc.). Alguns desenvolvedores ignoram completamente o uso do elemento t\u00edtulo, mas recomendamos inclu\u00ed-lo para melhor alcan\u00e7ar as pessoas que utilizam leitores de tela:<\/p>\n
\n\n\n\n\n\n
Boas Pr\u00e1ticas<\/th>\nM\u00e1 pr\u00e1tica<\/th>\n<\/tr>\n<\/thead>\n
\n
<section>\n<h1>HTML<\/span> Best Practices<\/span> 2021<\/h1>\n<ul>\n<li<\/span>><img src=\"img1.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<li<\/span>><img src=\"img2.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n
\n
<section>\n<ul>\n<li<\/span>><img src=\"img1.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<li<\/span>><img src=\"img2.jpg\" alt=\"description<\/span>\"><\/li<\/span>>\n<\/ul>\n<\/section><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Melhores pr\u00e1ticas de conte\u00fado embutido<\/h3>\n
A <embed><\/code> etiqueta serve como um recipiente para um recurso externo. Isto inclui p\u00e1ginas da web, fotos, v\u00eddeos<\/a> ou plug-ins. Entretanto, voc\u00ea deve considerar que a maioria dos navegadores n\u00e3o suporta mais Java Applets e plug-ins. Al\u00e9m disso, os controles ActiveX n\u00e3o s\u00e3o mais suportados em nenhum navegador e o suporte a Shockwave Flash tamb\u00e9m foi desligado nos navegadores modernos.<\/p>\n
Recomendamos o seguinte:<\/p>\n