Notícia novinha!
Enquanto o ie8 e o Firefox3beta comemoram o score máximo no Acid2, o Opera (via) e o WebKit (engine do navegador Safari) (via) já passaram no Acid3, que testa o suporte a DOM e SVG, entre outras coisas. O Firefox3 beta4 tirou 68/100, e o Internet Explorer8, 17.
Tá esquentando!
Essa página analisa algumas tags HTML dos mundos de contos de fada e tempos pré-históricos. Más, fedorentas, ou simples coisinhas feias que pertenceram a padrões HTML ultrapassados, tolices proprietárias aleatórias que só quase-funcionam numa sub-versão de algum navegador ou tags que simplesmente foram suplantadas por tags mais novas.
A abordagem do HTML Dog de ensinar HTML e CSS baseado nos padrões web sem fazer barulho nenhum sobre os próprios padrões é uma boa mas, ao fazer isso, usuários (principalmente iniciantes) podem encontrar abordagens diferentes e más-práticas em outros lugares e não saber o que há de errado com elas. Pensando nisso foi criado esse guia sobre o que Não usar.
HTML tentou se mover da apresentação para o significado, conduzindo uma filosofia de separar o conteúdo e significado (HTML) da apresentação (CSS). Essa abordagem geral torna as páginas muito mais enxutas, porque um único conjunto de instruções relativas à apresentação (em um arquivo CSS externo) pode ser aplicado a muitas páginas. Isso também faz com que a manutenção do site se torne muito mais fácil, já que mudanças globais podem ser feitas a partir de uma única origem.
Algumas das “tags más” são apenas tags relativas à apresentação (como small) que devem ser substituídas por alguma coisa com significado ou simplesmente CSS. Outras podem ser não apenas relativas à apresentação, mas desnecessariamente volumosas (como a tag font) ou horrivelmente prejudiciais à usabilidade (como o blink).
Essas são algumas das tags mais comuns por aí que têm alternativas melhores:
Todas as tags mencionadas acima são compatíveis com os últimos padrões HTML, mas elas não aplicam nenhum significado ao conteúdo, coisa que todas as “tags boas” devem fazer. Elas poderiam ser mais úteis, mas elas não são muito prejudiciais, e facilmente poderiam ser confundidas com pequenas criancinhas inocentes e cheias de bondade perto dessas tags imundas abaixo:
Você pode pensar que, agora que já conhece as tag más e só vai usar as boazinhas, seu HTML está limpo e seguro. Mas existem alguns atributos na estreita esperando pra estragar suas “tags boas”.
<div align="center">Stuff</div>), mas, como acontece com a tag center, a propriedade CSS text-align é a nova chefe.<a href="qualquerlugar.html" target="_blank">Ajude me</a>
). Parece legal, mas não está fazendo nenhum favor ao seu site. Usuários não querem que coisas (como novas janelas) apareçam como mágica e a ferramenta de navegação mais usada em um site é o botão “Voltar”, que não vai funcionar se você abrir o link em uma nova janela. target é inválido e inacessível.
Atributos relativos a apresentação como width e height para imagens e cellpading e cellspacing para células ainda tem que ser usados devido a frequência com que diferentes valores precisam ser aplicados a diferentes elementos. Eles não são a solução perfeita, mas se você tem uma página com um grande número de imagens ou tabelas, você pode não ter nenhuma outra escolha sensata.
Os mais desconcertantes atributos relativos a apresentação pertencem a tag textarea, onde os atributos cols (número de colunas) e rows (número de linhas) são não apenas válidos, mas obrigatórios segundo o último padrão HTML.
Pra entrar na sua casa você até pode se ajoelhar e se espremer por aquela pequena portinhola de cachorro mas espere! Tem uma porta humana bem grande enfeitada com um aparelho chamado fechadura! Wow! Olhe – a porta, tipo, é do tamanho certo pra um humano passar.
A coleção de tags HTML (as boas) foi feita pra uma razão específica e acredite ou não (acredite), quando você as usa pelos motivos certos, você consegue resultados melhores.
Páginas web são muito mais acessíveis para pessoas com deficiências quando o HTML é semântico (as tags são usadas pelos motivos certos), por que, por exemplo, leitores de tela vão geralmente enfatizar uma lista quando encontram uma tag ul ou ol e um cabeçalho quando encontram um h1 ou h2.
A tag HTML mais usada inapropriadamente é a table. Tabelas são muitas vezes usadas pra fazer o layout, mas elas devem ser usadas apenas pra mostrar dados tabulares, como sempre foi sua intenção. O método de layout sem tabelas não é nenhum tipo de desafio Zen Budista para a iluminação de um verdadeito geek, existe um benefício prático real de não apenas reduzir drasticamente o peso da página, mas também facilitar a manutenção e o redesign. Um bom exemplo disso é o Zen Garden (versão brasileira – Zen Garden do Maujor). Mudando apenas o CSS, você muda o visual do site inteiro. Legal, não é?
Algumas vezes designers usam algumas das tags e atributos mencionados aqui (especialmente tabelas para layout) pra conseguir um design que suporta tanto navegadores antigos (em especial o Netscape 4) quanto os modernos. Tabelas vão efetivamente permitir um controle melhor sobre a apresentação em navegadores que não suportam o CSS, como o Netscape 4, mas existem pouquíssimos usuários desses navegadores e cada vez menos, enquanto o número de usuários onde um layout feito com tabelas é uma grande desvantagem – usuários de dispositivos móveis – cresce. As vantagens de um design livre de tabelas mencionadas acima de longe superam as desvantagens e o resultado são páginas que, embora percam o estilo pra uma minoria, permanecem com todas as suas funcionalidades em todos os navegadores.
Cachinhos Dourados achou que seria uma ótima idéia comer aquelas tigelas de mingau, mas três mamíferos grandes e carnívoros apareceram e a jogaram pela janela. Frames são tigelas de mingau que pertencem a ursos. Podem parecer legais, mas é bem perigoso andar em algum lugar perto deles.
A maioria dos sites não usa frames e no geral usuários da web estão acostumados com um único documento compondo uma página.
Mas se, por alguma razão, você quer:
vá em frente, use frames.
No geral, frames não fazem nada além de adicionar complexidadade e subtrair usabilidade.
Se você seguir essas receitas de bolo, você não vai errar muito:
E já que falamos muito de usabilidade e acessibilidade, alguns links pra você ficar mais por dentro do assunto:
Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
Codando 