É importante conhecer a nomenclatura correta e, principalmente, usá-la corretamente, quando tratamos de um determinado assunto.

Uma nomenclatura freqüentemente confundida pelos usuários é a do HTML. É comum ouvir (ou pior, ler) pessoas dizendo, por exemplo, “tag alt”. Isso está errado.

Mas, então, o que é uma tag, o que é um atributo e o que é um elemento em HTML? Simples. Vamos lá:

Elemento
Um elemento é uma estrutura semântica, composta de: tag de abertura, conteúdo e tag de fechamento.
Um parágrafo, por exemplo, é um elemento. Da seguinte forma:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
Ao encontrar essa estrutura, um user-agent vai entendê-la como sendo um parágrafo. Simples assim.
Tag
Tag é um código usado para marcar o início e, onde for requerido, o fim de um elemento HTML. Há, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura é representada por um sinal de menor (<), um nome de elemento HTML, e um sinal de maior (>) (ex. <p>) e deve ser colocada imediatamente antes do início do conteúdo do elemento. Uma tag de fechamento se diferencia de uma de abertura apenas por uma barra (/) antes do nome do elemento (ex. </p>) e deve ser colocada imediatamente após o fim do conteúdo do elemento.
Atributo
Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo após o nome do elemento, precedido de um espaço e é composto de um nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas (") ou simples (‘)
Um bom exemplo de atributo é o id, que serve para identificar, de maneira única, um elemento dentro de um documento HTML. Exemplo:
<p id="nome">
Outro bom exemplo é o atributo href, usado para definir uma referência de hipertexto (link) em um elemento A ou LINK. Exemplo:
<a href="http://brunotorres.net/">
A “tag alt” referida no início do texto é, na verdade, um atributo, usado para definir um texto, que deve substituir uma imagem, caso a mesma não esteja disponível ou não seja suportada pelo user-agent (alt é abreviatura de “alternate”, que significa “substituto” e não “alternativo”, como se pensa em geral). Exemplo:
<img src="/img/bruno_um_milhao.jpg" alt="Foto do Bruno Torres com um milhão de dólares">.

Como vocês puderam (assim espero) ver, é bem simples distingüir elementos, de tags, de atributos.

O Roger Johanssonescreveu sobre isso, mas na língua de Shakespeare. Aqueles que puderem ler, vale a pena.

Leia também:

10 Comentários sobre “HTML: elementos, atributos e tags”

  1. Emiliano ESB disse:

    … eis que nasce mais uma fabulosa fonte de referências web na língua de Pelé!
    Bacana, Mestre Bruno Torres!
    Aqui, se podia da uma papiada lá com o mestre Eis, e fazerem um blogbits sobre web!!!! Sei que os Blogbits fazem o podcast quando ‘rola’, acho até muito bacana isso!!! Mas acho que você poderiam Gravar alguns programas curtos com alguns assuntos que surgirem, o obasicodaweb por exemplo!!!

    A Paz!!!

    Emiliano

  2. Ranzi disse:

    Cara, parabéns.

    Até um tempo atrás eu sabia relativamentebastante coisa sobre programação, css, outras, mas como terceirizamos o serviço de programação, acabei me afastando de tudo isso.
    Com esse tipo de assunto em pauta em um lugar, bah, cara, que mão na roda.

    Parabéns!!! Sucesso!

  3. Tatiane disse:

    OLá!
    Parabéns! Descobri sem querer o site.

  4. Doufer disse:

    Parabéns pel ótimo trabalho.

  5. Renato disse:

    Estou aqui para parabenizá-lo pelo trabalho, estou estudando há pouco tempo, e está me sendo útil.

  6. Deco disse:

    Parabens Bruno pela iniciativa, os artigos estão otimos. Galera vamos clicar nos anuncios para ajudar a manter o site. Valeu

  7. katia disse:

    eu sei disso tudo mas alguem me ajuda a usar css na atributo “alt”?

  8. Marcos disse:

    Bruno:

    Ó – muito bom o teu site, principalmente para mim que estou no comecinho de um aprendizado.

    Parabéns, viu?

    Caiu como uma luva este teu trabalho; sim, trabalho, pois como disse um dia um sábio, “trabalho somente pode ser considerado com tal quando é uma ocupação útil.” – é o teu caso.

    Uma dica:

    Você poderia colocar sempre algum(ns) pensamento(s)
    no site. Eu penso que as pessoas necessitam de se
    alimentar também de filosofia. Hoje isto é muito raro.
    Ah!, se a maioria dos sites reservassem um espaco para uma frase ao menos, um pensamento! Certamente o mundo começaria a mudar. Você sabe! – podemos encontrar vários e vários pensamentos pelo google da vida.

    Olha, permita-me te dar o exemplo de dois:

    “Semeia um pensamento e colherás um desejo; semeia um desejo e colherás a ação; semeia a ação e colherás um hábito; semeia o hábito e colherás o caráter.”
    (Tihamer Toth)

    “Aquele que tenta pode errar; aquele que não tenta já errou.”
    (Herbert von Karajan)

    Não existe verdadeira inteligência sem bondade.
    (Ludwig van Beethoven)

    Valeu, Bruno.

    Abração!…

    Marcos.

  9. Pam Ben disse:

    Music is the progress of sound to reach the soul for the education of its virtue.

  10. Sara disse:

    Tô com uma dúvida… um elemento pode ter mais de um atributo… se pode, queria saber em que casos

Leave a Reply