Guia de Estilo e Convenções de Código (5) HTML

Convenções de código HTML

Desenvolvedores de sites muitas vezes não estão certos sobre os estilos e sintaxes de código a usar no HTML.

Entre 2000 e 2010, muitos desenvolvedores de sites migraram do HTML para o XHTML.

Através do XHTML, os desenvolvedores tinham que escrever código 'bem formatado' eficaz.

O HTML5 é mais flexível na validação de código.

Através do HTML5, você deve criar o seu próprioPráticas recomendadas, guias de estilo e convenções de código.

Inteligente e com garantia futura

Um uso lógico dos estilos pode tornar mais fácil para outras pessoas entenderem e usarem seu HTML.

No futuro, programas como leitores de XML podem precisar ler seu HTML.

Use uma sintaxe 'aproximada do XHTML' bem formatada para ser mais inteligente.

Notas:Mantenha seus estilos inteligentes, organizados, puros e bem formatados.

Use o tipo de documento correto

Sempre declare o tipo de documento no início do documento:

<!DOCTYPE html>

Se você sempre manteve tags em minúsculas, você pode usar:

<!doctype html>

Use nomes de elementos em minúsculas

O HTML5 permite usar letras maiúsculas e minúsculas nos nomes dos elementos.

Recomendamos usar nomes de elementos em minúsculas:

  • Nomes misturados de maiúsculas e minúsculas não são bons
  • Os desenvolvedores costumam usar nomes em minúsculas (por exemplo, no XHTML)
  • Os minúsculos parecem mais puros
  • Os minúsculos são mais fáceis de escrever

Não tão bom:

<SECTION> 
  <p>Este é um parágrafo.</p>
</SECTION>

Muito ruim:

<Section> 
  <p>Este é um parágrafo.</p>
</SECTION>

Bom:

<section> 
  <p>Este é um parágrafo.</p>
</section>

Fechar todos os elementos HTML

No HTML5, você não precisa fechar todos os elementos (por exemplo, o elemento <p>).

Recomendamos fechar todos os elementos HTML:

Parece ruim:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Parece bom:

<section>
  <p>Este é um parágrafo.</p>
  <p>Este é um parágrafo.</p>
</section>

Fechamento de elementos HTML vazios

No HTML5, o fechamento de elementos vazios é opcional.

Também é permitido assim:

<meta charset="utf-8">

Também é permitido assim:

<meta charset="utf-8" />

A barra invertida (/) é necessária no XHTML e XML.

Se você espera que softwares XML acessem sua página, manter esse hábito é uma boa ideia.

Use nomes de atributos em minúsculas

O HTML5 permite nomes de atributos mistos de maiúsculas e minúsculas.

Recomendamos usar nomes de atributos em minúsculas:

  • Nomes de atributos mistos não são bons
  • Os desenvolvedores estão acostumados a usar nomes de atributos em minúsculas (por exemplo, no XHTML)
  • Os nomes de atributos em minúsculas parecem mais puros
  • Os nomes de atributos em minúsculas são mais fáceis de escrever

Parece ruim:

<div CLASS="menu">

Parece bom:

<div class="menu">

Valores de atributo entre aspas

O HTML5 permite valores de atributo sem aspas.

Recomendamos que os valores dos atributos sejam entre aspas:

  • Se o valor do atributo contiver um valor, deve-se usar aspas
  • Estilos mistos são absolutamente ruins
  • Valores entre aspas são mais fáceis de ler

Este valor de atributo é inválido porque contém espaços:

<table class=table striped>

Isso é válido:

<table class="table striped">

Atributos necessários

Sempre defina imagens usando alt Atributos. Este atributo é importante quando a imagem não pode ser exibida.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Defina sempre o tamanho da imagem. Isso reduz o flicker, pois o navegador reserva espaço para a imagem antes de carregá-la.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Espaços e igual

Os espaços ao redor do igual são legais:

<link rel = "stylesheet" href = "styles.css">

Mas o espaço reduzido é mais fácil de ler, Mas espaço sem recuo é mais fácil de ler e agrupa melhor as entidades:

<link rel="stylesheet" href="styles.css">

Evite linhas de código longas

Quando se usa um editor HTML, é desconfortável ler o código HTML através da rolagem horizontal e vertical.

Tente evitar que as linhas de código ultrapassem 80 caracteres.

Linhas em branco e recuos

Não adicione linhas em branco sem motivo.

Para melhorar a legibilidade, use linhas em branco para separar grandes ou blocos lógicos de código.

Para melhorar a legibilidade, use dois recuos. Não use TAB.

Não use linhas em branco e recuos desnecessários. Não há necessidade de usar linhas em branco entre itens curtos e relacionados, nem de recuar cada elemento:

Insuperável:

<body>
  <h1>Cidades Famosas</h1>
  <h2>Tóquio</h2>
  <p>
    Tóquio é a capital do Japão, o centro da Grande Área de Tóquio,
    e a área metropolitana mais populosa do mundo.
    É o local do governo japonês e do Palácio Imperial,
    e a casa da Família Imperial Japonesa.
  </p>
</body>

Melhor:

<body>
<h1>Cidades Famosas</h1>
<h2>Tóquio</h2>
<p>
Tóquio é a capital do Japão, o centro da Grande Área de Tóquio,
e a área metropolitana mais populosa do mundo.
É o local do governo japonês e do Palácio Imperial,
e a casa da Família Imperial Japonesa.
</p>
</body>

