Pois é meus caros!

Não é ‘tão novidade assim’, mas as vezes parece!

Okay, abandonamos(nem todos), o recorte de layouts em <table>, (sabemos deveriamos saber) que tableless é um termo perigoso se for mal interpretado…. menos tabelas, não quer dizer, nunca usar. A tag de tabela do HTML possui utilidade. Existem lugares e momentos corretos para usá-las.

Cada <td> é uma célula, <tr>são as linhas, os <th> são as células de título, o <tbody> é o corpo dos dados tabulares, contém os dados propriamente ditos, o <thead> deve delimitar o cabeçalho… o

Enfiim, ainda as usamos. Nos perguntamos se devemos ou não usar a tag <table> e as filhas desta.

Porém, e as <div>s ?

Você nunca se perguntou se deveria ou não usar uma div ? Naquele contexto ?

Nunca parou para pensar, ‘se fazia sentido’ ?

Repita estes questionamentos com a tag .

É fácil usar essas tags sem semântica. Entretanto não tinha mesmo nenhuma semântica aquele lugar onde enfiamos elas ?

Alguns códigos que vejo, me dão vontade de clamar por um movimento DivLess.

<div id="menu">
    <ul>
         <li>..

Tirando raros casos, e efeitos ‘complicados’, precisava da div ? Não poderia ter feito simplesmente e apenas:

<ul id="menu">
     <li>..

hein?!

Ou então

<div id="logo"><img src="....

Quase tão feio quanto fazer um website inteiro com table, é desperdiçar marcação HTML vazia de semântica.

A tag aceita e muito bem o atributo ID.

Para alguns pode parecer absurdo, porém já vi:

span.bold { font-weight: bold; }

Para os que não entenderam o que eu quis dizer, ou não acham isso um soco no próprio estômago, lhes digo: é absurdo ! Esse tipo de declaração deve soar absurda.

O
é outra tag muito mal usada.

Representa uma quebra, deve ser usada para tal, e não para ‘dar espaçamento’.

Espaço é estilização, logo, margin, padding.. são as formas corretas de configurar um espaçamento.

As tags são HTML, ou seja, estão na camada de conteúdo, e não de apresentação. Devem ser usadas para informar o que aquele conteúdo representa, e não para espaçar, ou colorir , por exemplo. Por este motivo que a tag foi banida depreciada.

Não devemos misturar as camadas.

Olhe para o teu conteúdo, e deixe que ele te responda o que ele é. O próprio conteúdo, deve lhe dizer qual tag é a mais apropriada.

É uma frase de alguém, um depoimento, respostas de uma entrevista, uma citação de um cliente ? que tal a tag ?

Melhor do que um com uma class, certo ?

Lá no rodapé, ou no formulário de contato, precisa colocar o endereço e telefone. Hum… tag <address>, que tal ?

Um disclaimer, pos scriptum, merece menos atenção do visitante. Jogue um !

E as tags , e ? melhor do que se matar com regras no css, para fazer um <span chegar naquele efeito.

Só nisso, economizamos declarações de classes, percebeu ?

Dava para fazer tudo que falei só com <div> e , na verdade, dá para fazer um site inteiro, com tudo apenas usando um desses dois, porém não é praticável, certo ?

A primeira consequência são diversas linhas a mais no css, e diversas declarações de atributos, classes, ids..

Olhe por outro lado agora.

No primeiro momento, deixamos nosso conteúdo nos contar o que ele era, para sabermos qual tag usar.

Agora olhemos o código pronto, sem ler o conteúdo das strings, apenas vendo as tags. Aqui, nossas tags devem ser capazes de nos contar que tipo de informação elas carregam, e o que elas estão fazendo ali na página.

Perceba a ‘loucura’ disso.

Pense, reflita. =)

Lista de TAGS HTML