¿Hay alguna forma de crear su propia etiqueta html en HTML5?

Quiero crear algo como

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

¿Se puede hacer en HTML5? Sé que puedo hacerlo con

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

pero es mucho menos legible :(

Puede utilizar etiquetas personalizadas en los navegadores, aunque no serán HTML5 (consulte ¿Son los elementos personalizados HTML5 válidos? Y la especificación de HTML5 ).

Supongamos que desea utilizar un elemento de etiqueta personalizado llamado <stack>. Esto es lo que debe hacer ...

PASO 1

Normalice sus atributos en su hoja de estilo CSS (piense en el restablecimiento de css) - Ejemplo:

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

PASO 2

Para que funcione en versiones anteriores de Internet Explorer, debe agregar este script al encabezado (¡Importante si necesita que funcione en versiones anteriores de IE!):

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

Entonces puedes usar tu etiqueta personalizada libremente.

<stack>Overflow</stack>

Siéntase libre de establecer atributos también ...

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

No estoy tan seguro de estas respuestas. Como acabo de leer: "LAS ETIQUETAS PERSONALIZADAS SIEMPRE SE HAN PERMITIDO EN HTML".

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

El punto aquí es que HTML se basó en SGML. A diferencia de XML con sus doctypes y esquemas, HTML no se vuelve inválido si un navegador no conoce una etiqueta o dos. Piense en <marquee>. Esto no ha estado en el estándar oficial. Entonces, aunque usarlo hizo que su página HTML "no aprobara oficialmente", tampoco rompió la página.

Luego está <keygen>, que era específico de Netscape, olvidado en HTML4 y redescubierto y ahora especificado en HTML5. Y ahora también tenemos atributos de etiquetas personalizados, como data-XyZzz = "..." permitido en todas las etiquetas HTML5.

Por lo tanto, si bien no debería inventar una ensalada de marcado personalizada sin especificar, no está exactamente prohibido tener etiquetas personalizadas en HTML. Eso es, sin embargo, a menos que desee enviarlo con un tipo de contenido + xml o incrustar otros espacios de nombres XML, como SVG o MathML. Esto se aplica solo a HTML confinado en SGML.

Como sugirió Michael en los comentarios, lo que quiere hacer es bastante posible, pero su nomenclatura es incorrecta. No está "agregando etiquetas a HTML 5", está creando un nuevo tipo de documento XML con sus propias etiquetas.

Hice esto para algunos proyectos en mi último trabajo. Algunos consejos prácticos:

1. Cuando dice que desea "agregarlos a HTML 5", asumo que lo que realmente quiere decir es que desea que las páginas se muestren correctamente en un navegador moderno, sin tener que hacer mucho trabajo en el lado del servidor. Esto se puede lograr insertando una "instrucción de procesamiento de hoja de estilo" en la parte superior del archivo xml, como <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Reemplace "menu.xsl" con la ruta a la hoja de estilo XSL que creó para convertir sus etiquetas personalizadas en HTML.

2. Advertencias: Su archivo debe ser un documento XML bien formado, completo con encabezado XML <xml version = "1.0">. XML es más exigente que HTML sobre cosas como etiquetas que no coinciden. Además, a diferencia de HTML, las etiquetas distinguen entre mayúsculas y minúsculas. También debe asegurarse de que el servidor web envíe los archivos con el tipo de mime apropiado "aplicación / xml". A menudo, el servidor web se configurará para hacer esto automáticamente si la extensión del archivo es ".xml", pero verifique.

3. Gran advertencia: Finalmente, usar la transformación XSL automática de los navegadores, como he descrito, es realmente mejor solo para depurar y para aplicaciones limitadas en las que tiene mucho control. Lo usé con éxito para configurar una intranet simple en mi último empleador, a la que solo accedieron unas pocas docenas de personas como máximo. No todos los navegadores son compatibles con XSL y los que lo hacen no tienen implementaciones completamente compatibles. Por lo tanto, si sus páginas se van a publicar "salvajes", es mejor transformarlas todas en HTML en el lado del servidor, lo que se puede hacer con una herramienta de línea de comandos o con un botón en muchos editores XML.

No es posible / no es válido crear sus propios nombres de etiquetas en HTML. Para eso sirven XML, SGML y otros lenguajes de marcado generales.

Lo que probablemente quieras es

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

O en lugar de <div/>y <span/>algo como <ul/>y <li/>.

Para que se vea y funcione correctamente, simplemente conecte algo de CSS y Javascript.

Solo quiero agregar a las respuestas anteriores que existe un significado para usar solo etiquetas de dos palabras para elementos personalizados. Nunca deben estandarizarse.

Por ejemplo, quieres usar la etiqueta <icon>, porque no te gusta <img>y tampoco te gusta <i>...

Bueno, ten en cuenta que no eres el único. Quizás en el futuro, w3c y / o navegadores especificarán / implementarán esta etiqueta.

En este momento, los navegadores probablemente implementarán un estilo nativo para esta etiqueta y el diseño de su sitio web podría romperse.

Entonces sugiero usar (de acuerdo con este ejemplo) <img-icon>.

De hecho, la etiqueta <menu>está bien definida, es decir, no se usa tanto, pero está definida. Debe contener <menuitem>cuál se comporta como <li>.

Las etiquetas personalizadas se pueden usar en Safari, Chrome, Opera y Firefox, al menos en lo que respecta a su uso en lugar de "class = ...".

green {color: green} en css funciona para

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

Para incrustar metadatos, puede intentar usar microdatos HTML , pero es incluso más detallado que usar nombres de clases.

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

Además de escribir una hoja de estilo XSL, como describí anteriormente, existe otro enfoque, al menos si está seguro de que se utilizará Firefox u otro navegador XML completo (es decir, NO Internet Explorer). Omita la transformación XSL y escriba una hoja de estilo CSS completa que le indique al navegador cómo formatear el XML directamente. La ventaja aquí es que no tendría que aprender XSL, que muchas personas consideran un lenguaje difícil y contrario a la intuición. La desventaja es que su CSS tendrá que especificar el estilo de manera muy completa, incluyendo qué son los nodos de bloque, qué son en línea, etc. Por lo general, al escribir CSS, puede asumir que el navegador "sabe" que <em>, por ejemplo, es un nodo en línea, pero no tendrá idea de qué hacer con <dish>.

Finalmente, han pasado algunos años desde que probé esto, pero mi recuerdo es que IE (al menos algunas versiones atrás) se negó a aplicar hojas de estilo CSS directamente a documentos XML.

El punto de HTML es que las etiquetas incluidas en el lenguaje tienen un significado acordado, que todos en el mundo pueden usar y basar sus decisiones en, como el estilo predeterminado, hacer que se pueda hacer clic en los enlaces o enviar un formulario al hacer clic en un <input type="submit">.

Las etiquetas inventadas como la suya son excelentes para los humanos (porque podemos aprender inglés y así saber, o al menos adivinar, lo que significan sus etiquetas), pero no tan buenas para las máquinas.

Esta no es una opción en ninguna especificación HTML :)

