10 erros que não se pode cometer no HTML

Destaque

Olá, neste artigo irei comentar sobre algumas dicas de html muito importantes para quem está começando nessa linguagem de marcação e para quem já tem algum tempo que desenvolve, mas não sabia dessas informações.

1º erro: colocar elementos de bloco dentro de elementos inline;

<a href="#"><p>Assim não pode :/</p></a>

Os elementos HTML podem ser exibidos de duas formas, em bloco ou inline. Cada tag por padrão é naturalmente um elemento em bloco ou inline. Elementos em bloco incluem divs, parágrafos, que compõem a estrutura do documento. Elementos inline, por outro lado deve estar dentro de elementos de bloco e para dar continuidade ao fluxo da página, os exemplos incluem âncoras (links) e tags spam. Com isto em mente, os elementos inline devem sempre ir dentro dos elementos de bloco e nunca o contrário.

<p><a href="#">Assim pode :)</a></p>

2º Erro: Não incluir o atributo ALT em imagens

<img src="/images/bandeira.jpg">

O atributo ALT é um elemento necessário em todas as imagens exibidas em uma página. Ele ajuda os usuários a determinar de que é a imagem, se eles tiverem usando um leitor de tela ou tenha uma conexão lenta. O atributo ALT deve descrever a imagem que está sendo mostrada, usar alt=”imagem” é uma prática ruim. Se a imagem é puramente para fins decorativos, basta adicionar o atributo alt vazio, como alt=””.

<img src="/images/bandeira.jpg" alt="Bandeira do Brasil">

3º Erro: Não usar listas quando necessário

<p>
- Item 1<br />
- Item 2<br />
- Item 3<br />
- Item 4<br />
- Item 5<br />
</p>

A tag UL (e OL) pode ser usada para várias coisas e são extremamente versáteis para a exibição de todos os tipos de itens da página. Não é novidade que a tag de lista não ordenada faz um ótimo trabalho para exibir uma lista de informações, então nem pense em usar um monte de quebras de linha para criar uma lista.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

4º Erro: Usar <b> e <i> para negrito e itálico

Não use essas tags para <b>Negrito</b> e <i>Itálico</i>.

As tags <b> e <i> são usadas para deixar o texto em negrito e itálico, respectivamente, mas semanticamente elas são classificadas como tags de apresentação, pois o efeito seria mais bem aplicado com os estilos font-weight e font-style do CSS. Se a passagem do texto sugere uma área de importância, deve ser destacados com as tags <strong> ou <em>, que basicamente faz a mesma coisa que o <b> e <i>, mas é uma recomendação da W3C para o HTML5.

Use essas tags para <strong>Negrito</strong> e <em>Itálico</em>.

5º Erro: Usando muitas quebras de linha

<br />
Aqui entra o parágrafo 1
<br />
<br />
Aqui entra o parágrafo 2
<br />
<br />
Aqui entra o parágrafo 3
<br />

A tag de quebra de linha <br /> só deve ser usada para inserir uma quebra de linha única no fluxo de texto de um parágrafo. Não deve ser usada para fazer lacunas entre os elementos, ao contrário, você deve dividir o texto em parágrafos separados, ou ajustar a margem pelo CSS.

<p style="margin-top: 10px">
Aqui entra o parágrafo 1
</p>
<p>
Aqui entra o parágrafo 2
</p>
<p style="margin-bottom: 10px">
Aqui entra o parágrafo 3
</p>

6º Erro: Usar errado as tags de tachado

<s>Tag obsoleta de texto excluido</s>

Antigamente se usava as tas <s> e <strike> para informar que um texto foi editado. No entanto elas estão agora classificadas como tags obsoletas, o que significa que ainda funcionam, mas estão em transição. O certo é usar um novo conjunto de tags <del> e <ins>. Estas novas marcas são utilizadas em conjunto para mostrar que este foi excluído e o texto que foi posteriormente inserido no documento.

<del>Texto excluído</del> <ins>Texto inserido no lugar</ins>

7º Erro: Usar estilo inline

<div style="font-size: 14px; margin: 5px; padding: 10px; color: #ff0000">Texto formatado com css inline</div>

Você já deve ter ouvido milhares de vezes, que um estilo inline é ruim. O certo de acordo com a semântica (e a facilidade) é ter a estrutura HTML em um documento e o estilo CSS em outro, por isto simplesmente não faz sentido ir colocando estilo diretamente no documento HTML. Lembre-se de manter os estilos em um arquivo de CSS que eles pertencem.

8º Erro: Adicionar ou remover bordas pelo HTML

<img src="/images/bandeira.jpg" alt="Bandeira do Brasil" border=0>

O atributo border é outro com efeito de apresentação e de modo semanticamente correto, deve ser deixado para o CSS, mesmo que seja para remover a borda de um elemento.

<img src="/images/bandeira.jpg" atl="Bandeira do Brasil" style="border: none">

9º Erro: Não usar tags de cabeçalho

<p style="border-bottom: solid 1px #000; font-size: 32px; font-weight: bold">Isso não é um título</p>

As tags de cabeçalho estão disponíveis de <h1> a <h6>, e são uteis para separar o seu documento em seções intituladas. Se você tem uma seleção de palavras que indicam o conteúdo que deve aparecer abaixo é provável que uma das tags de cabeçalho irá caber direitinho. A escolha da tag de cabeçalho vai depender do fluxo do documento, naturalmente, tente inseri-los na ordem de 1 a 6.

10º Erro: O uso de <blink> ou <marquee>

<marquee>Que lindo o texto está rolando - Que coisa mais ultrapassada.</marquee>

Além de não serem parte da coleção oficial de tags padrão do HTML aprovado pelo W3C, as tags <blink> e <marquee> são pura feiura. Se há algo que você precisa prestar atenção, tenho certeza que você pode utilizar outras alternativas para chamar a atenção para uma região ou texto sem ter que fazê-lo piscar ou ficar navegando pela página.

O html em sua nova versão veio cheio de melhorias, e melhorias bem legais por sinal. Em breve postarei algumas tags fantásticas do HTML5.

É isso ai gostou da dica, tem alguma dúvida ou quer sugerir algo? Deixe sua mensagem nos comentários que terei o enorme prazer em lhe responder.

Última modificação em Quarta, 28 Outubro 2015 18:02
(2 votos)
Lido 6885 vezes
Tags :

Deixe um comentário

Certifique-se de preencher os campos indicados com (*). Não é permitido código HTML.

Receba conteúdos exclusivos

Please wait