5 erros comuns de HTML que você deve evitar

1. Cabeçalho e rodapé semânticos
Divs não têm estrutura semântica. Em vez de usar divs para criar cabeçalhos ou estruturas de rodapé, use os elementos “header” e “footer”.

Não faça isso

<div id = "header">
...
</div>
<div id = "footer">
...
</div>

Fazem isto

<header>
...
</header>
<footer>
...
</footer>

2. Use o elemento de figura
Se você precisar adicionar uma legenda à sua imagem, use o elemento “figure” combinado com o elemento “figcaption”.

Não faça isso

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Fazem isto

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. Não use tags em negrito ou itálico
As marcas “b” e “i” são marcas de apresentação e não têm significado semântico. Em vez disso, altere a espessura da fonte / estilo da fonte no CSS ou use o elemento “forte” ou “em”.

Não faça isso

<b>Bold</b>
<i>Italics</i>

Fazem isto

<strong>Bold</strong>
<em>Italics</em>

4. Usando links descritivos
O texto de um link deve ser explícito e transmitir para onde o usuário está redirecionando, tanto os usuários quanto os mecanismos de pesquisa podem entender mais facilmente o seu conteúdo e como ele se relaciona com outras páginas.

Não faça isso

<a href="url">
Check our pricing...
</a>

Fazem isto

Check our <a href="url"> pricing </a>

5. Usando estilos embutidos
Escrever estilos embutidos viola o princípio de ter a estrutura (HTML) separada da apresentação (CSS). Em vez disso, escreva os estilos em uma folha de estilo.

Não faça isso

<h1 style="font-size: 24">
 Header
</h1>

Fazem isto

h1 {
font-size: 24
}