Guia de estilo HTML
Um código HTML consistente, limpo e organizado torna mais fácil para outras pessoas lerem e entenderem seu código.
Aqui estão algumas diretrizes e dicas para criar um bom código HTML.
Sempre declarar o tipo de documento
Sempre declare o tipo de documento como a primeira linha do documento.
O tipo de documento correto para HTML é:
<!DOCTYPE html>
Usar nomes de elementos em minúsculas
HTML permite misturar letras maiúsculas e minúsculas em nomes de elementos.
No entanto, recomendamos usar nomes de elementos em letras minúsculas, porque:
- Misturar nomes maiúsculos e minúsculos parece ruim
- Os desenvolvedores normalmente usam nomes em minúsculas
- Minúsculas parecem mais limpas
- Minúsculas são mais fáceis de escrever
Boa:
<body>
<p>This is a paragraph.</p>
</body>Ruim:
<BODY>
<P>This is a paragraph.</P>
</BODY>Fechar todos os elementos HTML
Em HTML, você não precisa fechar todos os elementos (por exemplo, o <p>elemento).
No entanto, recomendamos fechar todos os elementos HTML, assim:
Boa:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Ruim:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Usar nomes de atributos em minúsculas
HTML permite misturar letras maiúsculas e minúsculas em nomes de atributos.
No entanto, recomendamos usar nomes de atributos em letras minúsculas, porque:
- Misturar nomes maiúsculos e minúsculos parece ruim
- Os desenvolvedores normalmente usam nomes em minúsculas
- Minúsculas parecem mais limpas
- Minúsculas são mais fáceis de escrever
Boa:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Ruim:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Sempre citar valores de atributo
HTML permite valores de atributo sem aspas.
No entanto, recomendamos citar valores de atributo, porque:
- Os desenvolvedores normalmente citam valores de atributos
- Os valores cotados são mais fáceis de ler
- Você DEVE usar aspas se o valor contiver espaços
Boa:
<table
class="striped">Ruim:
<table class=striped>Muito mal:
Isso não funcionará, porque o valor contém espaços:
<table class=table striped>Sempre especificar alt, largura e altura para imagens
Sempre especifique o altatributo para imagens. Este atributo é importante se a imagem por algum motivo não puder ser exibida.
Além disso, sempre defina o widthe
heightdas imagens. Isso reduz a cintilação, pois o navegador pode reservar espaço para a imagem antes de carregar.
Boa:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Ruim:
<img
src="html5.gif">Espaços e sinais de igual
HTML permite espaços em torno de sinais de igual. Mas sem espaço é mais fácil de ler e agrupa melhor as entidades.
Boa:
<link rel="stylesheet" href="styles.css">Ruim:
<link
rel = "stylesheet" href = "styles.css">Evite longas linhas de código
Ao usar um editor de HTML, NÃO é conveniente rolar para a direita e para a esquerda para ler o código HTML.
Tente evitar linhas de código muito longas.
Linhas em branco e recuo
Não adicione linhas em branco, espaços ou recuos sem motivo.
Para facilitar a leitura, adicione linhas em branco para separar blocos de código grandes ou lógicos.
Para facilitar a leitura, adicione dois espaços de recuo. Não use a tecla tab.
Boa:
<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>
Ruim:
<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>
Bom exemplo de 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>
Bom exemplo de lista:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Nunca pule o elemento <title>
O <title>elemento é necessário em HTML.
O conteúdo de um título de página é muito importante para a otimização de mecanismos de pesquisa (SEO)! O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar as páginas nos resultados da pesquisa.
O <title>elemento:
- define um título na barra de ferramentas do navegador
- fornece um título para a página quando ela é adicionada aos favoritos
- exibe um título para a página nos resultados do mecanismo de pesquisa
Portanto, tente tornar o título o mais preciso e significativo possível:
<title>HTML
Style Guide and Coding Conventions</title>
Omitindo <html> e <body>?
Uma página HTML será validada sem as tags <html>e
:<body>
Exemplo
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
No entanto, recomendamos sempre adicionar as tags <html>e
!<body>
A omissão <body>pode produzir erros em navegadores mais antigos.
Omitindo <html>e <body>
também pode travar software DOM e XML.
Omitindo <head>?
A tag HTML <head> também pode ser omitida.
Os navegadores adicionarão todos os elementos antes <body>de , a um elemento padrão <head>
.
Exemplo
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
No entanto, recomendamos o uso da <head>tag.
Fechar elementos HTML vazios?
Em HTML, é opcional fechar elementos vazios.
Permitido:
<meta
charset="utf-8">
Também permitido:
<meta charset="utf-8" />
Se você espera que o software XML/XHTML acesse sua página, mantenha a barra de fechamento (/), pois ela é obrigatória em XML e XHTML.
Adicione o atributo lang
Você deve sempre incluir o langatributo dentro da <html>tag, para declarar o idioma da página da Web. Isto destina-se a ajudar os motores de busca e navegadores.
Exemplo
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Metadados
Para garantir a interpretação adequada e a indexação correta do mecanismo de pesquisa, tanto o idioma quanto a codificação de caracteres devem ser definidos o mais cedo possível em um documento HTML:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Configurando a janela de visualização
A janela de visualização é a área visível do usuário de uma página da web. Varia de acordo com o dispositivo - será menor em um telefone celular do que em uma tela de computador.
Você deve incluir o seguinte <meta>elemento em todas as suas páginas da web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Isso fornece ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página.
A width=device-widthparte define a largura da página para seguir a largura da tela do dispositivo (que varia de acordo com o dispositivo).
A initial-scale=1.0parte define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
Aqui está um exemplo de uma página da web sem a meta tag viewport e a mesma página da web com a meta tag viewport:
Dica: Se você estiver navegando nesta página com um telefone ou tablet, você pode clicar nos dois links abaixo para ver a diferença.
Comentários HTML
Comentários curtos devem ser escritos em uma linha, assim:
<!-- This is a comment -->
Comentários que se estendem por mais de uma linha devem ser escritos assim:
<!--
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 forem recuados com dois espaços.
Usando folhas de estilo
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.