A importância do HTML semântico

Por que devo USAR o HTML semântico?

Você poderia simplesmente dizer: “porque é a coisa certa para a web“, mas os benefícios vão muito além disso. Por exemplo, torna mais fácil para os leitores de tela interpretar as informações de um web site para os usuários com deficiência visual.

SEO e HTML semântico são amigos próximos. O objetivo do SEO é ajudar os motores de busca entender melhor sobre o que se trata o conteúdo de uma página e classificá-la melhor. Um robô de busca basicamente tem capacidades ainda menores do que um leitor de tela.

Não devemos, por exemplo, utilizar as tags p nunca deve ser utilizada para aplicar espaço a uma página web. Este elemento do HTML deve ser utilizado unicamente para indicar (marcar) parágrafos.

Estrutura das página

Uma página consiste em um título, um ou mais subtítulos e conteúdo. Este conteúdo pode conter parágrafos, listas, citações, imagens e tabelas. Todos estes tipos de informação têm sua própria marca, que são os elementos HTML.

Separar apresentação do conteúdo

As tags HTML nunca devem ser usadas para aplicar a apresentação, tais como: cor da fonte, tamanho da fonte, alinhamento e por aí vai… Isso tudo é trabalho das CSS (Cascading Style Sheets). A algum tempo escrevi sobre Elementos HTML em desuso onde cito vários elementos que foram descontinuados.

Títulos (cabeçalhos) h1 até h6

Um bom documento tem títulos e subtítulos. Estas posições variam em importância, iniciando por H1 (título mais relevante da página) até H6 (título menos importante da página). Não lembro de ter visto em um site escrito de forma semântica o uso dos elementos H5 e H6, no máximo o uso até o nível H4.

Seguindo uma semântica rigorosa, sugiro que você deva ter apenas um H1 por página. Vejo muitos sites utilizando o elemento H1 para marcar o nome do site. Provavelmente no seu site cada página terá um assunto especifico, neste caso escolha por marcar o título do assunto como sendo o título principal da página, ou seja, marcar com H1.

Para otimização de uma página é fundamental que a palavra-chave da página esteja dentro do elemento H1 e ainda em outras posições da página como links, parágrafos, etc.

Imagens

Imagens são usadas de todas as formas dentro de documentos, e você deve aplicar a semântica adequada para elas. O atributo alt deve ser usado se a imagem acrescenta significado ao documento. Este deve descrever o que a imagem está mostrando.

Se você estiver usando imagens para substituir o texto, certifique-se que você esteja usando um texto também em seu HTML. Para isso use CSS. Você tem que fazer isso porque tanto as pessoas com deficiências visuais e motores de busca não podem ler o texto em suas imagens. Para aplicar este método deixo o mesmo texto que está escrito na imagem no meu HTML. No CSS escondo o texto usando text-indent com um valor negativo (Exemplo -1000px). Tenha cuidado, usando esta técnica você corre o risco de ser punido pelos buscadores.

Abreviaturas e siglas

Sempre que usar uma sigla em seus textos ou artigos utilize o abbr para descrever o significado de tal sigla. Isso é bom para a densidade de palavras-chave também!

Tabelas

Tabelas não devem ser usadas para estruturação de layouts, apenas para dados tabulares. Caso você monte seu site utilizando tabelas, o usuário que acessar seu site com um leitor de telas terá uma enorme dificuldade em entender o conteúdo fornecido por você. Abaixo algumas dicas para utilização de tabelas.

Devo utilizar Frames?

Muito simples: NÃO USE. Motores de Busca e principalmente leitores de telas tem certa dificuldade em trabalhar com página desse tipo.

Conclusão

Usando html semântico para marcar suas páginas, você pode criar páginas que são mais acessíveis, tanto para as pessoas com deficiência, bem como aos motores de busca. Marcação semântica ajuda os motores de busca determinar qual é a relevância do conteúdo de uma página.

Quer ter um site acessível aos motores de busca e acima de tudo aos leitores de tela? Use o HTML semântico sempre.

Referência
Semantic HTML and Search Engine Optimization e semantic-html.