Existe uma maneira de criar sua própria tag html em HTML5?


114

Eu quero criar algo como

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Isso pode ser feito em HTML5? Eu sei que posso fazer isso com

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

mas é muito menos legível :(


2
O que você está tentando fazer? o que você está procurando provavelmente poderia ser resolvido por divs com classnames
geowa4

11
Você também pode dar uma olhada em XML + XSLT para ver se isso se adapta melhor às suas necessidades. Isso permite que você transforme (a parte xslt) um documento XML (seu) em outro (html)
Michael Haren

1
Uau, eu postei isso há muito tempo:) Considerando o desempenho de getElementById () em comparação com a captura por nome de tag e como coisas como SVG fornecem um novo conjunto de funcionalidades junto com sua semântica, acho que as tags personalizadas têm menos utilidade do que eu pode ter pensado originalmente. Obrigado a todos por todos os comentários e respostas atenciosos!
Costa


Respostas:


155

Você pode usar tags personalizadas em navegadores, embora não sejam HTML5 (consulte Os elementos personalizados são válidos para HTML5? E as especificações do HTML5 ).

Vamos supor que você deseja usar um elemento de tag personalizado chamado <stack>. Aqui está o que você deve fazer ...

PASSO 1

Normalize seus atributos em sua folha de estilo CSS (pense em redefinir CSS) - Exemplo:

 stack{display:block;margin:0;padding:0;border:0; ... }

PASSO 2

Para fazê-lo funcionar em versões antigas do Internet Explorer, você precisa anexar este script ao cabeçalho (importante se você precisar que funcione em versões anteriores do IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Então você pode usar sua tag personalizada livremente.

<stack>Overflow</stack>

Sinta-se à vontade para definir atributos também ...

<stack id="st2" class="nice"> hello </stack>

21
Absolutamente correto. Não é uma ideia fantástica. Mas absolutamente correto. Você poderia fazer um exército inteiro de suas próprias tags em sua página e torná-las todas compatíveis com versões anteriores do IE6, apenas adicionando um array de todos os nomes de tag que deseja usar e, em seguida, criando cada um dentro de um loop for , no cabeçalho da página, antes de começar a usar qualquer um deles. É assim que o html5shim funciona em primeiro lugar. Esteja preparado para fazer um esforço para estilizá-los no antigo IE. Além disso, embora eu diga que isso é bom para uso interno, não é realmente como eu gostaria de ensinar as pessoas a fazer as coisas. Em absoluto.
Norguard

13
Eu concordo, escrever suas próprias etiquetas não é para os fracos de coração. Certifique-se de testá-lo completamente. Eu gostaria de dizer uma coisa ... não escreva CSS para IE6. Totalmente desperdício de recursos e permite o uso futuro de um produto tão horrível que nem mesmo a Microsoft endossa.
Timothy Perez

2
@alexwells - Chrome, FF, Safari, IE 7-9
Timothy Perez

5
Observação muito importante: embora os navegadores ofereçam suporte à criação de um elemento personalizado, ele não é oficialmente compatível com o padrão HTML5. Tecnicamente , os elementos personalizados são proibidos. Você pode fazer isso e fazer seu HTML parecer bom e semanticamente importante, mas estará quebrando o padrão se o fizer - se se importar. :)
Randolpho

11
Às vezes ... novos padrões precisam ser definidos. ;-)
Timothy Perez

26

Não tenho tanta certeza sobre essas respostas. Como acabei de ler: "AS ETIQUETAS PERSONALIZADAS SEMPRE FORAM PERMITIDAS EM HTML."

http://www.crockford.com/html/

O ponto aqui é que o HTML foi baseado em SGML. Ao contrário do XML com seus doctypes e esquemas, o HTML não se torna inválido se um navegador não conhece uma ou duas tags. Pense em <marquee>. Isso não está no padrão oficial. Portanto, embora o uso torne sua página HTML "oficialmente reprovada", também não a quebra.

