Os elementos personalizados são HTML5 válidos?


181

Não consegui encontrar uma resposta definitiva para saber se as tags personalizadas são válidas no HTML5, assim:

<greeting>Hello!</greeting>

Não encontrei nada de uma forma ou de outra:

http://dev.w3.org/html5/spec/single-page.html

E as tags personalizadas parecem não validar com o validador W3C.


2
Talvez você não queira colocar muito estoque em um artigo em HTML5 escrito há mais de 4,5 anos.
Jessegavin

9
O artigo de Crockford é estranho. A frase importante é "Esta é a minha proposta para um HTML 5 mais gentil e gentil". Em outras palavras, esse não é o HTML5 que conhecemos hoje, mas uma proposta para um HTML 5 diferente como sucessor do HTML 4. Estranho, porque é datado de novembro de 2007, quando o W3C já estava trabalhando no HTML5 há quase um ano . Seu uso da palavra "permitido" aqui é confuso. As tags personalizadas nunca foram "em conformidade" / "válidas", mas os analisadores de navegador continuam trabalhando em sua presença. De qualquer forma, a proposta de Crockford não ganhou força. Quase nenhuma parte está incorporada ao HTML5.
Alohci

3
Os elementos personalizados estão se tornando de primeira classe agora que o padrão emergente W3 para os Elementos Personalizados dos Componentes da Web está começando a chegar ao Firefox e Chrome: dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/…
csuwldcat

3
Quanto a Douglas Crockford, estou tentado a acreditar em tudo o que ele diz.
wnrph

1
Mesa de suporte ao navegador Web para elementos personalizados caniuse.com/#feat=custom-elements
Adrien Seja

Respostas:


169

A especificação de elementos personalizados está disponível no Chrome e Opera e está disponível em outros navegadores . Ele fornece um meio de registrar elementos personalizados de maneira formal.

Elementos personalizados são novos tipos de elementos DOM que podem ser definidos pelos autores. Diferentemente dos decoradores , que são sem estado e efêmeros, os elementos personalizados podem encapsular o estado e fornecer interfaces de script.

Os elementos personalizados fazem parte de uma especificação W3 maior chamada Componentes da Web , juntamente com Modelos, Importação de HTML e Sombra DOM.

Os Componentes da Web permitem que os autores de aplicativos da Web definam widgets com um nível de riqueza visual e interatividade impossível apenas com CSS, e facilidade de composição e reutilização não é possível atualmente nas bibliotecas de scripts.

No entanto, a partir deste excelente artigo no Google Developers sobre o Custom Elements v1:

O nome de um elemento personalizado deve conter um hífen ( -). Assim <x-tags>, <my-element>e <my-awesome-app>são todos nomes válidos, enquanto <tabs>e <foo_bar>não são. Este requisito é para que o analisador HTML possa distinguir elementos personalizados de elementos regulares. Ele também garante compatibilidade direta quando novas tags são adicionadas ao HTML.

Alguns Recursos


3
Essa é uma boa resposta (+1), mas a regra é um pouco circular. "Os usuários não devem fazer coisas que não são permitidas ..."
Alohci

8
@Alohci, você deveria ter adicionado as próximas 3 palavras à sua citação: "por esta especificação".
Jessegavin

1
Eu também li essa parte das especificações, e isso realmente me confundiu. Eis o porquê: 1) atributos personalizados são permitidos no HTML5. Isso confirma a observação circular de Alochi. 2) Em nenhum lugar as especificações dizem que elementos personalizados não são permitidos.
d13

Esta citação é vaga, na melhor das hipóteses. Certamente o W3C tem uma postura mais concreta, de um jeito ou de outro?
Flash

2
Esse link para customelements.io não é mais útil. Você se importaria de atualizá-lo / removê-lo?
Nisarg 29/11

22

É possível e permitido:

Os agentes de usuários devem tratar elementos e atributos que eles não entendem como semanticamente neutros; deixando-os no DOM (para processadores DOM) e estilizando-os de acordo com CSS (para processadores CSS), mas sem inferir nenhum significado deles.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Mas, se você deseja adicionar interatividade, precisará tornar seu documento inválido (mas ainda totalmente funcional) para acomodar os 7 e 8 do IE.

