Comecei a aprender padrões da web no início do ano passado e ganhei alguma experiência nos últimos dois anos. Recentemente mudei de emprego e estou livre em casa, então escrevi algo para compartilhar com todos.
1. Compreensão dos padrões da web e especificações W3C XHTML
De acordo com o entendimento habitual, estes dois conceitos parecem referir-se à mesma coisa (estas "teorias avançadas" discutimos nesta edição ^_^). Mas penso que, de facto, do ponto de vista técnico, estas duas coisas quase não têm correlação alguma. Em suma, os padrões da web devem implementar de forma independente a estrutura, o desempenho e o comportamento da página. Mais comumente, é a linguagem popular "div+css" no recrutamento de hoje. No entanto, nenhuma versão do W3C XHTML impõe restrições ao conceito de padrões da web. Obviamente, podemos usar o xhtml 1.1 para escrever uma página web posicionada em tabela. Neste ponto, você pode pensar que estou falando um monte de bobagens. Mas com qualquer tecnologia, você só poderá usá-la corretamente quando tiver uma compreensão suficientemente clara dos conceitos básicos. Deixe-me falar sobre os dois caminhos equivocados na aplicação atual dos padrões da Web a partir dos dois aspectos a seguir:
O primeiro caso é simples. Eu acho que enquanto XHTML+CSS for usado, ele será um padrão da Web. A página está cheia de classes e ids. Sinta-se à vontade para definir classes separadas para cada detalhe. A diferença entre essa página e o HTML tradicional é que há um “/” extra na tag img. Na verdade, é melhor voltar ao HTML tradicional. Pelo menos posso usar fontes facilmente sem ter que procurar a folha de estilos como um dicionário. Outro uso mais sutil e casual de CSS, sobre o qual falarei mais tarde.
Acho que a segunda situação é mais difícil de entender, ou seja, tentar usar vários aninhamentos div complicados e instruções CSS para obter o desempenho desejado. Um exemplo bem simples está em um post que acabei de ver “Página com cantos arredondados sem cortar a imagem”. Primeiramente quero ter certeza de que essa ideia é realmente boa, usar a função CSS para “desenhar” os cantos arredondados. Para fazer isso, o designer deve adicionar uma grande seção de código como segue no local correspondente:
| A seguir está o conteúdo citado: Exemplo de código-fonte [www.52css.com] <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> |
No entanto, isto viola seriamente o conceito básico dos padrões da Web – a separação entre estrutura e apresentação. Porque coloca o código usado para controlar o desempenho da página web no documento estrutural. Talvez você diria que ele realmente coloca o código de desempenho real em CSS. Mas acho que este é um conceito roubado. Como as tags b acima não têm nada a ver com a estrutura da página da web, são todas tags vazias. Ou seja, não existe colocar algo onde a estrutura do documento exige. Portanto, eles são apenas códigos inúteis para a estrutura do documento.
Outro exemplo pode ser mais sutil. Já vi um artigo no alistapart.com sobre como implementar colunas de três vias em uma página da web. O princípio provavelmente é usar três ou quatro divs para aninhar uns aos outros. Acho que isso também é uma violação dos padrões da Web. Porque a ordem em que essas tags div são colocadas no código não é simplesmente para necessidades estruturais, mas para o desempenho da página web.
Claro, admito que o ponto de vista acima é um exagero até certo ponto (mas por outro lado, se você tiver que implementar cantos arredondados que não sejam de imagem, também não é um exagero, haha). Às vezes, estrutura e desempenho não são separados tão facilmente. Para obter um desempenho rico, temos que deixar a estrutura se adaptar (pense no uso de <div style="clear:both" />). Mas é importante saber o que é certo e o que é errado. Mesmo que às vezes tenhamos que fazer algo errado.
Por fim, quero afirmar que não estou dizendo que “cantos arredondados sem imagem” sejam sem sentido ou errados. Admiro também a inteligência e inspiração do autor. Acho que esse tipo de pesquisa técnica é como usar CSS para desenhar a bandeira nacional antes, e é muito útil para dominar a tecnologia CSS. Contudo, seu uso deve ser tão limitado quanto o da flag CSS e não deve ser adotado em aplicações práticas. Porque viola os princípios básicos dos padrões da web.
2. A semântica das tags HTML
Os padrões da web atuais são coloquialmente chamados de "div+css" ou "layout de camada". Não me oponho a esta conveniência. Mas isso levará a um mal-entendido: usar um grande número de tags div como elementos estruturais. Na verdade, esta é uma forma mais avançada de abuso de div (mencionada por Jeffrey Zeldman no livro "Website Refactoring").
HTML nos fornece uma grande variedade de tags, cada uma com seu próprio significado. Acho que na hora de projetar, além de seguir a sintaxe do HTML, devemos aproveitar ao máximo e obedecer à “semântica” de cada tag. Por exemplo, o texto do título deve ser incluído em h1-h6, parágrafos grandes do conteúdo do texto devem ser segmentados por <p> em vez de <br />, os itens da lista devem ser colocados em ul ou ol ou dl e os dados em formato tabular ainda deve ser o layout da tabela.
Por que fazer isso? Uma razão muito convincente é garantir que quando o usuário remover a exibição CSS, a página da web possa exibir a hierarquia estrutural do conteúdo da maneira mais eficaz possível. Se todos os divs forem usados, quando o CSS for removido, toda a página web perderá sua hierarquia, deixando apenas alguns fragmentos de texto confusos. Isso não atende aos requisitos do padrão da web para compatibilidade de baixa configuração.
Deixe-me listar detalhadamente meu entendimento da semântica de algumas tags:
pbr
Vamos falar primeiro sobre o mais simples. Use tags p em vez de br (mesmo duas <br /> consecutivas) para parágrafos. Isso parece ser desnecessário dizer muito. Mas às vezes temos que abandonar este princípio. Um exemplo comum é uma postagem no fórum, se eu quiser segmentá-la, clico em Enter. O que é transmitido para o fundo e exibido desta forma é obviamente segmentado usando <br />.
mesa
Devido à promoção vigorosa de div+css, parece que quem usa layout de tabela é um nativo incivilizado. Mas acho que essa visão está incorreta. O significado de tabela é tabela, portanto, quaisquer dados que devam aparecer em formato tabular ainda devem ser dispostos em uma tabela. Um exemplo simples é a lista de colegas de classe, incluindo nomes, carteiras de alunos, gêneros, etc. Obviamente, trata-se de dados em formato tabular, portanto, o layout da tabela deve ser usado. Outro exemplo que vale a pena explorar é a navegação do calendário no blog. Certa vez, vi um programa de blog em que as datas na navegação do calendário estão todas agrupadas em divs de 1 a 30 e, em seguida, o estilo float:left é usado para organizar o calendário do mês atual em uma linha de 7. Quando cancelo a exibição de CSS do navegador, a parte do calendário é organizada verticalmente do nº 1 ao nº 30. Eu acho que isso está errado. Como o calendário deve conter dados em formato tabular, o layout da tabela ainda deve ser usado. Após cancelar o css, eles ainda deverão ser agrupados em uma tabela com 7 seguidos.
esta é outra tag que será ignorada. Devido à onipotência do CSS, todas as células da tabela podem ser criadas usando td e um atributo de classe. Mas semanticamente, algumas células da tabela devem ser rotuladas com th. Por exemplo, na tabela de calendário mencionada acima, as unidades "MON TUE WED... SUN" que identificam a semana devem usar th em vez de td.
h1-h6
Para tags h1-h6, semanticamente elas devem funcionar para todo o texto do título. Portanto, alguns métodos de escrita como <div class="diary-title> são redundantes. Escreva-o diretamente como <h1> e defina CSS diretamente para h1 em vez de .diary-title. Não teria o mesmo efeito? Claro que esta regra não pode ser muito rígida, porque às vezes os elementos estruturais da parte do título não podem ser resolvidos simplesmente usando um h1, mas no máximo eu uso um método como <h1><span></ span></h1> para alterar o título A estrutura é aninhada de forma mais complexa para atender às necessidades de desempenho.
Mas surge aqui uma discordância semântica. H1 deve ser entendido como um título de primeiro nível ou como um título com tamanho de fonte 1? Normalmente entendo isso como um título de primeiro nível e, se houver legendas sob o título de primeiro nível, use h2. Mas, na verdade, olhando para o início do design HTML, os números após h1-h6 são mais entendidos como controlando o tamanho do texto do título. h3 pode ser usado apenas para usar uma fonte tamanho três, não que seja um título de terceiro nível. Caso contrário, todos os títulos de primeiro nível usam h1, e todos eles são fontes muito grandes, e você precisa usar CSS para controlar o tamanho da fonte, o que parece muito complicado. Então, esta é uma questão para debate.
tudo bem
Sempre que precisar listar termos, você deve usar ul ou ol em vez de p. Por exemplo, requisitos de trabalho em anúncios de recrutamento, como precauções, como instruções de etapas de operação. Além disso, um uso popular é usar ulli para listar o menu de navegação da página da web e, em seguida, usar CSS para controlar sua organização.
Deve-se acrescentar que não se esqueça que ul ou ol podem ser usados em li para formar uma lista de segundo nível.
dl dt dd
Este é um conjunto de tags quase esquecido, mas Jeffrey Zeldman promove fortemente seu uso em "Refatoração de Sites". dl deve ser o nome completo de "lista de definições (ou lista de definições? Se alguém souber, por favor me diga)". O nome da palavra é colocado em dt e a explicação da palavra é colocada em dd. O site alistapart.com é ainda mais inteligente, definindo toda a coluna da direita como dl, usando dt para o título de cada unidade e dd para o conteúdo da unidade.
imagem
A tag img em si não tem muito a dizer. Só quero falar de um lugar-comum, ou seja, usar img somente quando esse elemento for de fato uma imagem necessária no conteúdo, caso contrário, deve ser definido como um estilo usando CSS. Como ilustrações, avatares, emoticons, são imagens que devem aparecer no conteúdo, use img. Outros, como a imagem de fundo do título e o pequeno ícone na frente do item da lista, não devem usar a tag img.
período
span é agora tão popular quanto div. Mas, na verdade, acho que deveríamos nos ater ao seu uso original. Meu entendimento pessoal é que span foi originalmente usado para transportar atributos de classe ou estilo. Ele próprio não tem uma semântica clara. Portanto, no fluxo de texto, se precisarmos fazer alterações de estilo em algum texto, usamos span para encerrá-lo. Por exemplo, se algumas palavras precisam ser adicionadas em vermelho, eu uso <span class="red">.
Entretanto, é importante notar que isso pode causar os problemas mencionados em h1 anteriormente. Como alguns estilos de texto possuem tags prontas, como <strong>, <sub>, etc., também devemos dar-lhes algumas oportunidades apropriadas.
um
a é o rótulo que controla a hiperconexão. Mas existem alguns casos especiais em que podemos não gostar de usá-lo. Por exemplo, uma pequena janela precisa aparecer. Não prestei muita atenção, mas acho que alguns designers definirão onclick diretamente na tag <img> do ícone "play". Pessoalmente, acho que deveríamos adicionar um a fora do img, definir onclick dentro de a e lembrar de escrever return false no final da função js. Se possível, o atributo href da tag a também deve ser escrito com o URL da janela pop-up para garantir que os usuários ainda possam abrir a página com eficácia, mesmo que o JS esteja desativado.
Isso é tudo que vou listar por enquanto.
Por fim, vamos resumir a importância de seguir a semântica das tags HTML. Um dos requisitos dos padrões da web é a compatibilidade discreta: quando um usuário desativa imagens, desativa CSS ou desativa JS, ainda podemos permitir que ele navegue efetivamente no conteúdo da web. Como todos sabemos, o atributo alt obrigatório é considerar a compatibilidade ao desabilitar imagens. Seguir corretamente a semântica das tags HTML garante compatibilidade quando o CSS está desabilitado. Somente quando as tags HTML forem usadas corretamente e nossa página estiver com "setas CSS", as pessoas ainda poderão ver onde está o menu de navegação, onde está o título do artigo e a tabela do calendário não desmoronará.