Confira aqui dicas importantes de tudoque viu até agora. Um código HTML consistente, limpo e organizado torna mais fácil para outras pessoas ler e entender seu código.
Seja inteligente e à prova do futuro
Aqui estão algumas diretrizes e dicas para criar um bom código fonte HTML.
Seja inteligente e à prova do futuro
Aqui estão algumas diretrizes e dicas para criar um bom código fonte HTML.
Usar tipo de documento correto
Sempre declare o tipo de documento como a primeira linha do seu documento.
O tipo de documento correto para HTML é:
<!DOCTYPE html>
Usar nomes de elementos em minúsculas
O HTML permite misturar letras maiúsculas e minúsculas nos nomes dos elementos.
No entanto, recomendamos o uso de nomes de elementos em minúsculas, porque:
A mistura de nomes em maiúsculas e minúsculas parece ruim;
Os desenvolvedores normalmente usam nomes em minúsculas;
Minúsculo parece mais limpo;
Minúsculas é mais fácil 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 atributo em minúsculas
Boa:
<a href="https://site.com.br">Visit our HTML tutorial</a>
Ruim:
<a HREF="https://site.com.br">Visit our HTML tutorial</a>
Sempre citar valores de atributos – colocar aspas
Boa:
<table class="striped">
Ruim:
<table class=striped>
Sempre especifique alt, largura e altura para Imagens
Boa:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Ruim:
<img src="html5.gif">
Espaços e sinais de igualdade
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">
Evitar linhas de código longas
Não adicione linhas em branco, espaços ou recuos sem uma razão.
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.
Nunca ignore o elemento <title>
O <title>elemento é necessário em HTML.
O conteúdo do título da página é muito importante para a otimização de mecanismos de busca (SEO)! O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar páginas nos resultados da pesquisa.
<title>HTML Style Guide and Coding Conventions</title>
Meta Data
Para garantir a interpretação adequada e a indexação correta do mecanismo de pesquisa, o idioma e a codificação de caracteres devem ser definidos o mais cedo possível em um documento HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Configurando a janela de exibição
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Use esse acima, isso fornece ao navegador instruções sobre como controlar as dimensões e a escala da página.
Comentários em HTML
Comentários breves devem ser escritos em uma linha, assim:
<!– This is a comment –>
Usando folhas de estilo
Use uma sintaxe simples para vincular a folhas de estilo (o atributo type não é necessário):
<link rel="stylesheet" href="styles.css">
Regras CSS curtas podem ser escritas compactadas, assim:
p.intro {font-family:Verdana;font-size:16em;}
Regras CSS longas devem ser escritas em várias linhas:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Carregando JavaScript em HTML
Use uma sintaxe simples para carregar scripts externos (o atributo type não é necessário):
<script src="myscript.js">
Recomendas-se
Usar nomes de arquivo em minúsculas
Outros servidores da Web (Microsoft, IIS) não diferenciam maiúsculas de minúsculas: “london.jpg” pode ser acessado como “London.jpg”.
Extensões de arquivo
Os arquivos HTML devem ter uma extensão .html ou .htm .
Os arquivos CSS devem ter uma extensão .css .
Os arquivos JavaScript devem ter uma extensão .js .
Diferenças entre .htm e .html?
Não há diferença entre as extensões de arquivo .htm e .html!
Ambos serão tratados como HTML por qualquer navegador e servidor da web.
Confie nessas dicas…
<< Anterior Elementos semânticos em HTML
Deixe um comentário