Translations: English · বাংলা · Dansk · Deutsch · Español · فارسی · Français · Indonesia · 日本語 · 한국어 · Português (BR) · Română · Русский · Türkçe · Українська · Tiếng Việt · 简体中文 · 正體中文

Boas Práticas HTML

Para escrever documentos HTML sustentáveis e escaláveis.

Geral

Comece com DOCTYPE

DOCTYPE é necessário para ativar o modo padrão.

Ruim:

<html>
  ...
</html>

Bom:

<!DOCTYPE html>
<html>
  ...
</html>

Não utilize DOCTYPE legado ou obsoleto

DOCTYPE não é mais para DTD, seja simples.

Ruim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Bom:

<!DOCTYPE html>

Não utilize declaração de XML

Você tem certeza que quer escrever um XHTML?

Ruim:

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

Bom:

<!DOCTYPE html>

Não utilizar referências de caracteres sempre que possível

Se você estiver utilizando um documento HTML com UTF-8, quase todos caracteres (inclusive Emoji) podem ser escritos diretamente.

Ruim:

<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>

Bom:

<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>

Utilize as entidades dos caracteres `&`, `<`, `>`, `"`, e `'`

Esses caracteres devem ser utilizados com suas entidades para evitar problemas no documento HTML.

Ruim:

<h1>The "&" character</h1>

Bom:

<h1>The &quot;&amp;&quot; character</h1>

Use referência numérica de caracteres para controle ou caracteres invisíveis

Esses caracteres podem ser facilmente confundidos com outros caracteres. Nem a especificação garante que esses caracteres tenham nomes amigáveis para humanos.

Ruim:

<p>This book can read in 1 hour.</p>

Bom:

<p>This book can read in 1&#xA0;hour.</p>

Coloque espaços envolta do conteúdo dos seus comentários

Alguns caracteres não podem ser utilizados imediatamente após ou antes do fim do comentário.

Ruim:

<!--This section is non-normative-->

Bom:

<!-- This section is non-normative -->

Não esqueça da tag de fechamento

Talvez você não tenha entendido quando fechar ou não as tags.

Ruim:

<html>
  <body>
    ...

Bom:

<html>
  <body>
    ...
  </body>
</html>

Não misture as formatações de elementos vazios

A consistência é a chave para a legibilidade.

Ruim:

<img alt="HTML Best Practices" src="/img/logo.png">
<hr />

Bom:

<img alt="HTML Best Practices" src="/img/logo.png">
<hr>

Não coloque espaços em branco em volta das tags e valores dos atributos

Não tem motivo para fazer isso.

Ruim:

<h1 class=" title " >HTML Best Practices</h1>

Bom:

<h1 class="title">HTML Best Practices</h1>

Não misture caracteres em maiúsculo e minúsculo

Torna o código mais consistente.

Ruim:

<a HREF="#geral">Geral</A>

Bom:

<a href="#geral">Geral</a>

Bom também:

<A HREF="#geral">Geral</A>

Não misture as aspas

O mesmo que acima.

Ruim:

<img alt="HTML Best Practices" src='/img/logo.jpg'>

Bom:

<img alt="HTML Best Practices" src="/img/logo.jpg">

Não separe os atributos com dois o mais espaços

Sua regra de formatação estranha pode confundir outra pessoa.

Ruim:

<input   name="q"  type="search">

Bom:

<input name="q" type="search">

Omita o valor de um atributo booleano

É mais fácil escrever assim, não é?

Ruim:

<audio autoplay="autoplay" src="/audio/theme.mp3">

Bom:

<audio autoplay src="/audio/theme.mp3">

Omita os namespaces

SVG e MathML podem ser usados diretamente em um documento HTML

Ruim:

<svg xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

Bom:

<svg>
  ...
</svg>

Não utilize atributos de XML

Nós escrevemos um documento HTML.

Ruim:

<span lang="ja" xml:lang="ja">...</span>

Bom:

<span lang="ja">...</span>

Não misture atributos com prefixo `data-*`, Microdata e RDFa Lite com atributos comuns

O texto de uma tag pode ser muito complicado. Essa regra simples ajuda na leitura de tal tag.

Ruim:

<img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">

Bom:

<img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">

Prefira o padrão das semânticas do ARIA