Exemplo de tabela:

<table>
  <tr>
    <th>Nome</th>
    <th>Descrição</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Descrição de A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Descrição de B</td>
  <tr>
</table>

Exemplo de lista:

<ol>
  <li>LondresA</li>
  <li>Paris</li>
  <li>Tóquio</li>
</ol>

Omitir <html> e <body>?

No padrão HTML5, é possível omitir as tags <html> e <body>.

O seguinte código é validado como HTML5:

Exemplo

<!DOCTYPE html>
<head>
  <title>Título da Página</title>
</head>
<h1>Este é um título.</h1>
<p>Este é um parágrafo.</p>

Experimente pessoalmente

Não recomendamos omitir as tags <html> e <body>.

O elemento <html> é o elemento raiz do texto. É o local ideal para especificar o idioma da página.

<!DOCTYPE html>
<html lang="en-US">

Para aplicações acessíveis (leitores de tela) e motores de busca, a declaração de idioma é importante.

Omitir <html> ou <body> pode causar a falha de software DOM e XML.

Omitir <body> pode gerar erros em navegadores antigos (IE9).

Omitir <head>?

No padrão HTML5, a tag <head> também pode ser omitida.

Por padrão, o navegador adicionará todos os elementos antes do <body> ao elemento <head> padrão.

Ao omitir a tag <head>, você pode reduzir a complexidade do HTML:

Exemplo

<!DOCTYPE html>
<html>
<title>Título da Página</title>
<body>
  <h1>Este é um título.</h1>
  <p>Este é um parágrafo.</p>
</body>
</html>

Experimente pessoalmente

Notas:Para desenvolvedores web, omitir tags é algo estranho. Criar regras leva tempo.

Metadados

O elemento <title> é obrigatório no HTML5. Crie títulos significativos sempre que possível.

<title>Sintaxe e Estilo de Codificação HTML5</title>

Para garantir uma interpretação adequada e um índice correto pelos motores de busca, defina cedo a linguagem e a codificação de caracteres no documento:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Sintaxe e Estilo de Codificação HTML5</title>
</head>

Comentários HTML

Comentários curtos devem ser escritos em uma única linha, com um espaço após o <!-- e um espaço antes do -->:

<!-- This is a comment -->

Comentários longos, que se estendem por várias linhas, devem ser escritos em linhas independentes com <!-- e -->:

<!-- 
  Este é um exemplo de comentário longo. Este é um exemplo de comentário longo. Este é um exemplo de comentário longo.
  Este é um exemplo de comentário longo. Este é um exemplo de comentário longo. Este é um exemplo de comentário longo.
-->

Comentários longos são mais observáveis se estiverem indentados com dois espaços.

Folhas de estilo

Use uma sintaxe simples para linkar as folhas de estilo (o atributo type não é necessário):

<link rel="stylesheet" href="styles.css">

Regras curtas podem ser comprimidas em uma linha, assim:

p.into {font-family:"Verdana"; font-size:16em;}

Regras longas devem ser divididas em várias linhas:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • O abre-parêntese deve estar na mesma linha que o seletor
  • Use um espaço antes do abre-parêntese
  • Use recuo de dois caracteres
  • Use dois pontos seguidos de um espaço entre cada atributo e seu valor
  • Use espaço após cada vírgula ou ponto e vírgula
  • Use ponto e vírgula após cada par de valor de atributo (inclusive o último)
  • Use aspas para delimitar valores apenas quando eles contiverem espaços
  • Coloque o parêntese fechado em uma nova linha, sem espaço antes dele
  • Evite que cada linha ultrapasse 80 caracteres

Notas:Adicionar espaço após a vírgula ou ponto e vírgula é uma regra geral para todos os tipos de escrita.

Carregar JavaScript no HTML

Use uma sintaxe simples para carregar scripts externos (o atributo type não é necessário):

<script src="myscript.js">

Acessar elementos HTML via JavaScript

As consequências do uso de estilos HTML 'desarrumados' podem levar a erros de JavaScript.

Essas duas instruções JavaScript produzem resultados diferentes:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Experimente pessoalmente

Se possível, use a mesma convenção de nomeação em HTML (igual ao JavaScript).

Acesse a Guia de Estilo JavaScript.

Use nomes de arquivo minúsculos

A maioria dos servidores da web (Apache, Unix) é sensível à maiúsculas e minúsculas dos nomes dos arquivos:

Não é possível acessar London.jpg por london.jpg.

Outros servidores da web (Microsoft, IIS) não são sensíveis a maiúsculas e minúsculas:

É possível acessar London.jpg tanto por london.jpg quanto por London.jpg.

Se usar mistura de maiúsculas e minúsculas, você deve manter uma alta consistência.

Se você migrar de um servidor que não é sensível a maiúsculas e minúsculas para um servidor que é sensível a maiúsculas e minúsculas, esses pequenos erros podem danificar seu site.

Para evitar esses problemas, use sempre nomes de arquivo minúsculos (se possível).

Extensão de Arquivo

Os nomes dos arquivos HTML devem usar a extensão .html(em vez de .htm)

Os arquivos CSS devem usar a extensão .css.

Os arquivos JavaScript devem usar a extensão .js.