Consulte http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (meu blog)


Parece que você não leu toda a seção. Não é apenas principalmente sobre atributos , mas também desencoraja fortemente a personalização.
Andrew Barber

Repetindo meus outros comentários, sim, desculpe-me por não indicar que é meu blog. Eu assumi que isso era óbvio. O artigo é diretamente relevante. E acrescentarei que não serve como referência para fazer backup de qualquer "reivindicação" apresentada, mas para mostrar em formato mais longo como fazê-lo para que funcione.
Svidgen 17/10/12

1
O ponto é simplesmente o seguinte: a especificação permite explicitamente essas coisas. E na maioria dos contextos de comportamento desencorajador , a especificação está falando claramente com os fornecedores de agentes do usuário, não com os autores de HTML.
Svidgen 17/10/12

3
Esta declaração citada acima parece ter sido removida na versão mais recente do w3.org/TR/html5/introduction.html#extensibility . Até o momento, ainda não consigo encontrar nenhuma documentação sobre se o uso de elementos HTML personalizados não hifenizados pode ser válido ou não ou se você precisa de instruções JS para validar elementos HTML personalizados hifenizados ( html5rocks.com/en/tutorials/webcomponents/ customelements ).
John Slegers

@JohnSlegers Sim, parece que a documentação e / ou a ancoragem foi reorganizada um pouco. Eu atualizei o link. A citação na minha resposta está localizada na parte inferior da seção de extensibilidade vinculada .
svidgen

14

NB A resposta abaixo estava correta quando foi escrita em 2012. Desde então, as coisas mudaram um pouco. A especificação HTML agora define dois tipos de elementos personalizados - "elementos personalizados autônomos" e "elementos internos personalizados". O primeiro pode ir a qualquer lugar onde se espera conteúdo de frases; que é a maioria dos lugares dentro do corpo, mas não por exemplo, filhos de elementos ul ou ol ou em elementos de tabela que não sejam elementos td, th ou caption. O último pode ir aonde quer que o elemento que eles estendem possa ir.


Isso é realmente uma consequência do acúmulo do modelo de conteúdo dos elementos.

Por exemplo, o elemento raiz deve ser um htmlelemento.

O htmlelemento pode conter apenas um elemento head seguido por um elemento body.

O bodyelemento pode conter apenas conteúdo de Fluxo onde o conteúdo de fluxo é definido como os elementos: a, abbr, endereço, área (se for um descendente de um elemento do mapa), artigo, aparte, áudio, b, bdi, bdo, blockquote, br, botão, tela, citar, código, comando, datalist, del, detalhes , dfn, div dl, em, embed, fieldset, figura, rodapé, formulário, h1, h2, h3, h4, h5, h6, cabeçalho, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, etiqueta, mapa, marca, matemática, menu, medidor, nav, noscript, objeto, ol, saída, p, pré, progresso, q, rubi, s, samp, script, seção, selecionar, pequeno, extensão, forte, estilo ( se o atributo de escopo estiver presente), sub, sup, svg, table, textarea, time,u, ul, var, vídeo, wbr e texto

e assim por diante.

Em nenhum momento o modelo de conteúdo diz "você pode colocar quaisquer elementos que desejar neste", o que seria necessário para elementos / tags personalizados.


Ok, então podemos assumir que, se os elementos personalizados não forem mencionados, eles também não serão permitidos. Isso parece justo o suficiente.
d13 24/03

4
Esta resposta agora é inválido, o padrão componentes W3 Custom Web Elements emergente está começando a terra em navegadores agora: dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/...
csuwldcat

1
@csuwldcat - Na verdade não. O padrão HTML5 ou posterior ainda precisará ser atualizado de alguma forma para permitir que esses elementos personalizados se tornem parte de seu modelo de conteúdo. É uma notícia interessante. Em quais navegadores posso usá-los?
Alohci

3
@Alochi - obviamente, qualquer outra especificação com linguagem antiga precisará ser atualizada para refletir essa nova realidade, mas o HTML é um padrão de vida e não bloqueia outras especificações - as atualizações serão feitas assim que passarmos para os próximos estágios do padrão faixa. Você pode brincar com implementações nativas do Web Components no Chrome Canary e, em breve, no Firefox Aurora. Além disso, existem polyfills disponíveis para três das quatro especificações de componentes da Web que funcionam muito bem em todos os navegadores moderados de hoje - isso inclui as especificações / recursos de elementos personalizados.
csuwldcat

