Estrutura XHTML I: Usar XHTML para reestruturar sites

A título de exemplo, o título que escrevemos para essa seção era: "XHTML: Regras simples, diretrizes fáceis." Uma das razões é que as regras e diretrizes discutidas nessa seção são simples e fáceis. Outra razão é que um livro simples e fácil de design de WEB, como os novos produtos gratuitos do supermercado, embora comuns, podem efetivamente atrair a atenção das pessoas, estimular o interesse e encorajar as pessoas a tentar.

Eu realmente espero que o conteúdo deste capítulo possa despertar seu interesse e encorajar você a tentar. Por que? Porque, uma vez que você dominar as ideias simples e fáceis contidas neste capítulo, você começará a refletir sobre a maneira como as páginas da web funcionam e a mudar a maneira como você as constrói. No entanto, eu não quero que você apenas reescreva o código. Espero que você realmente possa pensar e trabalhar de outra forma.

Por outro lado, a reestruturação é o verdadeiro significado do XHTML.

Neste capítulo, estudaremos o mecanismo e o significado das marcações estruturadas. Se você está integrando padrões de site em seus projetos de desenvolvimento, pode achar o conteúdo deste capítulo familiar. No entanto, até mesmo os veteranos nessa área podem encontrar surpresas neste capítulo.

Resumo das regras do XHTML

Converter HTML tradicional para XHTML 1.0 é rápido e sem dor, desde que você siga algumas regras simples e diretrizes fáceis. Independentemente de você já ter usado HTML ou não, isso não impedirá você de usar XHTML.

  • Use a declaração apropriada do tipo de documento e o espaço de nomes.
  • Use o elemento meta para declarar o tipo de conteúdo da sua página.
  • Escreva todos os elementos e atributos em minúsculas.
  • Adicione aspas aos valores de todos os atributos.
  • Atribua valores a todos os atributos.
  • Feche todas as tags.
  • Use espaços e barras invertidas para fechar tags vazias.
  • Não escreva sublinhado duplo em comentários.
  • Garanta que o caractere de menor que e o caractere de e igual sejam < e &

Unicode e outros conjuntos de caracteres

Os documentos XML, XHTML e HTML 4.0 têm o conjunto de caracteres padrão Unicode, um padrão definido pela União Unicode. O Unicode é um conjunto de caracteres completo que fornece um número específico e único para cada caractere, independentemente da plataforma, programa e idioma. O Unicode também é a coisa mais próxima de um alfabeto geral que temos, embora não seja um alfabeto, mas um esquema de mapeamento de números.

Embora o Unicode seja o conjunto de caracteres padrão para documentos da web, os desenvolvedores ainda podem escolher conjuntos de caracteres mais apropriados para eles. Por exemplo, os sites dos EUA e da Europa ocidental frequentemente usam a codificação ISO-8859-1 (Latin-1), enquanto o padrão nacional da China é gb2312.

Marque documentos para expressar semântica, não para estilo

Lembre-se: use CSS ao máximo para layout. No mundo dos padrões da web, a marcação XHTML não se relaciona com a apresentação, mas apenas com a estrutura do documento.

Documentos bem estruturados podem transmitir o máximo de semântica possível para os navegadores, seja no navegador de um PDA ou no navegador gráfico de desktop moderno. Documentos bem estruturados podem transmitir semântica visual para os usuários, mesmo em navegadores antigos ou em navegadores modernos onde o usuário desativou o CSS.

Não todos os sites podem abandonar imediatamente o layout de tabela HTML. O inventor do CSS, W3C, só converteu seu site oficial para layout CSS em novembro de 2002. No entanto, mesmo os teimosos defensores das normas não sempre separam completamente a apresentação da estrutura, pelo menos no XHTML 1. Mas agora, podemos dar um grande passo em direção a esse ideal, separando a apresentação da estrutura (ou dizendo separar os dados do design), mesmo que seja um layout tradicional misturado.

Aqui estão algumas dicas que podem ajudar você a pensar de maneira mais estruturada:

Cores dentro do tópico

Na escola de gramática, a maioria de nós foi forçada a usar formatos de tópico padrão para escrever artigos. Agora, como designers, podemos nos libertar dos limites do tópico com tanto quanto liberdade e nos lançar corajosamente no campo da expressão pessoal única (talvez nossos folhetos e sites comerciais não sejam tão únicos e pessoais). Mas pelo menos não seremos perturbados pelos tópicos.

Na verdade, de acordo com o HTML, devemos estruturar o conteúdo em níveis organizados. Durante a era em que os navegadores não suportavam CSS, não podíamos fazer isso ao entregar layouts prontos para venda. Mas hoje, ao implementar nosso design semanalas, temos a capacidade de entregar documentos com uma estrutura interna bem organizada.

Quando você marca texto para uso na web ou quando você converte um documento de texto existente em um site da web, pense nestes itens de tópico tradicionais.

<h1>Meu tema</h1>
<p>Texto introdutório</p>
<h2>Ponto de vista complementar</h2>
<p>Texto relacionado</p>

