6

Estava olhando alguns sites e percebi algumas tags que não são padrões como <div> <span> etc...

Então resolvi testar e vi que essas tags funcionam normalmente com css e javascript, mas isso me deixou com uma duvida. Há algum problema em usar essas tags e atributos "inventados"?

var el = document.getElementsByTagName("nomedatag")[0];
el.textContent = el.getAttribute("nomedoatributo");
nomedatag{
  display:block;
  width:150px;
  height:150px;
  background-color:#333;
  color:#fff;
}
<nomedatag nomedoatributo="Texto"></nomedatag>

2 Respostas 2

7

Se vc testar um custom elements desses no validador de código da própria W3C vc vai ver que vai retornar um erro:

inserir a descrição da imagem aqui

Link para vc mesmo testar: https://validator.w3.org/#validate_by_input


Propriedades do user-agent

A maioria das tag como <div>, <label>, etc possuem atributos default definidos pelo próprio user-agent como por exemplo display:block na div. Já um custom element como <teste> não vai receber estilo algum do user-agent, o que na maioria dos casos tb não é muito útil...

inserir a descrição da imagem aqui


Não normativo

Custom Elements ainda são um Draft na especificações do HTML5 como vc pode consultar aqui http://w3c.github.io/webcomponents/spec/custom/

"Embora os autores sempre possam usar elementos não padrão em seus documentos, com o comportamento específico do aplicativo adicionado após o fato por script ou similar, esses elementos têm sido historicamente não-conformes e não muito funcionais."


Boas práticas e Semântica

"Em geral, o nome do elemento a ser alargada não pode ser determinado simplesmente por olhar para o interface do elemento estende-se, como muitos elementos partilham a mesma interface (por exemplo, q e blockquote ambos compartilhando HTMLQuoteElement)."

Para usar nosso elemento interno personalizado, usamos o atributo is em um elemento button:

<button is="plastic-button">Click Me!</button>

Desvantagem de se usar esse tipo de elemento: http://w3c.github.io/webcomponents/spec/custom/#drawbacks-of-autonomous-custom-elements

  • Mal gerenciamento do tabindex
  • Semântica comprometida, necessita de role e aria atributos, diferente de um article, section, etc que já têm uma semântica intrínseca da própria tag
  • Não tem os estilos do user-agent
3

No HTML5, o uso de tags "inventadas" não é recomendado, exceto se você estiver usando tecnologias como WebComponents. Saiba mais sobre eles aqui.

Em relação às tags da especificação do HTML (como <div>, <span>, <section>, etc), você pode criar atributos personalizados desde que eles sigam o padrão data-*, por exemplo:

<span data-person-age="16">Luiz Felipe</span>

Caso contrário, irá quebrar a validação do HTML do seu site.

1
  • 1
    Eu fiquei maravilhado na época do lançamento do HTML5 com o atributo data-* . A partir daí passei a usar muito ela para controles específicos de tags em conjunto com o jQuery para manipulação visual dos sistemas que desenvolvi. Commented 8/05/2019 às 11:59

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .