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

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 :(

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>

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.

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.

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.

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>.

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>

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>

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.

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.

Esta não é uma opção em nenhuma especificação HTML :)

Você provavelmente pode fazer o que quiser com <div>elementos e classes, a partir da pergunta não tenho certeza exatamente do que você está procurando, mas não, criar suas próprias tags não é uma opção.

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.

Você pode adicionar atributos personalizados por meio de dados HTML 5 - Atributos. Por exemplo: Mensagem válida para HTML 5. Consulte http://ejohn.org/blog/html-5-data-attributes/ para obter detalhes.

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

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>

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!

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>

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