Então, elementos personalizados podem ser colocados em determinados lugares? Ou você está dizendo que eles não são permitidos?
MELAB

12

Elementos e atributos personalizados básicos

Os elementos e atributos personalizados são válidos em HTML, desde que:

  • Os nomes dos elementos são minúsculos e começam com x-
  • Os nomes dos atributos são minúsculos e começam com data-

Por exemplo, <x-foo data-bar="gaz"/>ou <br data-bar="gaz"/>.

Uma convenção comum para elementos é x-foo; x-vendor-featureé recomendado.

Isso lida com a maioria dos casos, pois é raro que um desenvolvedor precise de todo o poder necessário para registrar seus elementos. A sintaxe também é adequadamente válida e estável. Uma explicação mais detalhada está abaixo.

Atributos e elementos personalizados avançados

A partir de 2014, há uma maneira nova e muito aprimorada de registrar elementos e atributos personalizados. Ele não funciona em navegadores mais antigos, como o IE 9 ou o Chrome / Firefox 20. Mas permite que você use a HTMLElementinterface padrão , evite colisões, use nomes que x-*não sejam e que não sejam data-*nomes e defina comportamento e sintaxe personalizados para o navegador respeitar . Requer um pouco de JavaScript sofisticado, conforme detalhado nos links abaixo.

Rochas HTML5 - Definindo novos elementos em HTML
WebComponents.org - Introdução aos elementos personalizados
W3C - Componentes da Web: elementos personalizados

Sobre a validade da sintaxe básica

O uso data-*de nomes de atributos personalizados é perfeitamente válido há algum tempo e até funciona com versões mais antigas do HTML.

W3C - HTML5: extensibilidade

Quanto aos nomes de elementos personalizados (não registrados), o W3C recomenda fortemente contra eles e os considera não-conformes. Mas são necessários navegadores para suportá-los, e os x-*identificadores não entrarão em conflito com as especificações HTML futuras e os x-vendor-featureidentificadores não entrarão em conflito com outros desenvolvedores. Um DTD personalizado pode ser usado para solucionar qualquer navegador exigente.

Aqui estão alguns trechos relevantes dos documentos oficiais:

"As especificações aplicáveis ​​PODEM definir o novo conteúdo do documento (por exemplo, um elemento foobar) [...]. Se a sintaxe e a semântica de um documento HTML5 em conformidade não forem alteradas pelo uso das especificações aplicáveis, esse documento permanecerá um HTML5 em conformidade documento."

"Os agentes de usuários devem tratar elementos e atributos que eles não entendem como semanticamente neutros; deixando-os no DOM (para processadores DOM) e modelando-os de acordo com CSS (para processadores CSS), mas sem inferir nenhum significado deles."

"Os agentes do usuário não são livres para lidar com documentos não conformes como bem entenderem; o modelo de processamento descrito nesta especificação se aplica às implementações, independentemente da conformidade dos documentos de entrada."

"A interface HTMLUnknownElement deve ser usada para elementos HTML que não são definidos por esta especificação."

W3C - HTML5: conformidade de documentos
WhatWG - HTML Standard: Elementos DOM


11

Eu gostaria de salientar que a palavra "válido" pode ter dois significados diferentes nesse contexto, sendo que um deles é potencialmente, um, válido.

  1. Um documento HTML com tags personalizadas deve ser considerado HTML5 válido? A resposta para isso é claramente "não". A especificação lista exatamente quais tags são válidas em quais contextos. É por isso que um validador HTML não aceita um documento com tags personalizadas ou com tags padrão nos lugares errados (como uma tag "img" no cabeçalho).

  2. Um documento HTML com tags personalizadas será analisado e renderizado de maneira padrão e claramente definida nos navegadores? Aqui, talvez surpreendentemente, a resposta seja "sim". Embora o documento não seja tecnicamente considerado válido como HTML5 válido, a especificação HTML5 especifica exatamente o que os navegadores devem fazer quando virem uma tag personalizada: em resumo, a tag personalizada age como uma <span>- não significa nada e não faz nada por padrão, mas pode ser estilizado por HTML e acessado por javascript.


