Marcação semântica é essencial

Semântica é o estudo do significado das palavras e suas relações umas com as outras. Então, quando falamos em um código XHTML semântico, referimo-nos ao uso correto das tags, ou seja, utilizá-las na função real para a qual elas foram criadas.

Nesse sentido, se você vai escrever uma lista, você deve utilizar as tags criadas para esse fim: <ol>, <ul> e <dl>. Se precisar de um cabeçalho, você deve usar as tags <h1> a <h6>.

Utilizar as tags no sentido correto justifica o termo Web Standards. Sendo assim, o desenvolvedor deve ter preocupação com a semântica da marcação.

Validação do XHTML

A função dos validadores XHTML é ajudar a verificar se seu código segue às regras da linguagem. Ele pode mostrar onde você esqueceu-se de fechar uma tag, onde esqueceu um atributo que não deveria ter esquecido ou o lugar onde colocou as aspas e não deveria ter feito.

Como apresentamos na primeira aula desta disciplina, o W3C disponibiliza em sua página um validador gratuito para documentos XHTML. Nele você pode digitar a url, o caminho para o arquivo no seu disco rígido ou mesmo o código digitado diretamente, e então esse documento ou código será analisado, disponibilizando-se um relatório completo e detalhado das não conformidades porventura existentes. Essa é uma ferramenta excelente para você usar durante a elaboração ou migração do seu documento de HTML para XHTML. Serve como um verdadeiro revisor do código que você cria. A figura a seguir mostra a interface do validador disponível no site do W3C.

Com a validação dos documentos (X)HTML, você garante que está construindo páginas de acordo com um padrão o qual (futuramente) garantirá compatibilidade com todos os browsers. Vamos ver se os documentos HTML que você desenvolveu até agora são validados por essa ferramenta?

Além de novas tags e APIs um dos principais avanços do HTML5 foi a adição de tags semânticas. As novas tags (<header>, <footer>, <article>, <aside>, <section>, <nav> e <figure>) não alteram o comportamento visual do site pois é somente uma alteração semântica, ou seja, de significado.

Nas versões anteriores do HTML não havia uma forma apropriada oferecida pela linguagem para definir as divisões e partes da estrutura de uma página web. Neste caso, era comum os desenvolvedores usarem as tags <div> e os atributos id e class com nomenclaturas para cada região. Vamos ver um exemplo!

Nas imagens acima podemos observar o uso das novas tags semâticas do HTML5. Não ficou mais intuitivo?