Orientações de HTML

As orientações a seguir ensinam como escrever HTML para exemplos de códigos MDN.

Neste artigo

Doctype e metadata

Observação: As orientações nesta seção são aplicáveis apenas quando você precisa mostrar um documento HTML completo. Na maior parte do tempo, você não precisará fazer isto. Um trecho é geralmente suficiente para demonstrar uma característica. Ao usar o macro EmbedLiveSample, apenas inclua o trecho HTML; ele automaticamente será inserido em um documento HTML completo, quando exibido.

Doctype

Você deve utilizar o doctype do HTML5. Ele é pequeno, fácil de memorizar e compatível com versões anteriores:

<!DOCTYPE html>

Lingua do documento

Defina a lingua do documento usando o atributo lang no seu elemento <html>:

<html lang="pt-BR">

Isso é bom para acessibilidade e mecanismos de pesquisa, ajuda na localização de conteúdo e lembra as pessoas de usarem as melhores práticas. 

Conjunto de caracteres do documento

Além disso, você deve definir o conjunto de caracteres do seu documento da seguinte maneira:

<meta charset="utf-8">

Utilize UTF-8, a não ser que você tenha uma boa razão para não usá-lo. Ele cobrirá as necessidades dos seus caracteres, independente da lingua que você está usando no seu documento. Além disso, você sempre deve especificar o conjunto de caracteres o quanto antes no <head> do seu HTML (dentro do primeiro kilobyte), já que isso protege contra uma vulnerabilidade de segurança do Internet Explorer desagradável.

Meta tag viewport

Por fim, você sempre deve adicionar a meta tag viewport no <head> do seu HTML para dar uma chance melhor de funcionar em dispositivos móveis. Você deve incluir pelo menos o seguinte trecho no seu documento, o qual pode ser modificado mais tarde quando for necessário:

<meta name="viewport" content="width=device-width">

Veja Utilizando a meta tag viewport para controlar o layout em navegadores móveis para mais detalhes.

Estilo de codificação de marcação geral

Use letra minúscula

Use letras minúsculas para todos os nomes de elementos e valores/nomes de atributos, pois aparenta ser mais limpo e significa que você pode escrever a marcação mais rápido.

Isso é bom:

<p class="nice">This looks nice and neat</p>

Isso não é bom:

<P CLASS="WHOA-THERE">Why is my markup shouting?</P>

Barras à direita

Não inclua barras no estilo XHTML para elementos vazios, já que elas são desnecessárias e tornam as coisas mais lentas. Além disso, elas podem fazer navegadores antigos pararem de funcionar, se você não tomar cuidado (embora, pelo que conseguimos lembrar, isso não tem sido um problema desde o Netscape 4).

Isso é bom:

<input type="text">
<hr>

As barras não são necessárias:

<input type="text" />
<hr />

Aspas em atributos

Você deve colocar duplas aspas em atributos. É tentador omitir as aspas, já que o HTML5 permite isso, mas a marcação é mais fácil e rápida de ler se você as incluir. Por exemplo, isso é melhor:

<img src="images/logo.jpg" alt="A circular globe icon" class="no-border">

que isso:

<img src=images/logo.jpg alt=A circular globe icon class=no-border>

Além disso, isso pode causar problemas — no exemplo acima, o atributo alt será interpretado como atributos múltiplos, pois não existem aspas para especificar que "um ícone de globo circular" é um único valor de atributo.

Use aspas duplas

Use aspas duplas para HTML, não aspas únicas:

<p class="important">Yes</p>
<p class='important'>Nope</p>

Atributos booleanos

Não escreva atributos booleanos por completo; você pode simplesmente escrever o nome do atributo para configurá-lo. Por exemplo, você pode escrever:

required

Isso é perfeitamente compreensível e funciona bem. Em vez de escrever a versão mais longa com o valor

required="required" 

A qual é suportada mas não é necessária.

Nome de classes e IDs

Use nomes semânticos de classes/IDs e separe múltiplas palavras com hífens. Não utilize camelCase (por exemplo: iPhone, eBay).

Bom:

<p class="editorial-summary">Blah blah blah</p>

Ruim:

<p class="bigRedBox">Blah blah blah</p>

Referências de entidades

Não use referências de entidades desnecessariamente — use o caractere literal sempre que possível (você ainda precisará escapar de caracteres como colchetes angulares e aspas).

Como um exemplo, você poderia escrever apenas

<p>© 2018 Me</p>

Ao invés de

<p>&copy; 2018 Me</p>

Isso está bem desde que você declare um conjunto de caracteres UTF-8.

Bons exemplos de HTML no MDN

Você pode encontrar trechos HTML bons, concisos e significativos na parte superior da páginas de referência HTML — nossos exemplos interativos geralmente são escritos para seguir essas orientações, embora esteja ciente de que podem diferir em alguns lugares, pois foram escritos principalmente antes das orientações serem escritas recentemente.