Depois, há o <keygen>, que era específico do Netscape, esquecido no HTML4 e redescoberto e agora especificado no HTML5. E também temos atributos de tag personalizados agora, como data-XyZzz = "..." permitidos em todas as tags HTML5.

Portanto, embora você não deva inventar uma salada inteira de marcações personalizadas não especificadas, não é exatamente proibido ter tags personalizadas em HTML. Isso, entretanto, a menos que você queira enviá-lo com um + xml Content-Type ou incorporar outros namespaces XML, como SVG ou MathML. Isso se aplica apenas a HTML confinado a SGML.


2
Também é de interesse aqui: librador.com/2009/10/20/Styling-undefined-tag-names-in-HTML "Você pode usar qualquer nome de tag em HTML, e fará parte do DOM e pode ser estilizado."
mario

5
“Portanto, embora o uso tornasse sua página html" oficialmente reprovada ", também não quebrou a página.” - um, tente estilizar seus elementos inventados no Internet Explorer. Não vai funcionar. Você pode não considerar isso quebrado, mas o fato de que as tags personalizadas são inválidas e não funcionam no Internet Explorer, não vejo como você pode argumentar que elas são “permitidas”.
Paul D. Waite

6
Quero dizer, ele não confirma sua declaração com nada. Só porque Douglas Crockford disse isso, não significa que seja verdade.
Paul D. Waite

8
Isto é o que as especificações dizem: "Esta especificação não define como os agentes de usuário em conformidade tratam ... elementos ... não especificados neste documento. [...] recomendamos o seguinte comportamento: Se um agente de usuário encontrar um elemento, ele não reconhece, ele deve tentar processar o conteúdo do elemento. [...] autores e usuários não devem confiar em um comportamento específico de recuperação de erro "- IMHO, isso significa que Crockfor está errado, pela primeira vez.
user123444555621

4
@Costa: HTML é útil porque é um conjunto de significados acordados para tags. Por exemplo, os navegadores tornam os links clicáveis ​​porque concordamos (por meio da especificação HTML ) que a <a>tag é um link para outra página. Você pode criar sua própria salada de marcação, mas ela não terá significado para ninguém, exceto para você. Para um determinado propósito, isso pode ser bom, mas você não está mais usando HTML.
Paul D. Waite

6

Como Michael sugeriu nos comentários, o que você quer fazer é bem possível, mas sua nomenclatura está errada. Você não está "adicionando tags ao HTML 5", mas criando um novo tipo de documento XML com suas próprias tags.

Fiz isso para alguns projetos em meu último emprego. Alguns conselhos práticos:

  1. Quando você diz que deseja "adicionar isso ao HTML 5", presumo que o que você realmente quer dizer é que deseja que as páginas sejam exibidas corretamente em um navegador moderno, sem ter que fazer muito trabalho no lado do servidor. Isso pode ser feito inserindo uma "instrução de processamento de folha de estilo" no topo do arquivo xml, como <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Substitua "menu.xsl" pelo caminho para a folha de estilo XSL que você criou para converter suas tags personalizadas em HTML.

  2. Advertências: seu arquivo deve ser um documento XML bem formado, completo com cabeçalho XML <xml version = "1.0">. XML é mais exigente do que HTML em coisas como tags incompatíveis. Além disso, ao contrário do HTML, as tags diferenciam maiúsculas de minúsculas. Você também deve se certificar de que o servidor da web está enviando os arquivos com o tipo MIME apropriado "application / xml". Freqüentemente, o servidor da Web será configurado para fazer isso automaticamente se a extensão do arquivo for ".xml", mas verifique.

  3. Grande advertência: por fim, usar a transformação automática XSL dos navegadores, como descrevi, é realmente melhor apenas para depuração e para aplicativos limitados em que você tem muito controle. Usei-o com sucesso ao configurar uma intranet simples no meu último empregador, que era acessada apenas por algumas dezenas de pessoas, no máximo. Nem todos os navegadores suportam XSL, e aqueles que o têm não têm implementações totalmente compatíveis. Portanto, se suas páginas forem liberadas para o "selvagem", é melhor transformá-las todas em HTML no lado do servidor, o que pode ser feito com uma ferramenta de linha de comando ou com um botão em muitos editores de XML.


