Estrutura XHTML II: Caso de Estudo: Marcação Estruturada do W3school

De qualquer forma, não pule este capítulo. A leitura deste capítulo melhorará suas habilidades, ajudará a emagrecer suas páginas da web e fornecerá uma compreensão mais clara das diferenças entre marcação e design. As ideias apresentadas neste capítulo são fáceis de aprender, mas podem melhorar significativamente o desempenho do site, bem como a facilidade de design, produção e atualização do site.

Neste capítulo, você aprenderá como escrever marcas lógicas e compactas, permitindo que você reduza o tráfego de largura de banda em cerca de 50%, ao mesmo tempo em que reduz a carga e a pressão do servidor e o tempo de carregamento do site. Removendo esses elementos de desempenho e corrigindo maus hábitos que não oferecem benefícios, podemos alcançar esses objetivos.

Essas má hábitos afetam muitos sites na web, especialmente aqueles que combinam código CSS com layouts baseados em tabelas. Essa prática é engessada e ineficiente, mesmo para designers experientes em outras áreas. Além disso, a probabilidade de ocorrer esse problema é igual, seja para sites que escrevem código à mão, ou para aqueles que usam ferramentas de edição visuais, como Dreamweaver e GoLive, para criar sites.

Esta seção apresentará esses erros comuns para que você os reconheça e se proteja contra eles, aprendendo como corrigi-los. Exploramos detalhadamente o atributo de identificador único (id) e mostramos como ele permite que você escreva código XHTML extremamente compacto, seja para layouts mistos ou puramente CSS.

Cada elemento precisa ser estruturado?

Como mencionamos na seção anterior, cada elemento pode ser estruturado, e o CSS pode transformar uma lista ordenada ou não ordenada em uma barra de navegação completa, com efeito de botão invertido. O conteúdo do documento pode ser marcado com elementos comuns, que indicam seus papéis semânticos no design do site através de atributos estruturados específicos.

Criamos a primeira versão beta em chinês do CodeW3C.com em 2006, e já usamos CSS para layout no início, utilizando XHTML para estruturar o documento. Cada elemento dentro é estruturado, desde títulos até listas e parágrafos. Você pode ver no site do CodeW3C cada página com botões de首页 invertidos e botões de menu de segundo nível. Aqui está o código XHTML desses dois componentes:

<div id="header"><h1><a href="/">codew3c online tutorial</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Tutorial de html">Tutorial de html</a></li>
<li id="x"><a href="/x.asp" title="Tutorial de XML">Tutorial de XML</a></li>
<li id="b"><a href="/b.asp" title="Script do navegador">Script do navegador</a></li>
<li id="s"><a href="/s.asp" title="Script de Servidor">Script de Servidor</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial de Multimídia">Tutorial de Multimídia</a></li>
<li id="w"><a href="/w.asp" title="Manual de Construção de Sites">Manual de Construção de Sites</a></li>
</ul>
</div>

div, id e outros auxiliares

Se usado corretamente, o div pode ser um grande auxílio para a marcação estruturada, enquanto o id é uma ferramenta surpreendente que lhe permite escrever XHTML extremamente compacto, aproveitando-se da CSS de maneira sutil e adicionando comportamentos complexos e elegantes ao site através do modelo de objeto de documento (DOM) padrão.

A W3C define o elemento div assim no modelo de estrutura do XHTML2 da sua mais recente rascunho XHTML:

O elemento div, ao ser combinado com os atributos id, class e role, oferece um mecanismo comum para adicionar estrutura adicional ao documento. Este elemento não define o estilo de exibição do conteúdo. Portanto, os criadores podem usar este elemento em conjunto com folhas de estilo, xml:lang e atributos para que o XHTML se adapte às suas próprias necessidades e gostos.

div é a abreviação de division. Division significa divisão, área, grupo. Por exemplo, quando você combina uma série de links, forma-se uma division do documento.

Mecanismo genérico de determinação da estrutura

Todos os que escrevem HTML estão familiarizados com elementos comuns como parágrafos e títulos, mas alguns podem não estar tão familiarizados com div. Na descrição do W3C, podemos encontrar a chave para entender o elemento div, "um mecanismo genérico de adição de estrutura."

Na página inicial deste site, encapsulamos a lista de catálogo de tutoriais em um div, pois o catálogo de tutoriais não faz parte de nenhum elemento do texto. Nele, o elemento h2 marca o título de cada tutorial, enquanto o elemento de lista ul marca a lista detalhada de cada tutorial. Mas em um sentido maior e mais específico, este catálogo de tutoriais desempenha um papel estruturado, ou seja, um componente de navegação secundária. Para enfatizar esse papel, usamos o id navsecond para marcar esse div.