Alguns elementos tem um ARIA role implícito no documento HTML, não especifique isso.

Ruim:

<nav role="navigation">
  ...
</nav>

<hr role="separator">

Bom:

<nav>
  ...
</nav>

<hr>

O elemento raiz

Adicione o atributo `lang`

Utilizar o lang auxilia os tradutores automáticos de página a identificar a língua do conteúdo.

Ruim:

<html>

Bom:

<html lang="pt-BR">

Mantenha o valor do atributo `lang` o mais curto possível

Japonês é utilizado apenas no Japão, então o código do país não é necessário.

Ruim:

<html lang="ja-JP">

Bom:

<html lang="ja">

Evite atributos com prefixo `data-*` sempre que possível

Utilize de atributos que podem ser tratados corretamente pelos navegadores.

Ruim:

<span data-language="french">chemises</span>
...
<strong data-type="warning">Do not wash!</strong>

Bom:

<span title="French"><span lang="fr">chemises</span></span>
...
<strong class="warning">Do not wash!</strong>

Metadados do documento

Adicione o elemento `title`

O valor do elemento title é usado para várias aplicações não se limitando apenas ao navegador.

Ruim:

<head>
  <meta charset="UTF-8">
</head>

Bom:

<head>
  <meta charset="UTF-8">
  <title>Boas práticas de HTML</title>
</head>

Não utilize o elemento `base`

Um caminho absoluto ou URL é mais seguro, tanto para os desenvolvedores como para os usuários.

Ruim:

<head>
  ...
  <base href="/blog/">
  <link href="hello-world" rel="canonical">
  ...
</head>

Bom:

<head>
  ...
  <link href="/blog/hello-world" rel="canonical">
  ...
</head>

Especifique o tipo do MIME dos recursos linkados

Isso é uma dica para aplicação lidar com esse recurso.

Ruim:

<link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">

Bom:

<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">

Não crie um link para o `favicon.ico`

Quase todos os navegadores modernos fazem a requisição para /favicon.ico automaticamente e assíncrono.

Ruim:

<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">

Bom:

<!-- Coloque `favicon.ico` na raiz do diretório. -->

Adicione `apple-touch-icon` ao link

Informa qual ícone as plataformas do iOS utilizam para representar o site.

Ruim:

<!-- Olá Maçã! Por faça o download de `/apple-touch-icon.png`! -->

Bom:

<link href="/apple-touch-icon.png" rel="apple-touch-icon">

Adicione o atributo `title` em folhas de estilo alternativas

Uma legenda entendível por humanos ajuda as pessoas a selecionar a folha de estilos apropriada.

Ruim:

<link href="/css/tela.css" rel="stylesheet">
<link href="/css/alto-contraste.css" rel="stylesheet alternativo">

Bom:

<link href="/css/tela.css" rel="stylesheet">
<link href="/css/alto-contraste.css" rel="stylesheet alternativo" title="Alto contraste">

Para URL use o elemento `link`

Quando o valor do atributo href puder ser resolvido como URL.

Ruim:

<section itemscope itemtype="http://schema.org/BlogPosting">
  <meta content="https://example.com/blog/hello" itemprop="url">
  ...
</section>

Bom:

<section itemscope itemtype="http://schema.org/BlogPosting">
  <link href="/blog/hello" itemprop="url">
  ...
</section>

Especifique a codificação dos caracteres do documento

UTF-8 não é o padrão em todos os navegadores ainda.

Ruim:

<head>
  <title>HTML Best Practices</title>
</head>

Bom:

<head>
  <meta charset="UTF-8">
  <title>HTML Best Practices</title>
</head>

Não utilize formato codificação legado

Cabeçalhos do HTTP devem ser especificados por um servidor, seja simples.

Ruim:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Bom:

<meta charset="UTF-8">

Especifique a codificação dos caracteres logo no início

A especificação pede para que a codificação dos caracteres seja identificada nos primeiros 1024 bytes do documento.

Ruim:

<head>
  <meta content="width=device-width" name="viewport">
  <meta charset="UTF-8">
  ...
</head>

Bom:

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width" name="viewport">
  ...
</head>

Use UTF-8

Com UTF-8, você pode usar Emoji à vontade.

Ruim:

<meta charset="Shift_JIS">

Bom:

<meta charset="UTF-8">

Omita o atributo `type` para CSS

Em HTML, por padrão o atributo type do elemento style ja é text/css.

Ruim:

<style type="text/css">
  ...
</style>

Bom:

<style>
  ...
</style>

Não comente os conteúdos do elemento `style`

Apenas nos navegadores antigos era necessário.

Ruim:

<style>
<!--
  ...
  -->
</style>

Bom:

<style>
  ...
</style>

Não misture tags de CSS com JavaScript

Alguns elementos script bloqueiam a construção do DOM

Ruim:

<script src="/js/jquery.min.js"></script>
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/main.js"></script>

Bom:

<link href="/css/screen.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>

Bom também:

<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
<link href="/css/screen.css" rel="stylesheet">

Seções

Adicione o elemento `body`

Ao não utilizar o elemento body para envolver o conteúdo da página pode causar comportamentos não esperados nos navegadores.

Ruim:

<html>
  <head>
    ...
  </head>
  ...
</html>

Bom:

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Esqueça o elemento `hgroup`

Esse elemento não é muito utilizado.

Ruim:

<hgroup>
  <h1>HTML Best Practices</h1>
  <h2>For writing maintainable and scalable HTML documents.</h2>
</hgroup>

Bom:

<h1>HTML Best Practices</h1>
<p>For writing maintainable and scalable HTML documents.</p>

Use o elemento `address` apenas para informações de contato

O elemento address é para o endereço de email, contas em redes sociais, endereço físico, número de telefone e ou algum modo de entrar em contato com.

Ruim:

<address>No rights reserved.</address>

Bom:

<address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>

Agrupando conteúdos

Não comece uma nova linha com o elemento `pre`

A primera quebra de linha vai ser ignorada nos navegadores, porém a segunda em diante são renderizadas.

Ruim:

<pre>
&lt;!DOCTYPE html&gt;
</pre>

Bom:

<pre>&lt;!DOCTYPE html&gt;
</pre>

Use de forma apropriada o elemento `blockquote`

O conteúdo do elemento blockquote é uma citação, e não vários blocos de caracteres.

Ruim:

<blockquote>For writing maintainable and scalable HTML documents.</blockquote>

Bom:

<blockquote>
  <p>For writing maintainable and scalable HTML documents.</p>
</blockquote>

Não inclua a atribuição direto no elemento `blockquote`

O conteúdo do elemento blockquote é apenas um parágrafo.

Ruim:

<blockquote>
  <p>For writing maintainable and scalable HTML documents.</p>

  <p>— HTML Best Practices</p>
</blockquote>

Bom:

<blockquote>
  <p>For writing maintainable and scalable HTML documents.</p>
</blockquote>

<p>— HTML Best Practices</p>

Bom também:

<figure>
  <blockquote>
    <p>For writing maintainable and scalable HTML documents.</p>
  </blockquote>

  <figcaption>— HTML Best Practices</figcaption>
</figure>

Escreva um elemento da lista por linha

Listas looooooooooooooooooooooooooooooooooooooooogas são difíceis deeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee ler

Ruim:

<ul>
  <li>General</li><li>The root Element</li><li>Sections</li>...
</ul>

Bom:

<ul>
  <li>General</li>
  <li>The root Element</li>
  <li>Sections</li>
  ...
</ul>

Use o atributo `type` para o elemento `ol`

Com a utilização do atributo type você não precisa utilizar uma classe e definir o estilo da lista ordenada, pode se referir diretamente.

Ruim:

<head>
  <style>
    .toc {
      list-style-type: upper-roman;
    }
  </style>
</head>
<body>
  <ol class="toc">
    <li>General</li>
    <li>The root Element</li>
    <li>Sections</li>
    ...
  </ol>
</body>

Bom:

<body>
  <ol type="I">
    <li>General</li>
    <li>The root Element</li>
    <li>Sections</li>
    ...
  </ol>
</body>

Não use `dl` para diálogos

O elemento dl é restrito para associação com listas em HTML.

Ruim:

