HTML

Escreva HTML de maneira organizada, semântica e escalável

Estrutura básica para iniciar um HTML

Utilize esse código para iniciar seu HTML.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
  ...
  </body>
</html>

Sintaxe do HTML

Elementos aninhados devem estar identados uma vez (2 espaços).
Sempre use aspas duplas, nunca aspas simples.
Nunca inclua uma barra invertida nos elementos viúvos (exemplo: <img> ou <hr>).

Encoding de caractéres

Assegure-se rapidamente que a renderizaçnao do seu conteúdo declarando o encoding de caractéres explicitamente.

Praticidade em vez de pureza

Esforce-se para manter o padrão e a semântica do HTML, mas não às custas da praticidade. Use o mínimo de código com a menor complexidade possível.

Como produzimos um framework para ser usado em sistemas administrativos internos, uma vez ou outra a semântica pode ser prejudicada para facilitar a montagem de componentes. Mas entenda que essa é uma exceção.

Ordem dos atributos

Não é obrigatório, mas é bom que seja aplicado quando possível: Atributos HTML devem usar esta ordem em particular para facilitar a leitura do código.

class
id
data-*
for, type, ou href
src, for, type, href
title, alt
aria-*, role

Atributos booleanos

Um atributo boleano é o único que não precisa ter valores declarados. O XHTML precisa que você declare um valor, mas no HTML5 isso não é necessário.

Para uma leitura adicional, consulte a seção do WhatWG sobre atributos booleanos:

A presença de um atributo boleano representa um valor verdadeiro e a ausência do atributo representa um valor falso.

Se você precisa incluir valores nos atributos, você não precisa seguir esta regra do WhatWG:

Se o atributo está presente, seu valor deve ser uma string vazia ou [...] o nome canônico do atributo, sem espaços em branco.

Resumindo, não adicione nenhum valor.

Identação

Escolher entre tabs e espaços sempre é uma dúvida terrível, mesmo assim, quando se trata de HTML, o padrão sempre foi TABs.

Usamos TABs para HTML. No CSS usamos soft-tabs, com dois espaços.

Aspas

Utilizamos ASPAS DUPLAS.

1
2
<div class="classe"></div>
<a href="http://..."></a>

Encoding

Eu sei que eu não preciso dizer, mas quem sabe, não é?

O encoding utilizado é o padrão da web inteira: UTF-8.

1
<meta charset="utf-8">

Locaweb Style

Documentação