<div id="navsecond">
<h2>Tutorial HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Tutorial HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Tutorial XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Tutorial CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Tutorial TCP/IP">TCP/IP</a></li>
</ul>
<h2>Tutorial XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Tutorial XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Linguagem XSL">XSL</a></li>
... ...
... ...
</div>

Você pode usar qualquer nome. "Gladys" e "orangebox" são completamente compatíveis com as regras de nomeação do XHTML. Mas o nomeação semântica (semântica) ou meta-estruturada (meta-estruturada) é a melhor (ou seja, aquele que pode explicar a função dos elementos dentro dela).

Quando o cliente decide usar azul, você acha que dar um nome como orangebox (caixa laranja) para uma parte do site é muito estúpido. Nessa situação, você se sente ainda mais estúpido, quando há apenas seis meses para a entrega final, você começa a ajustar as folhas de estilo, mas não consegue lembrar se "Gladys" (nome feminino) representa a área de navegação, a barra lateral ou a caixa de busca.

Portanto, marcar id como "menu", "content" ou "searchform" ajudará a lembrar. Além disso, a marcação não é sinônimo de design; uma página bem estruturada pode ser formatada da forma que você desejar. O resultado é que, seja usando um layout puramente CSS ou um layout misto, você mudará completamente o hábito de pensar e criar usando marcações de apresentação.

id X class