5

Os elementos HTML personalizados são um padrão emergente do W3 no qual tenho contribuído, permitindo que você declare e registre elementos personalizados com o analisador. Você pode ler as especificações aqui: Especificação de elementos personalizados do W3 Web Components . Além disso, a Microsoft suporta uma biblioteca (escrita por ex-desenvolvedores da Mozilla), chamada X-Tag - facilita ainda mais o trabalho com os Componentes da Web.


1
Este rascunho foi aprovado?
Starx

Porções são desembarque no Firefox e Chrome - estamos a trabalhar em conjunto e esperamos ter implementações completas desembarcou até o final de 2013.
csuwldcat

1
Agora em 2014, chegaram as implementações completas?
Hasib Mahmud

1
@JamieHutber e veja suas páginas da Web nos navegadores mais recentes daqui a um ano. Regra nº 1 para interoperabilidade do navegador: siga as regras.
Sr. Lister

1
@HasibMahmud, as especificações agora estão finalizadas e chegarão ao Chrome Beta em algumas semanas, e o Firefox Aurora em ~ 6 semanas. Você pode usá-los hoje no Firefox Aurora lançando o sinalizador de configuração dom.webcomponents.enabledpara true.
Csuwldcat

4

Para fornecer uma resposta atualizada, refletindo as páginas modernas.

Tags personalizadas são válidas se,

1) Eles contêm um traço

<my-element>

2) Eles são XML incorporados

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Isso pressupõe que você esteja usando o doctype HTML5 <!doctype html>

Considerando essas restrições simples, agora faz sentido fazer o possível para manter sua marcação HTML válida (pare de fechar as tags como <img>e <hr>, é tolo e incorreto, a menos que você use um doctype XHTML, do qual provavelmente não precisa).

Como o HTML5 define claramente as regras de análise, um navegador compatível poderá lidar com qualquer tag que você lançar, mesmo que não seja estritamente válida.


3

Citando a seção Extensibilidade da especificação HTML5 :

Para recursos no nível de marcação que podem ser limitados à serialização XML e não precisam ser suportados na serialização HTML, os fornecedores devem usar o mecanismo de espaço para nome para definir espaços para nome personalizados nos quais os elementos e atributos não padrão são suportados.

Portanto, se você estiver usando a serialização XML do HTML5, é legal fazer algo assim:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

No entanto, se você estiver usando a sintaxe HTML, ficará muito mais limitado no que poderá fazer.

Para os recursos em nível de marcação destinados ao uso com a sintaxe HTML, as extensões devem ser limitadas a novos atributos do formato "x-vendor-feature" [...] Novos nomes de elementos não devem ser criados.

Mas essas instruções são direcionadas principalmente aos fornecedores de navegadores, que supostamente forneceriam estilo visual e funcionalidade para quaisquer elementos personalizados que escolherem criar.

Para um autor, no entanto, embora possa ser legal incorporar um elemento personalizado na página (pelo menos na serialização XML), você não receberá nada além de um nó no DOM. Se você deseja que seu elemento personalizado realmente faça algo ou seja renderizado de alguma maneira especial, verifique a especificação de Elementos Personalizados .

Para obter uma cartilha mais suave sobre o assunto, leia a Introdução aos componentes da Web , que também inclui informações sobre o Shadow DOM e outras especificações relacionadas. Essas especificações ainda estão em rascunhos no momento - você pode ver o status atual aqui - mas estão sendo ativamente desenvolvidas.

Como exemplo, uma definição simples para um greetingelemento pode ser algo como isto:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Isso indica ao navegador para renderizar o conteúdo do elemento entre aspas e prefixado pelo texto "Simon says:", que é estilizado com a cor cinza. Normalmente, uma definição de elemento personalizada como essa seria armazenada em um arquivo html separado que você importaria com um link.

<link rel="import" href="greeting-definition.html" />

Embora você também possa incluí-lo em linha, se desejar.

