Convenções de codificação HTML
Os desenvolvedores da Web são frequentemente incertos sobre o estilo de codificação e sintaxe para usar em HTML.
Entre 2000 e 2010, muitos desenvolvedores web convertido de HTML para XHTML.
Com XHTML, os desenvolvedores foram forçados a escrever válido e "well-formed" código.
HTML5 é um pouco mais desleixado quando se trata de código de validação.
Com HTML5, você deve criar suas próprias melhores práticas, guia de estilo e convenções de codificação.
Seja esperto e Futuro Proof
A consequente utilização de estilo, torna mais fácil para os outros para compreender e utilizar o seu HTML.
No futuro, programas como leitores XML, pode querer ler o seu HTML.
Usando um bem formado "close to XHTML" sintaxe, pode ser inteligente.
Sempre mantenha o seu estilo inteligente, arrumado, limpo e bem formado.
Uso correto Tipo de Documento
Sempre declarar o tipo de documento como a primeira linha no seu documento:
<!DOCTYPE html>Se você quiser consistência com menores marcas de caso, você pode usar:
<!DOCTYPE html>Use minúsculas Nomes de Elementos
HTML5 permite misturando letras maiúsculas e minúsculas em nomes de elementos.
Recomendamos a utilização de nomes de elementos minúsculas:
- Misturando nomes maiúsculas e minúsculas é ruim
- Os desenvolvedores estão acostumados a usar nomes em minúsculas (as in XHTML)
- limpador de olhar minúsculas
- Minúsculas são mais fáceis de escrever
Mau:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Muito mal:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Boa:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Fechar todos os elementos HTML
Em HTML5, você não tem que fechar todos os elementos (for example the <p> element) .
Recomendamos fechar todos os elementos HTML:
Olhando ruim:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Parece bom:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Fechar vazio elementos HTML
Em HTML5, é opcional para fechar os elementos vazios.
Isso é permitido:
<meta charset="utf-8">Isso também é permitido:
<meta charset="utf-8" />A barra (/) é necessária em XHTML e XML.
Se você espera software XML para acessar sua página, pode ser uma boa idéia para mantê-lo.
Usar Minúsculas nomes de atributos
HTML5 permite misturando letras maiúsculas e minúsculas em nomes de atributos.
Recomendamos a utilização de nomes de atributos em minúsculas:
- Misturando nomes maiúsculas e minúsculas é ruim
- Os desenvolvedores estão acostumados a usar nomes em minúsculas (as in XHTML)
- limpador de olhar minúsculas
- Minúsculas são mais fáceis de escrever
Olhando ruim:
<div CLASS="menu">Parece bom:
<div class="menu">Valores Citar Atributo
HTML5 permite que valores de atributos sem aspas.
Recomendamos citando valores de atributos:
- Você tem que usar aspas se o valor contiver espaços
- estilos de mistura não é bom
- Os valores citados são mais fáceis de ler
Isso não vai funcionar, porque o valor contém espaços:
<table class=table striped>Isto irá funcionar:
<table class="table striped">atributos de imagem
Sempre use o alt atributo com imagens. É importante quando a imagem não pode ser visualizado.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">definir sempre o tamanho da imagem. Ele reduz cintilando porque o navegador pode reservar espaço para imagens antes de serem carregados.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">Espaços e sinais de igual
Espaços em torno sinais de igual é legal:
<link rel = "stylesheet" href = "styles.css">Mas entidades espaço-menos é mais fácil de ler, e grupos de melhor em conjunto:
<link rel="stylesheet" href="styles.css">Evite linhas de código longo
Ao usar um editor de HTML, é inconveniente para deslocar para a direita e para a esquerda para ler o código HTML.
Tente evitar linhas de código mais de 80 caracteres.
Linhas em branco e Indentation
Não adicionar linhas em branco sem uma razão.
Para facilitar a leitura, adicionar linhas em branco para separar blocos de código grandes ou lógicas.
Para facilitar a leitura, adicione 2 espaços de recuo. Não use TAB.
Não use linhas em branco desnecessários e recuo. Não é necessário o uso de linhas em branco entre os itens curtos e afins. Não é necessário para recuar cada elemento:
Desnecessário:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>Melhor:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>Exemplo Tabela:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>Lista Exemplo:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>Omitindo <html> e <body> ?
No padrão HTML5, o <html> tag e <body> tag pode ser omitida.
O código a seguir irá validar como HTML5:
Exemplo
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Tente você mesmo " Não recomendamos a omissão das <html> e <body> tags.
O <html> elemento é a raiz do documento. É o local recomendado para especificar o idioma da página:
<!DOCTYPE html>
<html lang="en-US">Declarando uma língua é importante para aplicativos de acessibilidade (screen readers) e motores de busca.
Omissão <html> ou <body> pode falhar DOM e software XML.
Omitindo <body> pode produzir erros nos navegadores mais antigos (IE9) .
Omitindo <head> ?
No padrão HTML5, o <head> tag também pode ser omitido.
Por padrão, os navegadores irá adicionar todos os elementos antes de <body> , a um padrão <head> elemento.
Você pode reduzir a complexidade do HTML, omitindo a <head> tag:
Exemplo
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Tente você mesmo " Omitir Tag é desconhecido para os desenvolvedores web. Ele precisa de tempo para ser estabelecida como uma diretriz.
dados meta
O <title> elemento é necessário em HTML5. Faça o título tão significativa quanto possível:
<title>HTML5 Syntax and Coding Style</title>Para garantir a interpretação correta, e indexação correta motor de pesquisa, tanto a língua como a codificação de caracteres deve ser definido o mais cedo possível em um documento:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>Comentários HTML
Breves comentários devem ser escritos em uma linha, com um espaço depois <!-- and a space before --> :
<!-- This is a comment -->Comentários longos, abrangendo muitas linhas, deve ser escrito com <!-- and --> Em linhas separadas:
<!--
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->Comentários longos são mais fáceis de observar, se eles são recuados 2 espaços.
Folhas de estilo
Use uma sintaxe simples para ligar folhas de estilo (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">regras curtas pode ser escrito comprimido, em uma linha, como este:
p.into {font-family: Verdana; font-size: 16em;}regras longos devem ser escritos em várias linhas:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Colocar o suporte de abertura na mesma linha que o selector de.
- Usar um espaço antes de o suporte de abertura.
- Use 2 espaços de recuo.
- Use cólon mais um espaço entre cada propriedade e seu valor.
- Use o espaço após cada vírgula ou ponto e vírgula.
- Use ponto e vírgula após cada par de propriedade de valor, incluindo a última.
- Só use aspas em torno de valores se o valor contiver espaços.
- Coloque o suporte de fechamento em uma nova linha, sem espaços à esquerda.
- Evite linhas com mais de 80 caracteres.
Adicionando um espaço após a vírgula ou um ponto e vírgula, é uma regra geral em todos os tipos de escrita.
Carregando JavaScript em HTML
Use uma sintaxe simples para carregar scripts externos (the type attribute is not necessary) :
<script src="myscript.js">Acessando elementos HTML com JavaScript
A consequência do uso "untidy" estilos HTML, pode resultar em erros de JavaScript.
Estas duas instruções JavaScript irá produzir resultados diferentes:
Se possível, use a mesma convenção de nomenclatura (as JavaScript) em HTML.
Visite o Guia de Estilo do JavaScript .
Use minúsculas de nomes de arquivos
A maioria dos servidores web (Apache, Unix) são sensíveis caso sobre os nomes dos arquivos:
london.jpg não pode ser acessado como London.jpg.
Outros servidores web (Microsoft, IIS) não são case sensitive:
london.jpg pode ser acessado como London.jpg ou london.jpg.
Se você usar uma mistura de letras maiúsculas e minúsculas, você tem que ser extremamente consistente.
Se você se move de um caso insensível, para um servidor sensível caso, mesmo pequenos erros vai quebrar o seu web.
Para evitar esses problemas, use sempre nomes de arquivos em minúsculas (if possible) .
Extensões de arquivo
Arquivos HTML deve ter uma extensão .html (or .htm ) .
Arquivos CSS deve ter uma extensão .css.
Arquivos JavaScript deve ter uma extensão .js.
Diferenças entre .htm e .html
Não há diferença entre o .htm e extensões .html. Ambos serão tratados como HTML por qualquer navegador web ou servidor web.
As diferenças são cultural:
.htm "smells" de sistemas DOS início onde o sistema limitados as extensões de 3 caracteres.
.html "smells" de sistemas operacionais Unix que não têm essa limitação.
As diferenças técnicas
Quando um URL não especificar um nome de arquivo (like http://www.w3ii.com/css/) , o servidor retorna um nome de arquivo padrão. nomes de arquivos padrão comuns são index.html, index.htm, default.html e default.htm.
Se o servidor estiver configurado apenas com "index.html" como nome de arquivo padrão, o arquivo deve ser nomeado "index.html" , não "index.htm."
No entanto, os servidores podem ser configurados com mais de um nome de arquivo padrão, e, normalmente, você pode configurar como muitos nomes de arquivos padrão conforme necessário.
De qualquer forma, a extensão completa para arquivos HTML é .html, e não há nenhuma razão que não deve ser usado.