<dl>
  <dt>Costello</dt>
  <dd>Look, you gotta first baseman?</dd>
  <dt>Abbott</dt>
  <dd>Certainly.</dd>
  <dt>Costello</dt>
  <dd>Who’s playing first?</dd>
  <dt>Abbott</dt>
  <dd>That’s right.</dd>
  <dt>Costello becomes exasperated.</dd>
  <dt>Costello</dt>
  <dd>When you pay off the first baseman every month, who gets the money?</dd>
  <dt>Abbott</dt>
  <dd>Every dollar of it.</dd>
</dl>

Bom:

<p>Costello: Look, you gotta first baseman?</p>
<p>Abbott: Certainly.</p>
<p>Costello: Who’s playing first?</p>
<p>Abbott: That’s right.</p>
<p>Costello becomes exasperated.</p>
<p>Costello: When you pay off the first baseman every month, who gets the money?</p>
<p>Abbott: Every dollar of it.</p>

Coloque um elemento `figcaption` como primeiro ou último filho do elemento `figure`

A especificação não permite o elemento figcaption no meio de um elemento figure.

Ruim:

<figure>
  <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
  <figcaption>“HTML Best Practices” Cover Art</figcaption>
  <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
</figure>

Bom:

<figure>
  <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
  <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
  <figcaption>“HTML Best Practices” Cover Art</figcaption>
</figure>

Use o elemento `main`

O elemento main pode ser utilizado para envolver conteúdos

Ruim:

<div id="content">
  ...
</div>

Bom:

<main>
  ...
</main>

Evite utilizar `div` sempre que possível

A div é um elemento de última instância.

Ruim:

<div class="capitulo">
  ...
</div>

Bom:

<section>
  ...
</section>

Semânticas a nível de texto

Não divida o mesmo link que pode estar agrupado

O elemento a pode envolver quase todos elementos (exceto elementos interativos como controles de formulário e um elemento a igual ele)

Ruim:

<h1><a href="https://whatwg.org/">WHATWG</a></h1>

<p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>

Bom:

<a href="https://whatwg.org/">
  <h1>WHATWG</h1>

  <p>A community maintaining and evolving HTML since 2004.</p>
</a>

Use o atributo `download` para baixar um recurso

Ele vai forçar os navegadores baixarem o recurso linkado para o armazenamento.

Ruim:

<a href="/downloads/offline.zip">offline version</a>

Bom:

<a download href="/downloads/offline.zip">offline version</a>

Use os atributos `rel`, `hreflang`, e `type` quando necessário

Esses atributos auxiliam o navegador a como lidar com o conteúdo indicado pelo link.

Ruim:

<a href="/ja/pdf">Japanese PDF version</a>

Bom:

<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>

Texto do link evidente

O texto do link deve ser o rótulo do recurso que ele aponta.

Ruim:

<p><a href="/pdf" rel="alternate" type="application/pdf">Clique aqui</a> para ver a versão em PDF.</p>

Bom:

<p><a href="/pdf" rel="alternate" type="application/pdf">Versão em PDF</a> também disponível.</p>

Não utilize o elemento `em` para avisos ou cuidado

Isso é sério. Então utilize o elemento strong por ser mais apropriado.

Ruim:

<em>Caution!</em>

Bom:

<strong>Caution!</strong>

Evite os elementos `s`, `i`, `b`, e `u` sempre que possível

A semântica desses elementos é muito difícil para humanos.

Ruim:

<i class="icone-busca"></i>

Bom:

<span class="icone-busca" aria-hidden="true"></span>

Não coloque aspas no texto do elemento `q`

As aspas são inseridas automaticamente pelo navegador.

Ruim:

<q>“For writing maintainable and scalable HTML documents”</q>

Bom:

<q>For writing maintainable and scalable HTML documents</q>

Bom também:

“For writing maintainable and scalable HTML documents”

Adicione o atributo `title` ao elemento `abbr`

Não existe outra forma para representar sua forma completa.

Ruim:

<abbr>BPH</abbr>

Bom:

<abbr title="Boas práticas de HTML">HBP</abbr>

Marque o elemento `ruby` detalhadamente

O suporte para elemento ruby não é completo nos navegadores modernos.

Ruim:

<ruby>HTML<rt>えいちてぃーえむえる</ruby>

Bom:

<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>

Use o atributo `datetime` em formatos não reconhecidos por máquina no elemento `time`

