4

Gostaria de saber quais são as diferenças entre um elemento para uma tag em HTML.

Exemplo 1

O exemplo abaixo é um elemento ou uma tag?

<p></p>

Exemplo 2

E no exemplo abaixo é tag ou elemento?

<p>Esse é um parágrafo</p>

Também gostaria de saber a diferença entre um documento HTML para uma página.

2 Respostas 2

5

Página x Documento

Vc pode ter um documento HTML que nem é uma página, pode ser um email marketing por exemplo, ou pode ser só uma fração de um documento (mas com a extensão .html/.htm), sem precisar ter o doctype declarado. Essa fração de HTML não é uma página propriamente dita e pode ser usada como um "componente" em outro documento. Então veja que vc pode ter um arquivo HTML, mas sem um <!DOCTYPE html> declarado...

Lembrando que se vc não declarar o doctype do HTML ele vai ser interpretado em quirks mode pelo navegador

Já uma tag HTML pode ser por exemplo as meta tags ou o head, que são tags de marcação HTML, mas que não renderizam visualmente na página.

Esses são os tipos de conteúdo HTML comuns

inserir a descrição da imagem aqui

Conteúdo de metadados normalmente são "tags apenas" ex: <base>, <command>, <link>, <meta>, <noscript>, <script>, <style> e <title>.

Já tags os Flow Contentes, Phrasing Content Headers e Tags Semânticas normalmente são elementos HTML que ficam visíveis na tela para o usuário.

Esse link pode te interessar: https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo


Uma tag HTML não precisa ter conteúdo para ser um "elemento", mesmo vazia ela é um elemento, e ainda pode ser acessada no DOM pelo CSS ou JS

Veja nesse exemplo que usando CSS, a div:empty tem o background diferente da div que tem conteúdo dentro...

div {
  width:100px;
  height:100px;
  background: blue;
}
div:empty {
  background: red;
}
<div></div>

<div>Esse é um parágrafo</div>

6
  • Valeu! mas no caso dos meus exemplos quem é quem? ou então elemento é a mesma coisa que tag e vice versa?
    – user174204
    Commented 9/01/2020 às 14:47
  • 2
    @joãobatista elemento todos são, pois todos representam algo, mesmo que o usuário não veja na tela. Então tudo é tag, e tudo é elemento, o que varia é o tipo de elemento, e se é um elemento a nível de interface (visível na tela), ou a nível de código (só visível para os interpretadores de HTML). O código do seu exemplo não faz muito sentido, ali vc tem uma tag HTML, que em um caso está vazia :empty, ou com um conteúdo dentro. A tag não precisa ter conteúdo para ser um elemento como vc pode ver na resposta. Qq coisa fala ai
    – hugocsl
    Commented 9/01/2020 às 14:51
  • 1
    @joãobatista editei a resposta, veja ai no finalzinho dela, como eu usei o seu código e CSS para estilizar um elemento vazio
    – hugocsl
    Commented 9/01/2020 às 14:55
  • Muito obrigado, hugocsl! ajudou muito mesmo, outra duvida que ficou a respeito da minha pergunta, foi em um site que eu tinha visto que falava que documento HTML é o arquivo com .html já a página seria a parte visível que o usuário vai ver quando acessa o site, isso está certo? ou via de regra tudo é a mesma coisa? documento html é mesma coisa que página?
    – user174204
    Commented 9/01/2020 às 15:08
  • 2
    @joãobatista dependendo do contexto pode está certo o que vc viu, mas eu acredito estar errado, pois vc pode ter tag HTML dentro de arquivos, .PHP, .JS, .ASP, e por ai vai... não precisa ser um .HTML para ter tags HTML. Vc pode ter um HTML em um .TXT, e usar outra linguagem para pegar esse HTML e colocar em uma página. Além disso, uma página pode ser .PHP, nem precisa ser .HTML rss, já ao meu ver um documento HTML só é HTML mesmo se tiver o <!DOCTYPE html> declarado dentro dele, independente se é uma página ou uma fração de código solta
    – hugocsl
    Commented 9/01/2020 às 15:24
4

Me parece que é o que está a partir de < até o >, assim como tem tag de abertura:

<nomedatag>

E tag de fechamento

</nomedatag>

E o elemento se englobaria da tag de abertura até a tag de fechamento, então o elemento seria isto tudo (tendo conteúdo ou não):

<nomedatag>Conteudo</nomedatag>

Neste caso o elemento pode conter mais tags e textos (textos também são considerados "nós/nodes"), elemento me parece que é algo considerado pelo interpretador (como um "parser") ou motor de renderização, neste caso obteria como elemento mesmo, mas posso estar enganado sobre este ultimo ponto.

Vale lembrar que existem os elementos do tipo "void", que não possuem tag de fechamento, como exemplos:

  • <input>
  • <br>
  • <hr>

Nestes casos a compreensão é que a partir de < até o > seria a tag e também o elemento.

Eu nem estou assumindo aqui navegadores apenas, porque um interpretador pode não ser de um navegador, pode ser por exemplo o:

Que fazem a interpretação do documento e pode-se obter o "elemento", já o tipo de conteudo (por exemplo em Phrasing content) é irrelevante para se determinar o que é o elemento, porque o conteúdo apenas faz parte dele, e não muda o que é elemento.


Documento HTML pode se referir:

  • a própria página
  • a um arquivo HTML estático
  • Ou simplesmente ao "DOM processado" pelo motor (interpretador de HTML)

Agora "página" em si me parece um termo genérico, podendo ser de diferentes formatos, tanto HTML quanto outros tipos de página como exemplos:

  • swf ("morto", era o flash)
  • imagens
  • pdf

Claro que os motores geralmente processam um pré-html para embarcar tipos de documentos diferentes, mas isto é um recurso do navegador e não uma regra

Você deve fazer log-in para responder a esta pergunta.