Semântica, meus amigos, é a base de qualquer html escrito. E não existe uma regra rígida, um certo ou errado; html é uma linguagem, e existem muitas formas de se falar a mesma coisa em uma linguagem.
Desde a forma mais formal e polida, até aquela mais esdrúxula. Mas, de qualquer forma, todo mundo vai entender o contexto global.
Acontece que, para não deixar dúvida sobre o que você está expressando, quanto mais formal se usa uma linguagem, menor a margem que se dá para mal-entendidos.
Passei algumas horas numa reunião na última sexta-f discutindo sobre a semântica que foi usada na escrita de um html para um projeto no qual vou me envolver. O html estava todo validado pelo W3C, sem tabelas, bonitinho. Bonitinho, sim, mas ordinário. Não havia semântica; olhava pro html e não sabia o que era tpitulo, o que era texto de conteúdo, se as imagens usadas eram de layout ou de conteúdo, etc…
Vou usar um exemplo de um grande portal da web para exemplificar. Veja o trecho do layout:
O código usado foi esse:
<div id="noticias"> <div id="imagem"> <p> <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra" width="163" height="200"></a> </p> <h5><a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a></h5> </div> <ul> <li class="red"><a href="#" rel="101" >Votação</a></li> <li class="prin1t"><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></li> <li class="prin1p">· <a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li> <li class="prin1p">· <a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li> <li class="prin1p">· <a href="" rel="104" ></a /><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</strong /></a> </a></li> <li class="prin1p">· <a href="" rel="105" ></a /><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</strong></a> </a></li> <div class="linha"></div> <li class="red"><a href="#" rel="1010" >Blog das Eleições</a></li> <li class="prin1b"><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></li> <div class="linha"></div> <li class="red"><a href="#" rel="1020" >Notícias</a></li> <li class="prin1b"><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></li> <li class="prin1p">· <a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li> <li class="prin1p">· <a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li> </ul> </div>
Vou, de cara, me abster a comentar sobre essas divs perdidas no meio da lista (ul) usada. Um erro grosseiro.
Mas, quando se olha para esse layout, o que se percebe? Há uma imagem de destaque na lateral esquerda, com uma legenda, e na lateral direita uma série de retrancas com títulos, uma com subtítulo e links para as matérias. Existem milt maneiras de se escrever o html para isso, mas, analisando o código escrito originalmente:
– não faz sentido usar um h5 para a legenda da imagem, ainda maais porque não foi usado nenhum outro título nas demais áreas;
– não tem o porque colocar um parágrafo (p) para a imagem;
– não foram usadas tags de títulos (h1 a h6) para os títulos e subtítulos das retrancas.
– uso de atributos deprecados para definir layout inline (width, height)
– bullet usado nas listas (uls) deveria estar no CSS e não no html
Como eu escreveria esse html:
<div id="noticias"> <div id="imagem"> <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra"></a> <a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a> </div> <div> <h5><a href="#" rel="101" >Votação</a></h5> <h6><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></H6> <ul> <li><a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li> <li><a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li> <li><a href="" rel="104" ><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</a></li> <li><a href="" rel="105" ><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</a></li> </ul> <h5><a href="#" rel="1010" >Blog das Eleições</a></h5> <h6><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></h6> <h5><a href="#" rel="1020" >Notícias</a></h5> <h6><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></h6> <ul> <li><a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li> <li><a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li> </ul> </div> </div>
É lógico que alguns pontos podem ser discutidos, alterados, etc… mas, vendo esse html aqui, quem vê o código entende qual parte do conteúdo tem a sua devida importância: o que é titulo, é título, o que é lista de menu é lista de menu, o que é link é link.
E qual a vantagem?
Leitores de busca e indexação funcionam seguindo a semântica do seu código. Se você tem um título e um texto simples envoltos ambos com uma div, o buscador vai entender que ambos tem a mesma importância; quando você uma um h1 (ou até h7) num título e coloca o texto num parágrafo (p), o buscador entenderá que o título é mais relevante. E isso ajudará e muito na indexação, pode apostar.
Isso, sem contar que escrever o código dessa maneira acelera o processo de manutenção do html – principalmente quando ele é trabalhado por equipes – e diminui o peso do html final (com isso, gera menos consumo no tráfego de dados do seu servidor).
Ou seja, todo mundo ganha!