Confira aqui dicas importantes de tudoque viu at\u00e9 agora. Um c\u00f3digo HTML consistente, limpo e organizado torna mais f\u00e1cil para outras pessoas ler e entender seu c\u00f3digo.<\/p>\n
Seja inteligente e \u00e0 prova do futuro<\/strong> Seja inteligente e \u00e0 prova do futuro<\/strong> Usar tipo de documento correto<\/strong> O tipo de documento correto para HTML \u00e9:<\/p>\n <\/p>\n Usar nomes de elementos em min\u00fasculas<\/strong><\/p>\n O HTML permite misturar letras mai\u00fasculas e min\u00fasculas nos nomes dos elementos.<\/p>\n No entanto, recomendamos o uso de nomes de elementos em min\u00fasculas, porque:<\/p>\n A mistura de nomes em mai\u00fasculas e min\u00fasculas parece ruim; Boa:<\/strong> <\/p>\n Fechar todos os elementos HTML<\/strong><\/p>\n Em HTML, voc\u00ea n\u00e3o precisa fechar todos os elementos (por exemplo, o <p>elemento).<\/p>\n No entanto, recomendamos fechar todos os elementos HTML, assim:<\/p>\n Boa:<\/strong> Ruim:<\/strong> <\/p>\n Usar nomes de atributo em min\u00fasculas<\/strong><\/p>\n Boa:<\/strong> Ruim:<\/strong> <\/p>\n Sempre citar valores de atributos – colocar aspas<\/strong><\/p>\n Boa:<\/strong> Ruim:<\/strong> <\/p>\n Sempre especifique alt, largura e altura para Imagens<\/strong><\/p>\n Boa:<\/strong> Ruim:<\/strong> <\/p>\n Espa\u00e7os e sinais de igualdade<\/strong><\/p>\n HTML permite espa\u00e7os em torno de sinais de igual. Mas sem espa\u00e7o \u00e9 mais f\u00e1cil de ler e agrupa melhor as entidades.<\/p>\n Boa:<\/strong> Ruim:<\/strong> <\/p>\n Evitar linhas de c\u00f3digo longas<\/strong><\/p>\n N\u00e3o adicione linhas em branco, espa\u00e7os ou recuos sem uma raz\u00e3o.<\/p>\n Para facilitar a leitura, adicione linhas em branco para separar blocos de c\u00f3digo grandes ou l\u00f3gicos.<\/p>\n Para facilitar a leitura, adicione dois espa\u00e7os de recuo. N\u00e3o use a tecla tab.<\/p>\n <\/p>\n Nunca ignore o elemento <title><\/strong><\/p>\n O O conte\u00fado do t\u00edtulo da p\u00e1gina \u00e9 muito importante para a otimiza\u00e7\u00e3o de mecanismos de busca (SEO)! O t\u00edtulo da p\u00e1gina \u00e9 usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar p\u00e1ginas nos resultados da pesquisa.<\/p>\n <\/p>\n Meta Data<\/strong> Configurando a janela de exibi\u00e7\u00e3o<\/p>\n Use esse acima, isso fornece ao navegador instru\u00e7\u00f5es sobre como controlar as dimens\u00f5es e a escala da p\u00e1gina.<\/p>\n <\/p>\n Coment\u00e1rios em HTML<\/strong> <!– This is a comment –><\/span><\/p>\n <\/p>\n Usando folhas de estilo<\/strong> <\/p>\n Carregando JavaScript em HTML<\/strong> <\/p>\n Recomendas-se<\/strong><\/p>\n Usar nomes de arquivo em min\u00fasculas<\/span><\/p>\n Outros servidores da Web (Microsoft, IIS) n\u00e3o diferenciam mai\u00fasculas de min\u00fasculas: “london.jpg” pode ser acessado como “London.jpg”.<\/p>\n <\/p>\n Extens\u00f5es de arquivo<\/strong><\/p>\n Os arquivos HTML devem ter uma extens\u00e3o .html ou .htm .<\/p>\n Os arquivos CSS devem ter uma extens\u00e3o .css .<\/p>\n Os arquivos JavaScript devem ter uma extens\u00e3o .js .<\/p>\n <\/p>\n Diferen\u00e7as entre .htm e .html?<\/strong><\/p>\n N\u00e3o h\u00e1 diferen\u00e7a entre as extens\u00f5es de arquivo .htm e .html!<\/p>\n Ambos ser\u00e3o tratados como HTML por qualquer navegador e servidor da web.<\/p>\n <\/p>\n Confie nessas dicas…<\/p>\n <\/p>\n
\nAqui est\u00e3o algumas diretrizes e dicas para criar um bom c\u00f3digo fonte HTML.<\/p>\n
\nAqui est\u00e3o algumas diretrizes e dicas para criar um bom c\u00f3digo fonte HTML.<\/p>\n
\nSempre declare o tipo de documento como a primeira linha do seu documento.<\/p>\n<<\/span>!DOCTYPE\u00a0html<\/span>><\/span><\/code><\/p>\n
\nOs desenvolvedores normalmente usam nomes em min\u00fasculas;
\nMin\u00fasculo parece mais limpo;
\nMin\u00fasculas \u00e9 mais f\u00e1cil de escrever;<\/p>\n
\n<body><\/code>
\n<p>This is a paragraph<\/p>
\n<\/body><\/code>
\nRuim:
\n<BODY><\/code>
\n<P>This is a paragraph<\/P>
\n<\/BODY><\/code><\/p>\n
\n<section><\/code>
\n<p>This is a paragraph.<\/p><\/code>
\n<p>This is a paragraph.<\/p><\/code>
\n<\/section><\/code><\/p>\n
\n<section><\/code>
\n<p>This is a paragraph.<\/code>
\n<p>This is a paragraph.<\/code>
\n<\/section><\/code><\/p>\n
\n<a href=\"https:\/\/site.com.br\">Visit our HTML tutorial<\/a><\/code><\/p>\n
\n<a <\/code>HREF<\/code><\/strong>=\"https:\/\/site.com.br\">Visit our HTML tutorial<\/a><\/code><\/p>\n
\n<table class=\"striped\"><\/code><\/p>\n
\n<table class=striped><\/code><\/p>\n
\n<img src=\"html5.gif\" alt=\"HTML5\" style=\"width:128px;height:128px\"><\/code><\/p>\n
\n<img src=\"html5.gif\"><\/code><\/p>\n
\n<link rel=\"stylesheet\" href=\"styles.css\"><\/code><\/p>\n
\n<link rel = \"stylesheet\" href = \"styles.css\"><\/code><\/p>\n<title><\/code>elemento \u00e9 necess\u00e1rio em HTML.<\/p>\n<title>HTML Style Guide and Coding Conventions<\/title><\/code><\/p>\n
\nPara garantir a interpreta\u00e7\u00e3o adequada e a indexa\u00e7\u00e3o correta do mecanismo de pesquisa, o idioma e a codifica\u00e7\u00e3o de caracteres devem ser definidos o mais cedo poss\u00edvel em um documento HTML:<\/p>\n<!DOCTYPE html><\/code>
\n<html lang=\"en-us\"><\/code>
\n<head><\/code>
\n<meta charset=\"UTF-8\"><\/code>
\n<title>Page Title<\/title><\/code>
\n<\/head><\/code><\/p>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/p>\n
\nComent\u00e1rios breves devem ser escritos em uma linha, assim:<\/p>\n
\nUse uma sintaxe simples para vincular a folhas de estilo (o atributo type n\u00e3o \u00e9 necess\u00e1rio):<\/p>\n<link rel=\"stylesheet\" href=\"styles.css\"><\/code>
\nRegras CSS curtas podem ser escritas compactadas, assim:<\/p>\np.intro {font-family:Verdana;font-size:16em;}<\/code>
\nRegras CSS longas devem ser escritas em v\u00e1rias linhas:<\/p>\nbody {<\/code>
\nbackground-color: lightgrey;<\/code>
\nfont-family: \"Arial Black\", Helvetica, sans-serif;<\/code>
\nfont-size: 16em;<\/code>
\ncolor: black;<\/code>
\n}<\/code><\/p>\n
\nUse uma sintaxe simples para carregar scripts externos (o atributo type n\u00e3o \u00e9 necess\u00e1rio):<\/p>\n<script src=\"myscript.js\"><\/code><\/p>\n