Em tutoriais anteriores da Rede de Ensino de Páginas da Web, foi enfatizado muitas vezes a necessidade de tornar os arquivos HTML das páginas da Web semânticos. Devemos escolher as tags HTML ou XHTML mais apropriadas com base na estrutura do documento HTML da página web, em vez de selecioná-las com base em sua aparência. Use a tag P para definir um parágrafo em vez de usá-la para obter um efeito de quebra de linha. Usamos tags h1-h6 para marcar títulos, em vez de usá-las para obter tamanho de texto e efeitos de negrito.
Por exemplo, para um título, podemos usar h1 para defini-lo:
<h1>Escreva aqui o texto do título do artigo</h1>
Em vez de defini-lo de qualquer outra forma:
<p style="font-size:16px; font-weight:bold;">Escreva aqui o texto do título do artigo</p>
Em artigos anteriores da Web Teaching Network, listamos todas as tags permitidas pelo XHTML1.0. Também podemos descobrir que na verdade existem muito poucas tags de elemento que podemos escolher. Mas também percebemos claramente que essas marcas de elementos refinados também têm significados mais claros. Se você realmente não consegue encontrar o elemento certo para marcar, você pode usar as tags genéricas div e span.
O uso de tags div e span em páginas é um problema novo e tendemos a usá-las demais. O uso necessário e razoável de divs pode melhorar significativamente a estrutura do documento. Se você olhar seu documento HTML e descobrir que há muitos divs e spans, terá que analisar o problema de uma perspectiva diferente. Existe abuso? Existem marcadores melhores para substituí-los? Se h1 puder representar melhor o conteúdo marcado, então você terá que desistir de p ou span para defini-lo.
Talvez se trate de um par de contradições e seja difícil para nós compreender como usá-las corretamente, ou talvez não consigamos obter uma resposta clara. Mas uma coisa precisa ser esclarecida, devemos fazer com que o documento tenha uma estrutura lógica clara e facilitar a aplicação de estilos. Podemos pensar em div apenas como um contêiner ou uma “parte” do documento. Usamos muitos contêineres, o que não é um padrão inteligente. E um contêiner correto e em uma posição razoável pode fazer com que todo o documento pareça organizado.
O código a seguir é mais razoável e eficaz:
| A seguir está o conteúdo citado: <div id="cabeçalho"> |