Quando o atributo datetime não é informado, o formato do conteúdo elemento time é restrito.

Ruim:

<time>Dez 19, 2014</time>

Bom:

<time datetime="2014-12-19">Dez 19, 2014</time>

Especifique a linguagem do código com o atributo `class` prefixado com `language-`

Não é um método comum, mas as especificações mencionam.

Ruim:

<code>&lt;!DOCTYPE html&gt;</code>

Bom:

<code class="language-html">&lt;!DOCTYPE html&gt;</code>

Mantenha o elemento `kbd` o mais simples possível

Aninhar o elemento kbd torna dificil para os humanos.

Ruim:

<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>

Bom:

<kbd>Ctrl+F5</kbd>

Evite o elemento `span` sempre que possível

O span é um elemento de última instância.

Ruim:

HTML <span class="best">Best</span> Practices

Bom:

HTML <em>Best</em> Practices

Quebre a linha depois do elemento `br`

Uma quebra de linha é necessária quando o elemento br é utilizado.

Ruim:

<p>HTML<br>Best<br>Practices</p>

Bom:

<p>HTML<br>
Best<br>
Practices</p>

Não utilize o elemento `br` apenas para propósito visual

O elemento br não é para quebrar linhas, é para quebrar linhas dos conteúdos.

Ruim:

<p><label>Rule name: <input name="rule-name" type="text"></label><br>
<label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>

Bom:

<p><label>Rule name: <input name="rule-name" type="text"></label></p>
<p><label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>

Edições

Não insira elementos `ins` e `del` entre outros elementos

Elementos não podem transbordar para outros elementos.

Ruim:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>

<p>Don’t trust!</p></del>

Bom:

<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>

<del><p>Don’t trust!</p></del>

Conteúdo embutido

Garanta um um elemento `img` como substituto para um elemento `picture`

O suporte para o elemento picture ainda não é tão vasto.

Ruim:

<picture>
  <source srcset="/img/logo.webp" type="image/webp">
  <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
  <source srcset="/img/logo.jp2" type="image/jp2">
  <source srcset="/img/logo.jpg" type="image/jpg">
</picture>

Bom:

<picture>
  <source srcset="/img/logo.webp" type="image/webp">
  <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
  <source srcset="/img/logo.jp2" type="image/jp2">
  <img src="/img/logo.jpg">
</picture>

Adicione o atributo `alt` em uma `img` se necessário

O atributo alt auxilia quem não pode processar imagens ou está com o carregamento de imagens desabilitado.

Ruim:

<img src="/img/logo.png">

Bom:

<img alt="Boas Práticas de HTML" src="/img/logo.png">

Deixe vazio o atributo `alt` sempre que possível

Se a imagem é suplementar, ou tem um conteúdo equivalente perto da mesma.

Ruim:

<img alt="Question mark icon" src="/img/icon/help.png"> Help

Bom:

<img alt="" src="/img/icon/help.png"> Help

Omita o atributo `alt` se possível

As vezes você não sabe um algo que seja adequado ao atributo alt.

Ruim:

<img alt="CAPTCHA" src="captcha.cgi?id=82174">

Bom:

<img src="captcha.cgi?id=82174" title="CAPTCHA">
(Se você não consegue ver a imagem, você poderia utilizar um teste <a href="?audio">audio</a>)

Elemento `iframe` vazio

Se tiver alguma restrição no conteúdo, é sempre bom manter o iframe vazio.

Ruim:

<iframe src="/ads/default.html">
  <p>If your browser support inline frame, ads are displayed here.</p>
</iframe>

Bom:

<iframe src="/ads/default.html"></iframe>

Marque o conteúdo do elemento `map`

Esse conteúdo é apresentado por um leitor de tela.

Ruim:

<map name="toc">
  <a href="#general">General</a>
  <area alt="General" coords="0, 0, 40, 40" href="#General"> |
  <a href="#the_root_element">The root element</a>
  <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
  <a href="#sections">Sections</a>
  <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
</map>

Bom:

<map name="toc">
  <p>
    <a href="#general">General</a>
    <area alt="General" coords="0, 0, 40, 40" href="#General"> |
    <a href="#the_root_element">The root element</a>
    <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
    <a href="#sections">Sections</a>
    <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
  </p>