Probablemente pueda hacer lo que quiera con <div>elementos y clases, de la pregunta no estoy seguro exactamente de lo que está buscando, pero no, crear sus propias etiquetas no es una opción.

Como dijo Nick, las etiquetas personalizadas no son compatibles con ninguna versión de HTML.

Pero, no dará ningún error si usa dicho marcado en su HTML.

Parece que quieres crear una lista. Puede usar la lista desordenada <ul>para crear los elementos de rol y usar la<li> etiqueta para los elementos que se encuentran debajo.

Si eso no es lo que desea lograr, especifique exactamente lo que desea. Entonces podemos encontrar una respuesta.

Puede agregar atributos personalizados a través de HTML 5 data- Attributes. Por ejemplo: Mensaje válido para HTML 5. Consulte http://ejohn.org/blog/html-5-data-attributes/ para obtener detalles.

Las etiquetas de polímero o X le permiten crear sus propias etiquetas html. Se basa en el "DOM de sombra" del navegador nativo.

Puede simplemente hacer un estilo CSS personalizado, esto creará una etiqueta que hará que el color de fondo sea rojo:

redback {background-color:red;}

 

<redback>This is red</redback>

En algunas circunstancias, puede parecer que crear sus propios nombres de etiquetas funciona bien.
Sin embargo, estas son solo las rutinas de manejo de errores de su navegador en funcionamiento. ¡Y el problema es que los diferentes navegadores tienen diferentes rutinas de manejo de errores!

Vea este ejemplo.
La primera línea contiene dos elementos inventados, whaty ever, y son tratados de manera diferente por diferentes navegadores. El texto aparece en rojo en IE11 y Edge, pero en negro en otros navegadores.
A modo de comparación, la segunda línea es similar, excepto que solo contiene elementos HTML válidos y, por lo tanto, se verá igual en todos los 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>

Otro problema con los elementos inventados es que no sabrá lo que depara el futuro. Si ha creado un sitio web hace un par de años con los nombres de etiqueta como picture, dialog, details, slot, templateetc, esperando que ellos se comportan como vanos, ¿estás en problemas ahora!

puedes usar esto:

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

Encontré este artículo sobre cómo crear etiquetas HTML personalizadas e instanciarlas. Simplifica el proceso y lo divide en términos que cualquiera puede entender y utilizar de inmediato, pero no estoy del todo seguro de que las muestras de código que contiene sean válidas en todos los navegadores, así que advierta y pruebe a fondo. Sin embargo, es una excelente introducción al tema para comenzar.

Elementos personalizados: definición de nuevos elementos en HTML