Acorda pra Web!

Tecnologia que vai mudar nossas vidas, depois do café.

Semântica no HTML - Logomarca não é só texto!

É bem comum ver sites colocando a logomarca marca através do CSS no layout, só que a prática não é muito correta.

Não devemos confundir também a palavra logomarca com logotipo.

Devemos entender direito o que significam alguns elementos que compõe uma marca:

  • Logomarca é uma imagem que identifica uma marca, no caso aqui do blog é aquele relógio em perspectiva no topo.
  • Marca é a representação de uma entidade, seja pelo logotipo, símbolo, uma frase ou qualquer elemento de identificação
  • Logotipo é um texto utilizado para compor o nome da empresa.
  • Símbolo é um elemento que ajuda a identificar uma determinada Marca.

Geralmente a logomarca (o símbolo) carrega um significado consigo, como o relógio aqui do Acorda pra Web tem correlação com “despertar”, “acordar”. Um outro exemplo seria o símbolo do MeioBit que ilustra um meio bit (que eu acho excelente).

Uma prática muito comum é criar o HTML e colocar o nome do site usando a marcação <h1>Nome do Site</h1> e depois escondendo o texto e colocando uma imagem de fundo através do CSS, com a técnica de Image Replacement.

O fato é que quem desabilitar o CSS na página, não verá a sua logomarca (o seu símbolo), assim como ele pode não aparecer em alguns dispositivos portáteis.

Colocar a logomarca o símbolo através da tag <img src="logo.jpg" title="Nome do Site" alt="Nome do Site"> é uma maneira prática, correta e segura de sempre garantir que a logomarca (o símbolo) seja exibido e marcado corretamente.

Se você nem liga para quem habilita ou não o CSS em suas páginas ou não tem foco em usuários de portáteis, tanto faz, mas deixo aqui minha pequena dica, que é só um complemento dessa dica aqui dada pelo Elcio.

Atualização: Fui corrigido por diversos blogueiros sobre o uso da palavra “logomarca”, tentei consertar na medida do possível! :) Meu post foi sobre semântica no HTML e não sobre termos de mercado, termos esses que confesso: desconheço totalmente. Agradeço pelos esclarecimentos e comentários!

5 Respostas para “Semântica no HTML - Logomarca não é só texto!”

  1. Canha diz:

    Não tinha pensado nisso antes…
    Mas uma coisa: logomarca não existe. Existe logotipo (que é a marca mais a tipografia), logo ou marca (que é o desenho que identifica a empresa, no caso o relóginho). Logomarca seria uma redundância no caso. Mas esse tema é bastante discutido.
    Dá só uma olhada:
    http://www.google.com.br/search?hl=pt-BR&q=logomarca+logotipo+logo+diferen%C3%A7a&meta=

    Abraços.

  2. Emanuel Felipe .NET diz:

    Parem de dizer "logomarca"!…

    Hoje em minha leitura matinal de feeds, deparo-me com um artigo em especial na Comunidade Tableless, entitulado Semântica no HTML - Logomarca não é só texto! onde notei duas definições equivocadas:

    Logomarca &e…

  3. Aguinelo Pedroso diz:

    Bem observado e postado Alexandre, é importante manter compatibilidade com os mais diversos meios, sendo móveis ou não, até mesmo com a questão do CSS desabilitado.

  4. Guilherme diz:

    só de passagem… eu não sou leigo em web, mas não entendo porque tantos bloggers (principalmente esses metidos a webstandarders) gostam de ficar riscando textos…

    ISSO É O CÚMULO DO RÍDICULO… !!!

    eu que entendo alguma coisinha de web (porém não desenvolvo) não entendo, um LEIGO que está lendo o texto ia ENTENDER porque tanta coisa está RISCADA, como neste post ????????????????? você está voltando atrás no que disse, ou algo assim, o que foi? vi o que alguns comentaram, e parece ter sido isso mesmo, mas não seria melhor logo apagar ou substituir ?!? o texto perde toda a credibilidade… !!!

  5. Alexandre diz:

    Risquei porque cometi erros e quero deixar claro e transparente para os meus leitores isso.

    Quando uma pessoa inteligente não entende algo ela estuda, não critica.

    Credibilidade se ganha com boas idéias e transparência, não com insultos e péssima educação como a sua.

Deixar um Comentário

XHTML: Você pode usar essas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>