Sobre o HTML

Usar sempre HTML válido

São códigos descritos dentro de padrões do W3C que obedecem gramática, voacabulário e sintaxe.

Benefícios de um HTML válido

  • Melhor comunicação e menos chance de má interpretação
  • É mais provável que seja exibido de maneira correta e previsível, independentemente do navegador ou do tipo de dispositivo
  • É mais provável que seja funcional para usuários com problemas de acessibilidade
  • Reduz possíveis interpretações erradas por mecanismos de pesquisa (de dados estruturados, metadados, idioma, codificação, etc.)
  • É mais provável que seja renderizado mais rapidamente em alguns cenários (o usuário pode ver a página mais rapidamente)

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.

HTML válido ...

  • É mais provável que seja exibido corretamente e previsivelmente, independentemente do tipo de navegador ou dispositivo.
  • É mais provável que seja funcional para usuários com problemas de acessibilidade.
  • Reduz a possível má interpretação pelos mecanismos de pesquisa (de dados estruturados, metadados, idioma, codificação etc.)
  • É mais provável que seja renderizado mais rapidamente em alguns cenários (o usuário pode ver a página mais rapidamente).

Riscos de usar HTML inválido

Risco de não ser exibido corretamente em determinados navegadores ou dispositivos:

  • O usuário não pode comprar coisas
  • Má representação da empresa

Risco de má interpretação do mecanismo de pesquisa:

  • Perda no ranking
  • Oportunidade perdida para classificar melhor

Risco de o site não estar acessível a usuários com deficiência:

  • O usuário não pode comprar coisas
  • Ações judiciais

Validando HTML

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).

Como validar seu HTML

A ferramenta de validação do W3C é a ferramenta oficial para validar o HTML.

Use HTML semântico

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.

Organize o código HTML de forma lógica e semântica

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>

NÃO utilizar tabelas para diagramação

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>

Identificar o idioma principal da página

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.

Informar mudança de idioma no conteúdo

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>

Fornecer alternativa em texto para as imagens do sítio

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>

Associar etiquetas aos campos do formulário

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" />


EXPERIêNCIA DO USUáRIO - PRODAP
Rua São José, nº 290 - Cep: 68900-110, Macapá - AP - - experiencia@prodap.ap.gov.br
Site desenvolvido e hospedado pelo PRODAP - Centro de Gestão da Tecnologia da Informação
2017 - 2021 Licença Creative Commons 3.0 International
Amapá