Tableless - Desenvolvimento inteligente com Padrões Web

06/04/2006
Artigos

A Semântica é que manda

Um leitor do Tableless enviou um artigo muito interessante: Divless. Muitos desenvolvedores que começam a abordar os padrões tem muita dificuldade porque não prestam atenção em uma coisinha simples: semântica. Já cansei de falar em curso, em artigos, podcasts e …

Por

Um leitor do Tableless enviou um artigo muito interessante: Divless.

Muitos desenvolvedores que começam a abordar os padrões tem muita dificuldade porque não prestam atenção em uma coisinha simples: semântica.
Já cansei de falar em curso, em artigos, podcasts e tudo mais… Semântica é a alma do negócio. Semântica é a chave do desenvolvimento com padrões web. Se você entende semântica, você tem meio caminho andado.

Todo mundo já sabe que cada tag, tem uma função semântica. Se você quer definir um título as tags apropriadas serão H1, H2, H3… Se você quiser fazer um parágrafo, usa-se P. Simples assim.
A tag DIV serve para dividir o layout em seções. O layout geralmente é dividido em partes como o cabeçalho, o menu, a coluna da esquerda, a coluna do meio, o rodapé etc. Para separar ou demarcar estas seções a tag semanticamente correta é a DIV. Nada de tabelas, nada de span, nada de p ou qualquer outra tag. O DIV foi designado para fazer este trabalho. Usar qualquer outra tag para fazer isto é errado.

Sem contar que criar um código semanticamente correto vai te ajudar bastante na hora de implementar o CSS. Você vai ter mais variedade de tags. Vai conseguir identificar melhor as partes do layout. Imagine se o layout fosse feito com listas. Você teria que colocar classe ou ids em todos os objetos para poder identificá-los para manipulá-los com CSS. Iria se tornar uma coisa totalmente contraproducente.

No artigo do camarada, ele fez alguns exemplos de layout usando apenas listas. Bom, nada mais fácil… Se você quiser você pode fazer layouts usando apenas a tag B ou qualquer outra tag que quiser. O CSS lhe permite manipular as características dos objetos, mas o CSS não muda a função semântica do elemento.

O que você acha?