</map>

Disponibilize um conteúdo substituto para os elementos `audio` e `video`

O conteúdo substituto é necessário para novos elementos introduzidos no HTML.

Ruim:

<video>
  <source src="/mov/theme.mp4" type="video/mp4">
  <source src="/mov/theme.ogv" type="video/ogg">
  ...
</video>

Bom:

<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>

Dados tabulares

Escreve uma célula por linha

Linhas longas são díficeis de ler.

Ruim:

<tr>
  <td>General</td><td>The root Element</td><td>Sections</td>
</tr>

Bom:

<tr>
  <td>General</td>
  <td>The root Element</td>
  <td>Sections</td>
</tr>

Use o elemento `th` para o cabeçalho da célula

Não existe motivo para evitar o uso.

Ruim:

<table>
  <thead>
    <tr>
      <td><strong>Element</strong></td>
      <td><strong>Empty</strong></td>
      <td><strong>Tag omission</strong></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong><code>pre</code></strong></td>
      <td>No</td>
      <td>Neither tag is omissible</td>
    </tr>
    <tr>
      <td><strong><code>img</code></strong></td>
      <td>Yes</td>
      <td>No end tag</td>
    </tr>
  </tbody>
</table>

Bom:

<table>
  <thead>
    <tr>
      <th>Element</th>
      <th>Empty</th>
      <th>Tag omission</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><code>pre</code></th>
      <td>No</td>
      <td>Neither tag is omissible</td>
    </tr>
    <tr>
      <th><code>img</code></th>
      <td>Yes</td>
      <td>No end tag</td>
    </tr>
  </tbody>
</table>

Formulários

Envolva um controle de formulário com o elemento `label`

O elemento label auxilia o focar no elemento do formulário

Ruim:

<p>Query: <input name="q" type="text"></p>

Bom:

<p><label>Query: <input name="q" type="text"></label></p>

Omita o atributo `for` se possível

O elemento label pode conter alguns elementos de formulário.

Ruim:

<label for="q">Query: </label><input id="q" name="q" type="text">

Bom:

<label>Query: <input name="q" type="text"></label>

Use o atributo `type` apropriado para o element `input`

Com a type apropriado o navegador adiciona pequenas funções ao elemento input

Ruim:

<label>Search keyword: <input name="q" type="text"></label>

Bom:

<label>Search keyword: <input name="q" type="search"></label>

Adicione o atributo `value` ao elemento `input type="submit"`

O rótulo padrão para o botão de submissão não é padronizado pelos navegadores e linguagens.

Ruim:

<input type="submit">

Bom:

<input type="submit" value="Procurar">

Adicione o atributo `title` ao elemento input `input` quando existir o atributo `pattern`

Se um input não estiver de acordo com a pattern indicada, o conteúdo do atributo title será apresentado como uma dica.

Ruim:

<input name="codigo-de-seguranca" pattern="[0-9]{3}" type="text">

Bom:

<input name="codigo-de-seguranca" pattern="[0-9]{3}" title="O Código de segurança é um número de três dígitos." type="text">

Não utilize o atributo `placeholder` como um rótulo

O elemento label é para rotular, o atributo placeholder é para uma breve dica do campo.

Ruim:

<input name="email" placeholder="Email" type="text">

Bom:

<label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>

Escreva um elemento `option` por linha

Linhas longas são difíceis de serem lidas.

Ruim:

<datalist id="toc">
  <option label="General"><option label="The root element"><option label="Sections">
</datalist>

Bom:

<datalist id="toc">
  <option label="General">
  <option label="The root element">
  <option label="Sections">
</datalist>

Adicione o atributo `max` ao elemento de `progress`

Com o atributo max, o atributo value pode ser preenchido em um formato mais acessível.

Ruim:

<progress value="0.5"> 50%</progress>

Bom:

<progress max="100" value="50"> 50%</progress>

Adicione os atributos `min` e `max` ao elemento `meter`

With min and max attribute, the value attribute can be write in an easy format.

Com os atributos min e max, o value pode ser preenchido em um formato mais acessível.

Ruim:

<meter value="0.5"> 512GB usado (1024GB total)</meter>

Bom:

<meter min="0" max="1024" value="512"> 512GB usado (1024GB total)</meter>

