And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Chris Benseler

[www]

Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos

Status
Karma: 15312
Opiniões: 30

Mais deste autor


Semântica é tudo!

Semântica é tudo!

Muito bomEste texto foi classificado como Muito bom
Em Internet, Programação, Softwares
Por Chris Benseler
26 de Outubro de 2008

Semântica, meus amigos, é a base de qualquer html - veja o porquê e alguns dos benefícios

RSS Acompanhe O Desenvolvedor por Feeds!


Semântica, meus amigos, é a base de qualquer html escrito. E não existe uma regra rígida, um certo ou errado; html é uma linguagem, e existem muitas formas de se falar a mesma coisa em uma linguagem.
Desde a forma mais formal e polida, até aquela mais esdrúxula. Mas, de qualquer forma, todo mundo vai entender o contexto global.
Acontece que, para não deixar dúvida sobre o que você está expressando, quanto mais formal se usa uma linguagem, menor a margem que se dá para mal-entendidos.

Passei algumas horas numa reunião na última sexta-f discutindo sobre a semântica que foi usada na escrita de um html para um projeto no qual vou me envolver. O html estava todo validado pelo W3C, sem tabelas, bonitinho. Bonitinho, sim, mas ordinário. Não havia semântica; olhava pro html e não sabia o que era tpitulo, o que era texto de conteúdo, se as imagens usadas eram de layout ou de conteúdo, etc...

Vou usar um exemplo de um grande portal da web para exemplificar. Veja o trecho do layout:



O código usado foi esse:

<div id="noticias">
    <div id="imagem">
    <p>
        <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra" width="163" height="200"></a>
    </p>
    <h5><a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a></h5>
    </div>
    <ul>
        <li class="red"><a href="#" rel="101" >Votação</a></li>
        <li class="prin1t"><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></li>
        <li class="prin1p">&middot; <a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
        <li class="prin1p">&middot; <a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
        <li class="prin1p">&middot; <a href="" rel="104" ></a /><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</strong /></a> </a></li>
        <li class="prin1p">&middot; <a href="" rel="105" ></a /><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</strong></a> </a></li>
        <div class="linha"></div>
        <li class="red"><a href="#" rel="1010" >Blog das Eleições</a></li>
        <li class="prin1b"><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></li>
        <div class="linha"></div>
        <li class="red"><a href="#" rel="1020" >Notícias</a></li>
        <li class="prin1b"><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></li>
        <li class="prin1p">&middot; <a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
        <li class="prin1p">&middot; <a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
    </ul>
</div>


Vou, de cara, me abster a comentar sobre essas divs perdidas no meio da lista (ul) usada. Um erro grosseiro.
Mas, quando se olha para esse layout, o que se percebe? Há uma imagem de destaque na lateral esquerda,  com uma legenda, e na lateral direita uma série de retrancas com títulos, uma com subtítulo e links para as matérias. Existem milt maneiras de se escrever o html para isso, mas, analisando o código escrito originalmente:
- não faz sentido usar um h5 para a legenda da imagem, ainda maais porque não foi usado nenhum outro título nas demais áreas;
- não tem o porque colocar um parágrafo (p) para a imagem;
- não foram usadas tags de títulos (h1 a h6) para os títulos e subtítulos das retrancas.
- uso de atributos deprecados para definir layout inline (width, height)
- bullet usado nas listas (uls) deveria estar no CSS e não no html

Como eu escreveria esse html:

<div id="noticias">
    <div id="imagem">
        <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra"></a>
        <a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a>
    </div>
    <div>
        <h5><a href="#" rel="101" >Votação</a></h5>
        <h6><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></H6>
        <ul>
            
            <li><a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
            <li><a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
            <li><a href="" rel="104" ><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</a></li>
            <li><a href="" rel="105" ><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</a></li>
        </ul>
        <h5><a href="#" rel="1010" >Blog das Eleições</a></h5>
        <h6><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></h6>
        <h5><a href="#" rel="1020" >Notícias</a></h5>
        <h6><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></h6>
        <ul>
            <li><a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
            <li><a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
        </ul>
    </div>
</div>


É lógico que alguns pontos podem ser discutidos, alterados, etc... mas, vendo esse html aqui, quem vê o código entende qual parte do conteúdo tem a sua devida importância: o que é titulo, é título, o que é lista de menu é lista de menu, o que é link é link.

E qual a vantagem?
Leitores de busca e indexação funcionam seguindo a semântica do seu código. Se você tem um título e um texto simples envoltos ambos com uma div, o buscador vai entender que ambos tem a mesma importância; quando você uma um h1 (ou até h7) num título e coloca o texto num parágrafo (p), o buscador entenderá que o título é mais relevante. E isso ajudará e muito na indexação, pode apostar.
Isso, sem contar que escrever o código dessa maneira acelera o processo de manutenção do html - principalmente quando ele é trabalhado por equipes - e diminui o peso do html final (com isso, gera menos consumo no tráfego de dados do seu servidor).
Ou seja, todo mundo ganha!

 

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: semantica, html, w3c

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Guilherme Serrano

27/10/2008 09:28:00

E quando se fala de semântiva vale lembrar os microformats, que eu acredito que logo irão ser bastante importantes para os buscadores (e possíveis api´s utilizando sites de conteúdo).

Começo a divagar e filosofar e penso que num futuro (bem breve) qualquer página será um organizado banco de dados. (ok, eu conheço xml mas enfim...)


E agora comentando os códigos:
<div class="linha"></div>

haha, <hr /> para quê né?
Meio bizarro, esses códigos parece eu quando comecei a me livrar das tabelas. Fazia tudo em CSS mas pensava em tabelas, para cada elemento que ia colocar criava uma div. Um verdadeiro inferno... :P

[Responder este comentário]

Willian
[www]

11/11/2008 11:42:00

bom o texto, só não concordo com uma parte:

"...Mas, de qualquer forma, todo mundo vai entender o contexto global..."

não é bem assim, a semântica no html serve exatamente para que todos entendam (buscadores, leitores de tela, etc), e se você tiver um código esdrúxulo os leitores de tela, buscadores, e outros, não entederão o que exatamente o seu código significa.

valeu

[Responder este comentário]

Chris Benseler
[www]

11/11/2008 15:56:00

Entendo o que você disse, William; talvez eu me expressei mal: quis dizer que independente de como, os browsers conseguiriam renderizar o código, de uma forma ou de outra.

Willian
[www]

11/11/2008 23:23:00

eu entendi cara, foi só um ponto que achei importante esclarecer. valeu

[Responder este comentário]
Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 1 + 2?




web tracker