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.
O HTML semântico tenta transmitir significado através das palavras e as tags em uma página. tente pensar desta maneira: o conteúdo da página são as palavras que você fala. A marcação HTML fornece a estrutura, a entonação, as pausas e até mesmo a aparência do seu rosto. Basicamente, as marcações são a metade da sua mensagem.
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).
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.
– Usar o elemento do HTML th para marcar cabeçalhos da tabela;
– Se você puder, use as seções thead tbody e tfoot corretamente;
– Utilização do atributo scope no elemento th;
– Sempre dar um título para sua tabela usando o elemento adequado para isso, ou seja, caption;
– Uso do atributo summary para descrever o conteúdo da tabela.
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.
É, de fato a semântica é muito importante para a Web, e o HTML5 ajudou a facilitar isso com tags como header, footer, article, aside, etc.
Caso alguém se interesse, em meu blog faço um post falando sobre as tags semânticas, muitas que vieram com o HTML5. Aqui é o endereço: http://megawikitech.blogspot.com.br/2014/04/como-…