Nunca é demais voltar nestes assuntos para fixar melhor na memória. Já dizia o velho sentado: A repetição faz a gravação.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://dgmike.globspot.com Michael

    Sempre é bom voltar a estes assuntos. Sou professor de informática em minha cidade, ensino desde o windows até o photoshop (passando pelo Corel) e então as turmas começam a ver “WebDesign”. Aqui na minha cidade parece que eu sou o único que trabalho com tableless.
    Emfim, eu sempre digo aos meus alunos como deve ser trabalhado o código html e dou sempre o exemplo de deficientes visuais. Cara, é a melhor mneira de ensinar. Dizer que o texto é lido por um programa que interpreta o que será escrito. Tipo assim, p é paragrafo, strong é forte, em é enfatizado (emphasys) e assim por diante.
    Quem já sabe um pouco de html diz, mas não existia b para fazer negrito (bold), eu digo… “então, tenta explicar para um cego no meio de um texto corrido que o texto é bold
    “.
    Meu comentário pode não ter um grande valor, mas acredito que a semantica e a acessibilidade andam juntas. E só escrevendo assim, pensando nos outros é que iremos fazer o que é certo. Depois acertamos o layout com o CSS. :D

  • http://alexandre.gaigalas.net Alexandre

    Vai ter muita gente por aí lendo esse artigo, e simplesmente “trocando” div’s por li’s deliberadamente. Não é assim, tem que haver uma estrutura lógica por trás de tudo, senão caimos no mesmo crime, com vilões diferentes.

    Um texto, é uma lista de parágrafos e títulos, mas eu não escrevo textos com ul’s e li’s, porque existem tags melhores pra isso, as tags p e hn.

    Ainda não existem tags no XHTML1.1 para seções lógicas dentro de um documento. Mas eu acho errado usar listas ao invés de divs. Porque divs sozinhos não tem carga semântica, mas associados a uma classe tem sim. Já ouviu falar de microformatos?

    Em contrapartida no XHTML2.0 tem as tags section e h, que criam uma estrutura lógica no documento. Eu prefiro “simular” o XHTML2.0 utilizando divs com classes “section” e headers com class “h” do que partir pra listas, é muito mais future proof.

    Pra quem usa XSLT, com eu, no futuro, é muito mais simples passar de um “div class section” pra um “section”, do que mudar tudo e tirar as listas para colocar seções.

    Enfim, o W3C já encontrou a solução para o problema dos div’s desnecessários. Mesmo que ela só venha oficialmente com o XHTML2.0, podemos usar o conceito com o que temos (seções lógicas), e não criar um novo conceito (usar listas).

    O CSS não muda a semântica do documento, mas muitos desenvolvedores escravizam a marcação em favor do CSS! Portanto ele influencia SIM! Muitos caem no erro de criar div’s com nome “esquerda”, “direita” e por aí vai, classes chamadas “verde”, “sombra”, quando na verdade eles deveriam se preocupar mais com a marcação do que com o estilo. O CSS deve abraçar o XHTML, não o inverso.

  • http://cafecomkiwi.blogspot.com victor b.

    eu tenho uma dúvida . e quanto ao menu, esse seria semanticamente correto se feito com a tag ‘li’ ?

  • http://project47.viscountbox.com Putcharles

    “No artigo do camarada, ele fez alguns exemplos de layout usando apenas listas. Bom, nada mais fácil… Se você quiser você pode fazer layouts usando apenas a tag B ou qualquer outra tag que quiser. O CSS lhe permite manipular as características dos objetos, mas o CSS não muda a função semântica do elemento.”

    Comentário perfeito!
    Hahaha… Coincidentemente, ontem tava conversando com um colega meu aqui no estágio sobre esse assunto do “DIVless”…

    A gente brincou em usar tags pra fazer um layout. Já que se podem usar listas, porque não usar qualquer uma outra? Hahaha…

  • Felipe Ranieri

    Perfeito, entender a regra básica para desenvolver é o principal. Este foi o primeiro conceito que me foi passado quando comecei a estudar padrões: cada tag tem sua função e deve ser usada para tal.

    Parabéns pelo artigo Diego e concordo com a frase: Quem manda é a Semântica.

  • Felipe Ranieri

    Esqueci de preencher o campo site:
    http://f-ranieri.com.br

    Desculpem.

  • Danilo Costa

    Perfeito!

    Tem que mostrar para todos a maneira correta e semântica, não ficar inventando, se a moda pega daqui a pouco tão lançando “ul-less”, “li-less”, “p-less” e por aí vai…

    A explicação do Diego mostrando para que servem as DIVs, dividir layouts em seções, e o completemento do Felipe, dizendo que cada tag tem sua função e deve ser usada para tal, mostra claramente que: SEMÂNTICA É O QUE MANDA.

    U-know?

    []‘s

    DC

  • http://lucasaf.wordpress.com Lucas Alves

    Muitos profissionais tem falado muito sobre semantica eu considero um assunto muito importante no meio.
    Acompanho bastante o site http://www.revolucao.etc.br/ li também um artigo sobre semantica e é sempre bom reforçar o assunto.
    Muito bem escrito você realmente tem razao quando diz que um layout pode ser feito com tags enfim qualquer tag mas tudo é questao de usar as tags certas para coisas certas.
    Um forte abraço

  • Breno C.

    Li o artigo, e achei a mesma coisa que você Diego. Semântica é tudo.

    :)

    Abraços,
    e parabéns pelo post!

  • http://www.brunomorejon.com Bruno

    Daqui a pouco vao enventar CSSLess

  • http://www.aquitemcasa.com.br Alisson

    o artigo, achei interessante, não sei se é correto, mas eu uso muito “dividir” o site em UL e LI

    até mais

  • http://www.personalsettings.org Luciano M.

    Alisson, UL e LI geralmente é usado para menus ;)

  • http://dudufigueiredo.com Dudu Figueiredo

    Semânticamente é errado, mas uma coisa é fato: a página com o CSS desabilitado fica com uma estrutura fantástica! Coisa que eles colocam como um grande diferencial, mas isso é tão importante ?

    Convenhamos, cada macaco no seu galho, e cada tag com sua função.

    Araços.

  • http://project47.viscountbox.com/ Putcharles

    É, sem o CSS fica bem bonito.

    Mas com as divs também fica bem legível =)

  • denis

    O cara “viajou na maionese”… Que viagem!!!

  • Santiago Carmo

    Eu acho que para uma pessoa se tornar um proficional deve não só saber como ultilizar todos os conceitos da semantica, pois ela não é apenas responsavel por uma boa formatação do documento mas também é a responsavel em parte para que a página tenha uma boa acessibilidade.

    Que faz um documento pensando apenas em um tipo de usuario e por isso não dá a menor importancia para a semantica, essa pessoa não é proficional.

    Abraços!

  • Pingback: thiagomagalhaes.net » Blog Archive » Divless

  • Glaucia

    Semântica!
    Tudo a ver!
    Semântica neles!^:)^

  • Pingback: Web Standards vs Tableless - Tableless

  • Bower

    Olha. Eu não sou adebito do certo e errado. Isso só se refere ao ponto de vista de quem fala. Cada web designer, têm que usar aquilo que lhe convém melhor. Servindo-se de recursos mais bem direcionado para o que site pede.

    EX: O rapaz lá em cima disse que usava para fazer menus. Mas se esse menu for horizontal? é inviável usar o . mesmo que você posicione na css de forma diferente. foram criadas para fazer listas e não outra coisa diferente. um menu vertical ficará bem usando as listas, mas o horizonta não.

  • Angelo Márcio Oliveira Araújo

    Angelo: Sou novo no assunto e pelo que pude entender, a semântica realmente é extremamente importante para a organização e hierarquia de um site. Quanto a criação de layout utilizando as div’s, pra mim tem sido uma experiência nova, uma vez que tinha como hábito criar layout com tabelas. Agora, com estas novas informações, já começo a olhar a criação de sites com outros olhos. Muito bacana. =d>

  • Manoel Netto

    Menu Horizontal / Vertical

    A questão não é o formato, cor, posicionamento do menu – facilmente resolvido com CSS – e sim novamente a semântica. Ora, o que seria o menu senão uma “lista” de opções clicáveis? Um “índice”.

    Acredito que a tag mais apropriada pra se organizar um menu é sim, a lista. OL ou UL, quem decide é quem faz.

    my two cents

  • Artur de Souza Aragão

    EU estou passando por alguns problemas, pois desejo fazer uma lista com as tags .

    Só que Eu desejo colocar ítens lado a lado.

    textoTexto
    textoTexto
    textoTexto

    O maior problema no IE7, é uqe tenho uma classe etada para os spans, ex: e desejo colocar um controle style para manipular a largura dos spans, só que no IE 7 não funciona e no IE6 sim. Alguém poderia me ajudar?

    aragaorj@hotmail.com

  • Olivier Voutat

    Concordo totalmente, com tudo que foi dito aqui.

    Certas pessoas quiseram me levar na onda do Tableless, mas ele é útil demais.

    Agora minha grande pergunta é: tables são realmente mais “pesados” do que divs ?

    Minha maior dúvida é a seguinte, tenho uma página com vários formulários (hehe, td com um controle via javascript para que somente um apareça de cada vez), qual seria a melhor opção para organizar os elementos de cada formulário ?

    Instintivamente eu iria para os tables, mas minha página ficaria sobrecarregada ?

  • Olivier Voutat

    talvez ?

  • Olivier Voutat

    <span> talvez ?

  • http://desenvolvendosites.com Wellington

    content

    Não passou :-(

  • Ana

    OLHA SÓ QUE LEGAL, A SEMÂNTICA UMA ÁREA MUITO ESTUDADA EM PORTUGUÊS ATRAVÉS DA DISCIPLINA LINGUÍSTICA SENDO DIFUNDIDA NA ÁREA TECNOLOGICA.

    ISSO É QUE EU CHAMO DE INTERDISCIPLINARIEDADE E TROCA DE INFORMAÇÕES ENTRE TODAS CIÊNCIAS.

    A SEMÂNTICA SE PREOCUPA COM A CONSTRUÇÃO DO SENTIDO, E SUA RELAÇÃO ESTABELECIDO ENTRE TODOS OS FATORES E ELA ESTÁ PRESENTE BASICAMENTE EM TODAS AS CIÊNCIAS.

    PARABÉNS A TODOS IDEALIZADORES E CONSTRUTORES DESSE SITE.

    QUE ISSO TUDO FAÇA SEMÂNTICA (SENTIDO) PARA TODOS VOCÊS!!!

  • Everaldo

    puts, …

    se continuar assim, a próxima moda será com certeza o TAG-less hehehehhehehe

    o que mais me deixa indignado é que a maioria do pessoal vê esse assunto como uma religião… ou então, assim como os nossos amigos da semântica do português que passam todo tempo filosofando acerca do assunto e além de nunca chegarem a uma conclusão, NÃO PRODUZEM NADA (excessões existem apenas para confirmar esa regra)…

    Prefiro com certeza, seguir a semântica acima de tudo, …, mas quanto ao uso de tabelas, por exemplo, para layout muito complexos envolvendo muitas imagens e/ou com muito campos de formulários, francamente, prefiro usar tabelas sim (afinal, meu tempo e minha paciiência também são preciosos), para os demais tableless é a solução.

    em resumo, acho que não existe uma regra geral que se aplica a todos casos, e, de posse de tal informação, prefiro tomar decisão das técnicas a ser utilizada para cada caso….

  • Isaac Nathan

    Eu pensava da forma acima citada antes de entender de verdade o sentido desses padrões. Hoje vejo que css “controlando” divs faz de igual a melhor que tables. Eu mesmo me propuz vários desafios de layouts, consegui resolver todos :)

  • Pingback: Padrões Web e a importância da Marcação Semântica « Mundo web

  • Silverfox

    Desculpa meu comentaruio deu uns erros LOL
    vou mandar de novo:
    Sempre uso DIVs para dividir o layout e alguns ELEMENTOS diversos como uma caixa flutuante simples.

    UL,LI(listas não ordenadas) para dividir link do menu ou coisas muito
    repetitivas tipo varias caixas indenticas

    P obvio que para paragrafos
    label em formularios para organizar.

    acredito que quem faça DIVs com nome: “esquerda”, “direita” esteja apenas se guiando.

    agora “verde”, “sombra” já é meio forçado mesmo kkk

    mas não só a semantica é importante
    a acessibilidade tambem
    e na area profissional a aparecencia

    SEMANTICA não é tudo é parte de um todo.

    faloww

  • Pingback: » A importância das tags | Igor Escobar // Blog | Desenvolvimento, Tecnologia e Informação, na ponta do lápis.

  • Pingback: [Programação]: PHP Benchmark « Julio Vedovatto

  • Pingback: A importância das tags « Igor Escobar // Blog | Desenvolvimento, Tecnologia e Informação, na ponta do lápis.

  • Pingback: Pra que simplificar se pode complicar? (Offtopic?) | Tableless - Desenvolvimento com Padrões Web