Além disso, evite usar elementos HTML descontinuados como <font>, ou elementos sem significado como <br>, para simular estruturas lógicas que não existem.

Por exemplo, evite fazer assim:

Meu tema<br /><br />
Texto introdutório<br /><br />
Ponto de vista complementar<br /><br />
Texto relacionado<br />

Use elementos com base em seu significado, não em sua aparência

Alguns de nós já nos acostumaram a um mau hábito, usando h1 quando precisamos apenas de um texto grande ou li quando precisamos de um ponto no início. Como discutimos no capítulo anterior, os navegadores sempre tiveram o hábito de aplicar atributos de design aos elementos HTML. Todos nós estamos acostumados a pensar que h1 significa fonte grande, li significa pontos ou blockquote significa recuo de texto. A maioria de nós ainda escreve HTML de maneira caótica, simulando efeitos de apresentação com elementos estruturais.

Da mesma forma, se o designer quiser que todos os títulos tenham o mesmo tamanho da fonte, ela configurará todos os títulos como h1, mesmo que isso não faça sentido em termos de semântica estrutural.

Este é o título principal, organizado de acordo com o formato de tópico.
Isso não é o título principal, mas eu quero que ele use a mesma fonte que o título acima, mas não sei como usar CSS.
Isso não é um título. Mas eu gostaria que o texto na página usasse a mesma fonte, para alcançar o que eu quero:
Se eu entender CSS, posso alcançar este design sem perturbar a estrutura do documento.

Precisamos pôr de lado nossas pequenas manobras e começar a usá-los com base no significado dos elementos, não no que eles parecem. Na verdade, o h1 pode ser qualquer coisa que você quiser. Através do CSS, o h1 pode ser uma fonte pequena e não negrito, enquanto o texto p pode ser em negrito e grande, e li pode não ter pontos (você pode usar imagens PNG, GIF ou JPEG de pequenos gatos, cachorros ou logotipos de empresas, por exemplo).

A partir de hoje, vamos usar CSS para determinar a aparência dos elementos. Até mesmo podemos alterar sua aparência com base na posição do elemento na página ou no site. O CSS pode completamente separar a apresentação da estrutura e permitir que você formate qualquer elemento da maneira que preferir.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

Por que você está fazendo isso? O objetivo é obter uma aparência e sensação de marca personalizada nos navegadores gráficos, ao mesmo tempo em que a estrutura do documento é mantida em navegadores de texto, dispositivos sem fio e e-mails em formato HTML.

Não pretendemos discutir mais sobre CSS no capítulo sobre XHTML. Apenas queremos mostrar que a estrutura do documento e a expressão visual são coisas completamente diferentes e que os elementos estruturais devem ser usados para transformar texto, não para impor efeitos visuais.

Use elementos estruturais em vez de lixo sem significado

Devido ao fato de termos esquecido ou simplesmente não sabermos o uso de HTML e XHTML para transmitir significado estruturado, muitos defensores do HTML usam tags para inserir listas dessa forma:

Item um<br />
Item dois<br />
Item três<br />

Considere usar listas ordenadas ou não ordenadas em vez disso:

<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item três</li>
</ul>

"Mas li me dá um ponto circular, e eu não preciso de ponto circular!" Talvez você diga. De acordo com o capítulo anterior, o CSS não faz nenhuma suposição sobre a aparência esperada dos elementos. Ele espera que você diga a ele o que você espera que a aparência do elemento seja. Fechar o ponto circular é uma das capacidades mais básicas do CSS. Ele tem a capacidade de fazer com que a lista pareça idêntica ao texto comum, bem como fazer com que a lista pareça como uma barra de navegação gráfica, com efeito de reversão completo.

Portanto, use elementos de lista para marcar listas. Da mesma forma, use strong em vez de b, use em em vez de i, etc. No estado padrão de muitos navegadores de desktop, o efeito de exibição do strong é o mesmo que o de b, e o de em é o mesmo que o de i, ao mesmo tempo em que também pode criar o efeito visual esperado sem danificar a estrutura do documento.

Embora o CSS não faça suposições sobre a exibição de qualquer elemento, os navegadores fazem muitas suposições e ainda não encontramos um navegador que exiba strong de outra forma além de negrito (a menos que seja indicado por instruções CSS de um designer para exibir de outra forma). Se você se preocupa que um navegador desconhecido não exiba strong em negrito, você pode escrever uma regra CSS assim:

strong {
	font-weight: bold;
	font-style: normal;
	{}

Elementos Visuais e Estrutura

Os padrões da web não só exigem que usemos que tecnologia, mas também que sigamos a maneira de usar essas tecnologias. Usar XHTML para escrever marcação, ao mesmo tempo em que usar CSS para lidar com parte ou toda a disposição, não一定会 tornar o site mais fácil de usar e mais leve, economizando assim mais largura de banda. Como usamos as tecnologias no passado, XHTML e CSS também podem ser usados de maneira errada e mal usados. XHTML extenso e HTML extenso, ambos, podem desperdiçar a largura de banda e o tempo do usuário. O CSS extenso também não pode substituir completamente o código HTML de apresentação; isso não é mais do que uma coisa ruim substituindo outra.