a propriedade id não é novidade para o XHTML; a propriedade class ou o elemento div também. Ambos podem ser rastreados até a era do HTML. A propriedade id atribui um nome único a um elemento. Cada nome pode ser usado apenas na página atribuída. (Por exemplo, se sua página contiver um div com id "content", nenhum outro div ou outro elemento pode usar esse nome. Em contrapartida, a propriedade class pode ser usada várias vezes na página (por exemplo, cinco parágrafos na página podem usar o nome "small" ou "footnote"). A seguir, uma marcação ajudará a ilustrar a diferença entre id e class:

<div id="searchform">Os componentes do formulário de busca vão aqui. Isso
seção da página é única.</div>
<div class="blogentry">
   <h2>Postagem do blog de hoje</h2>
   <p>Conteúdo do blog vai aqui.</p>
   <p>Aqui está outro parágrafo de conteúdo do blog.</p>
   <p>Assim como podem haver muitos parágrafos em uma página, também
   pode haver muitos itens em um blog. Uma página de blog pode usar
   múltiplos exemplos da classe "blogentry" (ou qualquer outra
   class).</p>
</div>
<div class="blogentry">
   <h2>Post do blog de ontem</h2>
   <p>De fato, aqui estamos dentro de outro div de classe
   "blogentry."</p>
   <p>Elas se reproduzem como coelhos.</p>
   <p>Se há dez posts de blog nesta página, pode haver
   haverão dez divs de classe "blogentry" também.</p>
</div>

Neste exemplo, o div chamado 'searchform' é usado para encapsular a área da página que contém o formulário de busca, enquanto o div class="blogentry" é usado para encapsular cada entrada de artigo no blog. Existem apenas um formulário de busca na página, então escolhemos usar o id para marcar este componente único. No entanto, o blog possui muitos (artigos) entradas, então a propriedade class é aplicada neste caso. Da mesma forma, sites de notícias geralmente têm muitos divs, e esses divs podem ser nomeados 'newsitem' ou outro nome.

No entanto, não todos os sites precisam de div. Sites de blog podem usar apenas títulos h1, H2 e h2 e parágrafos <p>. Sites de notícias também são assim. Aqui, mostramos o div com classe 'blogentry', não para encorajar você a encher seu site de divs, mas apenas para mostrar este princípio: usar várias classes em um mesmo documento HTML, mas usar apenas uma vez o id.

Teoria das fitas adesivas

Pensar na propriedade id como fitas adesivas pode ser útil. Eu coloco uma fita adesiva no refrigerador para lembrar de comprar leite, e também uma na telefone para lembrar de ligar para um cliente em atraso no pagamento. Além disso, há uma fita na pasta da conta, para lembrar que preciso pagar as contas antes do dia 15 deste mês.

O id também marcará áreas especiais do documento, para lembrar você de qual área precisa de tratamento especial. Neste ponto, a propriedade id é semelhante a fitas adesivas. Para implementar o chamado tratamento especial, você precisa usar este id especial para escrever várias regras na tabela de estilos ou adicionar algumas linhas de código no arquivo JavaScript. Por exemplo, há algumas regras específicas no seu arquivo CSS que só se aplicam aos elementos dentro do div com id 'searchform'.

Quando um atributo id é usado como uma coisa magnética (imã) em uma série de regras CSS específicas, ele é chamado de seletor CSS. Existem muitosCriar seletoresMétodo, mas o id é fácil de usar e tem muitos usos.

Força do id

A propriedade id é incrivelmente poderosa. Ela tem as seguintes capacidades:

  • Como um seletor de folha de estilo, nos permitindo criar XHTML compacto e minimizado.
  • Como um âncora de hipertexto, substituindo o atributo name obsoleto.
  • Como um método para localizar elementos específicos a partir de scripts baseados em DOM.
  • Como o nome de um elemento de objeto.
  • Como uma ferramenta de processamento geral (ferramenta de processamento geral) (no exemplo do W3C, 'quando os dados são extraídos de uma página HTML para um banco de dados, ou quando um documento HTML é convertido para outro formato, etc., como uma ferramenta de identificação de domínio'.)

Regras de id

Os valores de id devem começar com uma letra ou sublinhado; não podem começar com um número. Embora a validação do W3C não capture esse erro, o analisador XML o fará. Além disso, se você usar id em conjunto com JavaScript em formulários, o nome e o valor do id devem ser variáveis JavaScript válidas. Espaços e hífen, especialmente o hífen, não são permitidos. Além disso, usar sublinhado no nome de class ou id não é uma boa ideia, devido às restrições no CSS2.0 (e em alguns navegadores).

Marcadores semânticos e acessibilidade

Agora, já discutimos sobre os elementos XHTML amplamente utilizados (especialmente div e id), vamos ver alguns exemplos sobre a página inicial deste site. Primeiro, vamos revisar o menu localizado na cabeça da página:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Tutorial de html">Tutorial de html</a></li>
<li id="x"><a href="/x.asp" title="Tutorial de XML">Tutorial de XML</a></li>
<li id="b"><a href="/b.asp" title="Script do navegador">Script do navegador</a></li>
<li id="s"><a href="/s.asp" title="Script de Servidor">Script de Servidor</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial de Multimídia">Tutorial de Multimídia</a></li>
<li id="w"><a href="/w.asp" title="Manual de Construção de Sites">Manual de Construção de Sites</a></li>
</ul>
</div>

Possuímos sete links, cada um atribuído um id para correspondência com o conteúdo correspondente: por exemplo, o id 'h' corresponde ao tutorial HTML, e assim por diante. Além disso, esses links estão encapsulados dentro de um elemento de lista chamado 'menu', cujo id 'menu' indica a função dessa lista - uma lista de menu, enquanto o div mais externo chamado 'navfirst' é usado para marcar essa seção na página, diferenciando-a de elementos como conteúdo principal (maincontent), barra lateral (sidebar) e rodapé (footer).

Os elementos 'div' e 'ul' fornecem uma estrutura real, indicando a função do conteúdo (navegação) e sua posição no documento (local do cabeçalho da página). Por outro lado, o layout de tabela tradicional não pode fornecer nenhuma informação semântica sobre os dados e facilmente consumir três vezes mais largura de banda.

Observe que essas marcas não contêm tags 'img', portanto, não envolvem atributos como width, height, background ou border, etc. Além disso, não usam células de tabela, portanto, não envolvem uma série de atributos relacionados. Elas são muito limpas e pequenas, fornecendo todas as informações necessárias para compreensão.

Ao usar CSS em conjunto, essas marcas oferecem uma disposição confiável e rápida para os visitantes do site. Além disso, oferecem a possibilidade de criar uma aparência mais flexível e variada para os visitantes. E mesmo em ambientes sem CSS, nossas marcas bem estruturadas ainda podem fornecer todos os conteúdos sem confusão.

Os leitores com visão aguda talvez já tenham notado que o texto contido no elemento 'a' não é exibido pelo navegador, o que deve ser atribuído à perfeita combinação de marcação estruturada e CSS, que nos permite definir um mecanismo de gatilho com apenas algumas regras CSS. Quando o usuário usa um navegador gráfico, eles verão botões de navegação bonitos, e quando usam um leitor de texto puro, também podem obter todo o texto. Dessa forma, o conteúdo é o mesmo para todos os usuários.

E, devido ao fato de que os marcadores não incluem imagens e células de tabela, este componente de navegação pode ser referenciado por qualquer página dentro do site sem alterar a estrutura, ao mesmo tempo que lhe atribui diferentes efeitos visuais. Em resumo, ao modularizar o código, aumentamos a reutilização do código.