São códigos descritos dentro de padrões do W3C que obedecem gramática, voacabulário e sintaxe.
Seguir a gramática, o vocabulário e a sintaxe de qualquer idioma resulta em melhor comunicação e menos chance de erros de interpretação.
A maneira como o HTML é escrito determina o que nossos usuários veem e como os mecanismos de pesquisa interpretam nossas páginas.
Risco de não ser exibido corretamente em determinados navegadores ou dispositivos:
Risco de má interpretação do mecanismo de pesquisa:
Risco de o site não estar acessível a usuários com deficiência:
O processo de validação de HTML geralmente descobre muitos problemas ocultos, utilizar como referência para validar as diretrizes do Google pode ser recomendado.
HTML válido e as diretrizes do Google
As diretrizes do Google são práticas sugeridas que ajudam o Google a encontrar, indexar e classificar seu site.
As diretrizes do Google declaram "Usar HTML válido".
Dica: use a ferramenta com as diretrizes do Google para verificar se suas páginas da web seguem as diretrizes para webmasters do Google (incluindo HTML válido).
A ferramenta de validação do W3C é a ferramenta oficial para validar o HTML.
Use os elementos HTML pelo o que eles são e não pela forma de que vão aparecer no navegador. Isso é conhecido como HTML Semântico.
HTML Semântico ou marcação semântica é HTML que introduz significado para a página da Web em vez de apenas apresentação. Por exemplo, uma tag
indica que o texto em anexo é um parágrafo. Isso é semântico e de apresentação, porque as pessoas sabem quais são os parágrafos e os navegadores sabem como exibi-los.
Os elementos devem ser apresentados usando uma ordem compreensível e correspondendo ao conteúdo desejado, ou seja, cada elemento HTML deve ser utilizado para o fim que ele foi criado.
A Especificação HTML5 do W3C trás a semantica dos elementos da linguagem HTML5, a semântica utilizada é a que está definida nessa especificação. É interessante que o desenvolvedor tenha familiaridade com essa especificação a fim de compreender a semântica dos elementos HTML e, assim, facilitar a sua utilização.
Como exemplo pode-se citar:
Usar cabeçalhos de acordo com sua hierarquia
Os níveis de cabeçalho (elementos HTML H1 a H6) devem ser utilizados de forma hierárquica, pois organizam a ordem de importância e subordinação dos conteúdos, facilitando a leitura e compreensão.
Conceitualmente, existem seis níveis de títulos, sendo o H1 o mais alto, ou seja, deverá corresponder ao conteúdo principal da página, assim é recomendável que toda página tenha apenas um H1. Já os níveis do H2 ao H6 poderão ser utilizados mais de uma vez na página, mas sem excesso e com lógica textual, obedecendo uma hierarquia.
<h1>1º nível</h1>
<h2>2º nível</h2>
<h3>3º nível</h3>
<h4>4º nível</h4>
<h5>5º nível</h5>
<h6>6º nível</h6>Usar listas de acordo com sua finalidade
O elemento HTML ul (ou elemento HTML de Lista desordenada) representa uma lista de itens sem ordem rígida, isto é, uma coleção de itens que não trazem uma ordenação numérica e as suas posições, nessa lista, são irrelevantes.
O Elemento HTML ol (ou Elemento HTML de lista ordenada) representa uma lista de itens ordenados. De forma característica esses itens ordenados em uma lista são mostrados com uma contagem que os precede, que pode ser de qualquer tipo, como numerais, letras, algarismos romanos, ou simples símbolos.
<!-- Lista desordenanda -->
<ul>
<li>primeiro item</li>
<li>segundo item</li>
<li>terceiro item</li>
</ul>
<!-- Lista ordenanda -->
<ol>
<li>primeiro item</li>
<li>segundo item</li>
<li>terceiro item</li>
</ol>As tabelas devem ser utilizadas apenas para dados tabulares e não para efeitos de disposição dos elementos na página. Para este fim, utilize as folhas de estilo.
<html>
<head> </head>
<body>
<div id="topo" role="”banner”">
<div>
<!--barra de acessibilidade-->
</div>
<h1>Exemplo sem tabelas!</h1>
</div>
<div id="menu" role="”navigation”">
<ul>
<li><a href="menu1.html">Menu 1</a></li>
<li><a href="menu2.html">Menu 2</a></li>
<li><a href="menu3.html">Menu 3</a></li>
<li><a href="menu4.html">Menu 4</a></li>
</ul>
</div>
<div id="conteudo" role="main">
<!--conteúdo principal da página-->
<div id="lateral">
<!--conteúdo da lateral da página-->
</div>
<div id="rodape" role="contentinfo">
<!--direitos autorais-->
<address>
<!--e-mail de contato-->
</address>
</div>
</div>
</body>
</html>Deve-se identificar o principal idioma utilizado nos documentos. A identificação é feita por meio do atributo lang do HTML. Ele deve ser declarado em todas as páginas, pois além de auxiliar na acessibilidade do conteúdo, também permite melhor indexação pelos motores de busca.
Se algum elemento de uma página possuir conteúdo em um idioma diferente do principal, este deverá estar identificado pelo atributo lang. Essa recomendação não se aplica para nomes próprios ou termos técnicos que sejam compreendidos no contexto.
<p lang="de">
Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel
merkte, daß kein guter Wind wehte, lief fort und machte sich auf den Weg nach
Bremen: dort, meinte er, könnte er ja Stadtmusikant werden.
</p>Deve ser fornecida uma descrição para as imagens da página, utilizando-se, para tanto o atributo alt.
<img
src="foto-porto-alegre.jpg"
alt="Foto de uma bicicleta de carga verde com caixas laranjas encostada numa parede"
/>
<a href="http://www.dominiopublico.gov.br/">
<img
src="guia.png"
alt="Guia de Serviços – Consulte serviços públicos de forma fácil"
/>
</a>Labels de formulários DEVEM ser usados. Os leitores de tela usam os labels para informar ao usuário sobre o campo do formulário.
<label for="nome">Nome: </label>
<input type="text" name="nome" id="nome" />
<label for="msg">Mensagem: </label>
<textarea name="msg" id="msg">Digite sua mensagem</textarea>
<label for="receber">Deseja receber nossa newsletter?</label>
<input type="checkbox" id="receber" name="receber" />