Eu criei uma demonstração de trabalho da definição acima usando a biblioteca Polyfill Polyfill, que você pode ver aqui . Observe que isso está usando uma versão antiga da biblioteca Polymer - as versões mais recentes funcionam de maneira bastante diferente. No entanto, com as especificações ainda em desenvolvimento, isso não é algo que eu recomendaria usar no código de produção de qualquer maneira.


2

basta usar o que quiser, sem qualquer declaração dom

<container>content here</container>

adicione seu próprio estilo (display: block) e ele funcionará com qualquer navegador moderno


1

data-*atributos são válidos no HTML5 e, mesmo no HTML4, todos os navegadores usados ​​para respeitá-los. Adicionar novas tags é tecnicamente aceitável, mas não é recomendado apenas porque:

  1. Pode entrar em conflito com algo adicionado no futuro e
  2. Torna o documento HTML inválido, a menos que seja adicionado dinamicamente via JavaScript.

I usar tags personalizados apenas em locais que o Google não se importa, para ecample em um iframe motor de jogo, eu fiz um <log>tag que continha <msg>, <error>e <warning>- mas através de JavaScript somente. E foi totalmente válido, de acordo com o validador. Até funciona no Internet Explorer com seu estilo! ;]


1
Era válido para o validador porque você estava criando esses elementos com JavaScript e o validador não os viu porque não executa seu JavaScript. Ele só veria a página como aparece quando carregada pela primeira vez.
animuson

Exatamente. Embora o HTML não seja válido, as tags personalizadas ainda são SGML válidas e, afinal, o HTML é SGML. O CSS pode ser usado para estilizar tags personalizadas e funciona perfeitamente no IE. :) Além disso, você pode especificar seu próprio DTD com seus próprios elementos personalizados em sua especificação DOCTYPE, para que minhas tags personalizadas possam ser validadas mesmo sem JavaScript - mas não me importo com elas - um sistema de GUI de mecanismo de jogo definitivamente não é o Google job :)
Enviado em

1
Bem, há um problema. Você não pode simplesmente jogar elementos personalizados de maneira desagradável. Você precisa defini-los e registrá-los no DTD para que eles considerem o HTML "válido". Só porque algo funciona não significa que é válido.
animuson

Se você apenas adicionar um qualificador aos nomes de seus elementos, como <x-msg>, <x-log>, etc., estará em conformidade com a especificação de Componentes da Web / Elementos Personalizados.
Neil Monroe

Em um mecanismo de jogo em que o Webkit está lá apenas para renderizar sua GUI dinâmica, ninguém se importa também com as DTDs. Qualquer tag desconhecido para HTML é HTMLUnknownElement para JS, ainda trabalhando perfeitamente com JQuery e CSS, para que o seu GUI recebe alguns semântica no final: <inventory>, <item type="potion" sprite="2">- por isso é melhor para ser chamado SGML + CSS em vez de HTML, apesar de que os elementos HTML que possuem definição trabalhe como está - Botões, listas, ... #
31416 Пеъ

1

Tags personalizadas não são válidas em HTML5. No entanto, atualmente, os navegadores oferecem suporte para analisá-los e você também pode usá-los usando o css. Portanto, se você quiser usar tags personalizadas para os navegadores atuais, poderá. Mas o suporte pode ser retirado quando os navegadores implementarem os padrões W3C estritamente para analisar o conteúdo HTML.


1
Talvez isso aconteça quando eles pararem de apoiar <center>e <marquee>?
Ravenstine

1

Sei que essa pergunta é antiga, mas tenho estudado esse assunto e, embora algumas das afirmações acima estejam corretas, elas não são a única maneira de criar elementos personalizados. Por exemplo:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

funcionaria perfeitamente bem (nas versões mais recentes do Google Chrome, IE, FireFox e Safari móvel até agora). Tudo o que você precisa é apenas de um caractere alfa (az, AZ) para iniciar a tag e, em seguida, você pode usar qualquer um dos caracteres não alfa depois. Se em CSS, você deve usar o "\" (barra invertida) para encontrar o elemento, como seria necessário Query \ ^ {...}. Mas em JS, você apenas chama como vê. Espero que isto ajude. Veja o exemplo aqui

-Mink CBOS


3
Este é o HTML mais estranha que eu vi ultimamente :)
Dan Dascalescu
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.