Coloque o elemento `legend` como o primeiro filho do elemento `fieldset`

A especificação pede dessa forma.

Ruim:

<fieldset>
  <p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
  ...
  <legend>About "General"</legend>
</fieldset>

Bom:

<fieldset>
  <legend>About "General"</legend>
  <p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
  ...
</fieldset>

Scripts

Omita o atributo `type` para JavaScript

Em HTML, o atributo type do elemento script é por padrão text/javascript.

Ruim:

<script type="text/javascript">
  ...
</script>

Bom:

<script>
  ...
</script>

Não comente os conteúdos do elemento `script`

Apenas nos navegadores antigos era necessário.

Ruim:

<script>
/*<![CDATA[*/
  ...
/*]]>*/
</script>

Ruim também:

<script>
<!--
  ...
// -->
</script>

Bom:

<script>
  ...
</script>

Não utilzie elementos `script` injetados por script

Utilizar o atributo async é o melhor tanto para simplicidade como para performance.

Ruim:

<script>
  var script = document.createElement("script");
  script.async = true;
  script.src = "//example.com/widget.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>

Bom:

<script async defer src="https://example.com/widget.js"></script>

Outro

Indentação consistente

A indentação é importante na legibilidade do código.

Ruim:

<html>
	<head>
	  ...
	</head>
  <body>
    ...
  </body>
</html>

Bom:

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Use caminhos absolutos para links internos

Um caminho absoluto funciona melhor no seu localhost sem conexão com a internet.

Ruim:

<link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>

Bom:

<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="/contact.html">contact page</a>.</p>

Não utilize protocolo relativo em URL para recursos externos

Com o protocolo você pode carregar recursos externos com seguração e estabilidade.

Ruim:

<script src="//example.com/js/library.js">

Bom:

<script src="https://example.com/js/library.js">

Contributors

@hail2u_
@momdo

Translators

@costinlotreanu
@edgar-avila
@kobyborali
@m1nhnv
@mrcaidev
@naufalk25
@oebelus
@sahilmaniyar
@shayanthenerd
@sliderkh
@stenbaek
@techhtml
@umutphp
@victorchao996
@wesleynepo
@zulkar29

License

CC0

Files

README.pt-BR.md

Latest commit

History

README.pt-BR.md

File metadata and controls

Boas Práticas HTML

Geral

Comece com DOCTYPE

Não utilize DOCTYPE legado ou obsoleto

Não utilize declaração de XML

Não utilizar referências de caracteres sempre que possível

Utilize as entidades dos caracteres &, <, >, ", e '

Use referência numérica de caracteres para controle ou caracteres invisíveis

Coloque espaços envolta do conteúdo dos seus comentários

Não esqueça da tag de fechamento

Não misture as formatações de elementos vazios

Não coloque espaços em branco em volta das tags e valores dos atributos

Não misture caracteres em maiúsculo e minúsculo

Não misture as aspas

Não separe os atributos com dois o mais espaços

Omita o valor de um atributo booleano

Omita os namespaces

Não utilize atributos de XML

Não misture atributos com prefixo data-*, Microdata e RDFa Lite com atributos comuns

Prefira o padrão das semânticas do ARIA

O elemento raiz

Adicione o atributo lang

Mantenha o valor do atributo lang o mais curto possível

Evite atributos com prefixo data-* sempre que possível

Metadados do documento

Adicione o elemento title

Não utilize o elemento base

Especifique o tipo do MIME dos recursos linkados

Não crie um link para o favicon.ico

Adicione apple-touch-icon ao link

Adicione o atributo title em folhas de estilo alternativas

Para URL use o elemento link

Especifique a codificação dos caracteres do documento

Não utilize formato codificação legado

Especifique a codificação dos caracteres logo no início

Use UTF-8

Omita o atributo type para CSS

Não comente os conteúdos do elemento style

Não misture tags de CSS com JavaScript

Seções

Adicione o elemento body

Esqueça o elemento hgroup

Use o elemento address apenas para informações de contato

Agrupando conteúdos

Não comece uma nova linha com o elemento pre

Use de forma apropriada o elemento blockquote

Não inclua a atribuição direto no elemento blockquote

Escreva um elemento da lista por linha

