Ramon Victor

Importância da semântica no HTML

| 9 Comments

Recebi o layout do Designer, como eu faço para definir o que cada elemento da interface vai ser no meu HTML? Essa é uma dúvida que prevalece entre a maioria das pessoas que começam a estudar XHTML e não foi diferente comigo. A resposta para a pergunta pode ser: “Coloca tudo numa tabela, pois fica bem mais prático de fazer” ou “Pesquisa sobre semântica para entender como usar as tags apropriadas, desta forma teu site será acessível a diversas plataformas e melhor indexado”. Ouvir a segunda resposta é meio difícil não é? Porém seria a resposta apropriada.

De início devemos entender o significado de semântica, “A semântica (do grego σημαντικός , derivado de sema, sinal) refere-se ao estudo do significado”. Semântica no HTML, nada mais é do que usar as tags para os devidos propósitos que foram criadas. Ou seja, usar <h1> – <h6> para representar títulos, <address> para endereços, <ol> <ul> <dl> para listas, <table> para dados tabulares e assim por diante.

Desenvolver um documento semanticamente correto é tornar o conteúdo acessível a humanos e máquinas. O que eu quis dizer com isso? É que não vai ser entendido apenas por pessoas, o conteúdo vai rodar em diversas plataformas,  além de ser melhor indexado pelos motores de busca.

Como as 77 tags do XHTML não foram suficientes para representar alguns tipos de dados específicos como datas, localizações, descrições de links e etc, surgiram os microformatos (microformats), que através de atributos e classes predeterminados conseguem organizar pequenos formatos de dados. O objetivo do mesmo é justamente suprir as limitações das tags, acrescentando novas possibilidades de organizar essa imensa quantidade de informações que são disponibilizadas na web.

Ah! Entendi por que existem os microformatos, mais e esse tal de HTML5 porque surgiu? O HTML5 chegou com uma proposta de melhorar a implementação da semântica do seu antecessor HTML 4.01. Na nova versão o que precisávamos representar com ids e classes para definir seções do site (Ex.: #header, #sidebar, .post, #footer), ganharam um valor semântico muito maior, sendo representados agora por tags como: <header>, <article>, <section>, <aside> e <footer>.

Essa nova especificação do HTML vai proporcionar uma grande melhoria na organização do conteúdo na web. Motores de busca e leitores de tela, por exemplo, poderão detectar de maneira mais fácil o conteúdo de cada seção do site.

Browsers como Firefox , Opera, Safari e Chrome já estão dando suporte ao HMTL5, porém nenhuma versão do browser lider de mercado(Infelizmente) Intenet Explorer esta suportando a nova especificação. Alguns desenvolvedores estão resolvendo o problema do IE usando javascript . Outra solução, lançada a pouco, é o google chrome frame que quando instalado no IE ler mais rapidamente javascripts e consegue interpretar HTML5 e CSS3.

Em suma, o site pode ficar visualmente idêntico feito semanticamente correto ou não.  Porém implementar pensando em acessibilidade, SEO e aspectos que vão além do visual tem se tornado um diferencial no perfil dos profissionais procurados pelas grandes empresas de desenvolvimento web.

9 Comments

  1. RT @ramonvictor: No blog: Importância da semântica no HTML |

  2. RT @ramonvictor: No blog: Importância da semântica no HTML |

  3. Realmente a segunda opção é quase nunca dita para os iniciantes da área, mesmo agora, no fim de 2009. Estamos desde 2004/2005 lutando para os padrões web serem representativos no desenvolvimento web e nas agências web no Recife e acho que o trabalho está sendo bem desenvolvido. Boa parte do mercado já adotou, bons profissionais vêm surgindo, como é teu caso e estamos apenas no inicio desde processo.

    É isso: utilize sempre este espaço para difundir seus conhecimentos, será muito últi para quem está começando agora e não tem muito guides para seguir.

    Parabéns pela iniciativa e continue sempre evoluindo e estudando.

    Grande abraço.

  4. Importância da semântica no HTML – (blog do @ramonvictor)

  5. RT @gersonthiago: Importância da semântica no HTML –

  6. Dois artigos interessantes: (semântica html) e (designers devem entender de acessibilidade web)

  7. Dois artigos interessantes: (semântica html) e (designers devem entender de acessibilidade web)

  8. RT @pauloandraus artigos interessantes semântica html designers devem entender acessibilidade web

  9. RT @webeocanal: RT @pauloandraus artigos interessantes semântica html designers devem entender acessibilidade web

Deixe uma resposta