5

Criar seus próprios nomes de tag em HTML não é possível / não é válido. É para isso que servem XML, SGML e outras linguagens de marcação gerais.

O que você provavelmente quer é

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Ou em vez de <div/>e <span/>algo como <ul/>e <li/>.

A fim de fazer com que pareça e funcione corretamente, basta conectar alguns CSS e Javascript.


5
Não, não é. SGML foi feito para isso muito antes de XML entrar em cena.
Quentin

1
Alguém está usando SGML simples hoje? As pessoas usam HTML ou XML e muitos de seus descendentes, mas nunca vi SGML em liberdade! De qualquer forma, atualizarei minha resposta.
LukeN

Aposto que ainda há algumas pessoas usando Docbook SGML para documentação. Certamente houve muitos poucos anos atrás.
Ken

5

Eu só quero acrescentar às respostas anteriores que há um significado para usar apenas tags de duas palavras para elementos personalizados. Eles nunca devem ser padronizados.


Por exemplo, você quer usar a tag <icon>, porque não gosta <img>e não gosta de <i>nenhum ...

Bem, tenha em mente que você não é o único. Talvez no futuro, w3c e / ou navegadores irão especificar / implementar esta tag.

Neste momento, os navegadores provavelmente implementarão um estilo nativo para esta tag e o design do seu site pode falhar.

Então, estou sugerindo usar (de acordo com este exemplo) <img-icon>.


Na verdade, a tag <menu>é bem definida, ou seja, não é usada, mas definida. Deve conter <menuitem>quais se comportam como <li>.


4

Tags personalizadas podem ser usadas no Safari, Chrome, Opera e Firefox, pelo menos no que diz respeito ao uso delas no lugar de "class = ...".

green {color: green} em css funciona para

<green>This is some text.</green>

Você está correto @chas, mas este método não é recomendado, e virá na categoria de "Hacks e truques" ...
Piyush Kumar Baliyan

2

Para incorporar metadados, você pode tentar usar microdados HTML , mas é ainda mais prolixo do que usar nomes de classe.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

2

Além de escrever uma folha de estilo XSL, como descrevi anteriormente, há outra abordagem, pelo menos se você tiver certeza de que o Firefox ou outro navegador XML completo será usado (ou seja, NÃO o Internet Explorer). Ignore a transformação XSL e escreva uma folha de estilo CSS completa que diga ao navegador como formatar o XML diretamente. A vantagem aqui é que você não teria que aprender XSL, que muitas pessoas consideram uma linguagem difícil e contra-intuitiva. A desvantagem é que seu CSS terá que especificar o estilo de forma muito completa, incluindo o que são nós de bloco, o que são inlines, etc. Normalmente, ao escrever CSS, você pode assumir que o navegador "sabe" que <em>, por exemplo, é um nó embutido, mas não terá nenhuma ideia do que fazer com <dish>.

Finalmente, já se passaram alguns anos desde que tentei fazer isso, mas minha lembrança é que o IE (pelo menos algumas versões anteriores) se recusava a aplicar folhas de estilo CSS diretamente a documentos XML.


Sim, acho que o IE entra em um modo de renderização XML especial e mostra uma versão aprimorada e recolhível do documento XML.
Paul D. Waite

2

O objetivo do HTML é que as tags incluídas na linguagem têm um significado comum, no qual todos no mundo podem usar e basear suas decisões - como o estilo padrão, tornar os links clicáveis ​​ou enviar um formulário ao clicar em um <input type="submit">.

Tags inventadas como as suas são ótimas para humanos (porque podemos aprender inglês e assim saber, ou pelo menos adivinhar, o que suas tags significam), mas não tão boas para máquinas.



1