Use o atributo type para o elemento ol

Não use dl para diálogos

Coloque um elemento figcaption como primeiro ou último filho do elemento figure

Use o elemento main

Evite utilizar div sempre que possível

Semânticas a nível de texto

Não divida o mesmo link que pode estar agrupado

Use o atributo download para baixar um recurso

Use os atributos rel, hreflang, e type quando necessário

Texto do link evidente

Não utilize o elemento em para avisos ou cuidado

Evite os elementos s, i, b, e u sempre que possível

Não coloque aspas no texto do elemento q

Adicione o atributo title ao elemento abbr

Marque o elemento ruby detalhadamente

Use o atributo datetime em formatos não reconhecidos por máquina no elemento time

Especifique a linguagem do código com o atributo class prefixado com language-

Mantenha o elemento kbd o mais simples possível

Evite o elemento span sempre que possível

Quebre a linha depois do elemento br

Não utilize o elemento br apenas para propósito visual

Edições

Não insira elementos ins e del entre outros elementos

Conteúdo embutido

Garanta um um elemento img como substituto para um elemento picture

Adicione o atributo alt em uma img se necessário

Utilize as entidades dos caracteres `&`, `<`, `>`, `"`, e `'`

Não misture atributos com prefixo `data-*`, Microdata e RDFa Lite com atributos comuns

Adicione o atributo `lang`

Mantenha o valor do atributo `lang` o mais curto possível

Evite atributos com prefixo `data-*` sempre que possível

Adicione o elemento `title`

Não utilize o elemento `base`

Não crie um link para o `favicon.ico`

Adicione `apple-touch-icon` ao link

Adicione o atributo `title` em folhas de estilo alternativas

Para URL use o elemento `link`

Omita o atributo `type` para CSS

Não comente os conteúdos do elemento `style`

Adicione o elemento `body`

Esqueça o elemento `hgroup`

Use o elemento `address` apenas para informações de contato

Não comece uma nova linha com o elemento `pre`

Use de forma apropriada o elemento `blockquote`

Não inclua a atribuição direto no elemento `blockquote`

Use o atributo `type` para o elemento `ol`

Não use `dl` para diálogos

Coloque um elemento `figcaption` como primeiro ou último filho do elemento `figure`

Use o elemento `main`

Evite utilizar `div` sempre que possível

Use o atributo `download` para baixar um recurso

Use os atributos `rel`, `hreflang`, e `type` quando necessário

Não utilize o elemento `em` para avisos ou cuidado

Evite os elementos `s`, `i`, `b`, e `u` sempre que possível

Não coloque aspas no texto do elemento `q`

Adicione o atributo `title` ao elemento `abbr`

Marque o elemento `ruby` detalhadamente

Use o atributo `datetime` em formatos não reconhecidos por máquina no elemento `time`

Especifique a linguagem do código com o atributo `class` prefixado com `language-`

Mantenha o elemento `kbd` o mais simples possível

Evite o elemento `span` sempre que possível

Quebre a linha depois do elemento `br`

Não utilize o elemento `br` apenas para propósito visual

Não insira elementos `ins` e `del` entre outros elementos

Garanta um um elemento `img` como substituto para um elemento `picture`

Adicione o atributo `alt` em uma `img` se necessário

Deixe vazio o atributo `alt` sempre que possível

Omita o atributo `alt` se possível

Elemento `iframe` vazio

Marque o conteúdo do elemento `map`

Disponibilize um conteúdo substituto para os elementos `audio` e `video`

Use o elemento `th` para o cabeçalho da célula

Envolva um controle de formulário com o elemento `label`

Omita o atributo `for` se possível

Use o atributo `type` apropriado para o element `input`

Adicione o atributo `value` ao elemento `input type="submit"`

Adicione o atributo `title` ao elemento input `input` quando existir o atributo `pattern`

Não utilize o atributo `placeholder` como um rótulo

Escreva um elemento `option` por linha

Adicione o atributo `max` ao elemento de `progress`

Adicione os atributos `min` e `max` ao elemento `meter`

Coloque o elemento `legend` como o primeiro filho do elemento `fieldset`

Omita o atributo `type` para JavaScript

Não comente os conteúdos do elemento `script`

Não utilzie elementos `script` injetados por script