Os Erros Mais Comuns ao Codificar HTML

Compartilhamentos

Ao longo da minha trajetória pude aprender bastante não só com os acertos, mais também com os erros que cometi nesse aprendizado.

E hoje a minha missão é justamente lapidar o caminho para que você possa alcançar seu objetivo sem cometer os mesmos erros que cometi no passado. Por isso, resolvi criar esse artigo listando alguns erros básicos que quase todo iniciante comete ao codificar HTML.

Erros comuns em HTML

 

Vou listar aqui 5 erros que são bem frequentes quando estamos codificando HTML. Peço que tome nota dos mesmos.

Erro # 01 – Ordem incorreta dos elementos

 

Se você já tem uma noção mínima do uso do HTML, provavelmente saberá que a ordem das tags é importante para uma boa semântica do seu código. Mas como assim ordem das Tags?

Simples, vou dar um exemplo abaixo:

Forma Correta:

<p><a href="" title="">Testando semântica</a></p>

Forma Incorreta:

<p><a href="" title="">Ordem errada</p></a>

Como você pode observar, listei dois exemplos onde mostro bem detalhadamente a ordem correta e incorreta respectivamente no uso das tags do HTML.

RECEBA NOSSO CURSO GRATUITO

Insira seu e-mail abaixo para garantir acesso grátis ao nosso curso de HTML em 30 dias!

No primeiro exemplo a primeira tag a ser declarada é o <p>, e por esse motivo deve ser a última a ser fechada, englobando assim tudo que estiver dentro da mesma.

Já no segundo exemplo, a primeira a ser declarada não é a última a ser fechada, e isso está totalmente errado. Muitas pessoas cometem esse erro e acabam por deixar seu código embaraçado e de difícil interpretação para os navegadores.

PS: Muitos navegadores interpretam o código da forma correta, mesmo estando errado como no exemplo acima.

Erro # 02 – Não comentar o fechamento das divs

 

Outro erro que considero bem importante é não comentar o fechamento das divs do seu código HTML. Isso se torna até uma boa prática de programação, pois os comentários são bem importante em qualquer linguagem de programação.

Basicamente eles servem para dar um norte do que está sendo feito em determinado bloco de código, por isso a importância dessa prática.

Veja um exemplo de comentário nas divs:

<div id="header">

   <div class="content">
   </div><!--fim content-->

</div><!--fim header-->

Como você pode observar, não há como se perder nesse código. Para cada Div que eu fecho eu deixo um comentário para identificar de onde ela faz parte.

Alguns editores de código HTML facilitam esse processo de encontrar a Div de abertura e a de Fechamento. Um exemplo é o Sublime Text.

PS: Para comentar no HTML você deve utilizar a seguinte sintaxe: <!– COMENTÁRIO –> 

Erro # 03 – Não identar o código

 

Outro erro que considero uma boa prática de programação (se colocado em prática) é não identar seu código HTML. Quando falo em identar, estou querendo frisar a questão da organização do seu código-fonte.

Vamos a um exemplo para ficar mais claro:

<div id="header">

   <div class="menu">

         <a href="" title="">link 01 </a>
         <a href="" title="">link 01 </a>

   </div><!--fim menu-->

</div><!--fim Header-->

Como você pode observar no exemplo acima, todo o código está bem definido, ou seja, bem organizado e identado da forma correta.

Essa questão de organização é importante não só para você que é o dono do projeto, mas também para que outros programadores sintam-se a vontade para analisar seu código e poderem elogiar a organização do mesmo e a boa prática de programação utilizada.

Erro # 04 – Esquecer Tag de fechamento

 

Outro erro bem iniciante mesmo é esquecer a tag de fechamento de algum elemento HTML. É um erro que muitas vezes passa despercebido, justamente pelos browsers não demonstrarem qualquer tipo de erro ao renderizar os sites.

Para evitar esse erro é importante assim que você abrir uma tag especifica, fechar imediatamente a mesma, afim de não esquecer lá no final da codificação.

Veja um exemplo desse erro:

<div id="footer">

   <a href="" title=""> Testando

   <a href="" title="">testando 02</a> 


</div><!--fim footer-->

No exemplo acima esqueci de propósito o fechamento da tag <a>.

Erro # 05 – Linkar imagens e links de forma incorreta

 

Outro erro que muitas pessoas cometem é justamente ao utilizar a tag <img> ou <a href=””>, não informarem o caminho correto da imagem e do link respectivamente.

Ao utilizar essas tags tome muito cuidado para informar o caminho correto. Nesse casso nem o browser poderá te ajudar, pois se o caminho estiver incorreto o mesmo irá esboçar que algo está errado com a imagem ou com o link.

Conclusão

 

Bom, esse artigo vai chegando ao fim. Espero que tenha compreendido o objetivo do mesmo, que é justamente lhe transformar num programador melhor e que esses erros possam ficar no passado e que daqui pra frente o seu aprendizado se resuma a acertos e boas práticas de programação.

Para fins de aprendizado, resolvi gravar um pequeno vídeo, onde eu mostro na prática justamente esses cinco erros vistos até aqui.

 

Se você gostou desse vídeo, se inscreva no canal, dê uma joinha e acompanhe nossas novidades, tanto aqui no blog quanto lá no nosso canal.

Qualquer dúvida deixe seu comentário, forte abraço e sucesso!

Sobre o Autor Wilker Costa

Estudante de computação e apaixonado por empreendedorismo. Desde cedo buscando sempre inovar e trazer as melhores soluções para seus clientes. Escreve regularmente sobre marketing digital e acredita que esse é o caminho para a liberdade financeira e para a construção de uma sociedade mais empreendedora!

Siga-me::
>

Que Tal Aprender a  criar um blog igual a esse?