Como disse Nick, as tags personalizadas não são suportadas por nenhuma versão de HTML.

Mas, não dará nenhum erro se você usar tal marcação em seu HTML.

Parece que você deseja criar uma lista. Você pode usar a lista não ordenada <ul>para criar os elementos rool e usar a <li>tag para os itens abaixo.

Se não é isso que você deseja, especifique exatamente o que deseja. Podemos encontrar uma resposta então.


2
Não vai dar um erro no navegador, mas o IE lida com CSS em tags desconhecidas de maneira estranha.
ceejayoz

Hmmm, agora eu não sabia disso! Eu sabia que os nomes CSS desconhecidos são tratados de forma estranha (isso é um erro). Mas, você tem certeza que ele lida com as tags desconhecidas de forma estranha também? Não é apenas renderizado sem o texto nas <>tags?
Kirtan de

1
você não pode aplicar CSS a elementos desconhecidos no Internet Explorer. Experimente estilizar um <abbr>elemento no IE 7. Não funcionará, porque o IE 7 não implementou <abbr>(embora esteja no padrão!). Dou uma risadinha sombria para mim mesma quando as pessoas dizem cegamente que um código fora do padrão não causará nenhum erro. Como diabos você sabe que não causará nenhum erro? Já é difícil fazer com que o código padrão funcione, quanto mais um código não padrão.
Paul D. Waite

1
Paul, olhe para o html5shim para sua solução. Você não terá o benefício da funcionalidade personalizada, mas se estiver procurando por um contêiner, tudo o que você precisa fazer é abrir um document.createElement ("MyNewTagName"); na cabeça (ou pelo menos acima de onde você deseja que qualquer versão estilizada dessa tag esteja). Crie até mesmo um array deles e itere, criando-os em JS - sem necessidade de anexo DOM, apenas crie um e jogue-o fora. Apenas esteja preparado para estilizá-los como se fossem layout de blocos e 100% desconhecidos.
Norguard


1

Polymer ou X-tags permitem que você crie suas próprias tags html. Baseia-se no "DOM sombra" do navegador nativo.


1

Você pode apenas fazer um estilo css personalizado, isso criará uma tag que tornará a cor de fundo vermelha:

redback {background-color:red;}
 

<redback>This is red</redback>


1

Em algumas circunstâncias, pode parecer que criar seus próprios nomes de tag simplesmente funciona bem.
No entanto, essas são apenas as rotinas de tratamento de erros do seu navegador em ação. E o problema é que diferentes navegadores têm diferentes rotinas de tratamento de erros!

Veja este exemplo.
A primeira linha contém dois elementos inventados whate ever, e eles são tratados de maneira diferente por navegadores diferentes. O texto sai em vermelho no IE11 e no Edge, mas preto em outros navegadores.
Para comparação, a segunda linha é semelhante, exceto que contém apenas elementos HTML válidos e, portanto, terá a mesma aparência em todos os navegadores.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Outro problema com os elementos inventados é que você não sabe o que o futuro reserva. Se você criou um site um par de anos atrás, com nomes de marca como picture, dialog, details, slot, templateetc, esperando que eles se comportam como spans, você está em apuros agora!


1

você pode usar isto:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

0

Eu encontrei este artigo sobre como criar tags HTML personalizadas e instanciá-las. Ele simplifica o processo e o divide em termos que qualquer pessoa pode entender e utilizar imediatamente - mas não tenho certeza se os exemplos de código que contém são válidos em todos os navegadores, portanto, ressalte o emptor e teste completamente. No entanto, é uma ótima introdução ao assunto para começar.

Elementos personalizados: Definindo novos elementos em HTML


-1

<head>
  <lunch>
    <style type="text/css">
      lunch{
        color:blue;
        font-size:32px;
        }
      </style>
    </lunch>
  </head>

<body>
  <lunch>
    This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
    </lunch>
  </body>


Brilhante. Alguma ideia de por que isso não foi votado ou aceito?
rnso
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.