for - ¿Hay alguna manera de crear su propia etiqueta html en HTML5?

label value html

Question

Quiero crear algo así 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 :(

Answer 1

Además de escribir una hoja de estilo XSL, como describí anteriormente, hay otro enfoque, al menos si estás seguro de que se usará Firefox u otro navegador XML de pleno derecho (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. Lo mejor de todo es que no tendrías que aprender XSL, lo que para muchas personas es un lenguaje difícil y contradictorio. El inconveniente es que su CSS tendrá que especificar el estilo de forma muy completa, incluidos los nodos de bloques, las líneas, etc. Normalmente, al escribir CSS, puede suponer que el navegador "sabe" que <em>, por ejemplo, es un nodo en línea, pero no tendrá idea de qué hacer con <plato>.

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

Answer 2

Como Michael sugirió 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 dices que quieres "agregar esto a HTML 5", supongo que lo que realmente quieres decir es que quieres que las páginas se muestren correctamente en un navegador moderno, sin tener que trabajar mucho por 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 crea para convertir sus etiquetas personalizadas en HTML.

2. Advertencias: Su archivo debe ser un documento XML bien formado, con el 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 esté enviando los archivos con el tipo de mime apropiado "application / xml". A menudo, el servidor web se configurará para hacer esto automáticamente si la extensión del archivo es ".xml", pero verifique.

3. Big Caveat: Finalmente, el uso de la transformación XSL automática de los navegadores, como ya he descrito, es realmente mejor solo para la depuración y para aplicaciones limitadas donde tienes mucho control. Lo utilicé con éxito al configurar una intranet sencilla 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 sí lo hacen no tienen implementaciones completamente compatibles. Entonces, si sus páginas van a ser lanzadas al "mundo salvaje", 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.

Answer 3

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

Sin embargo, no dará ningún error si utiliza dicho marcado en su HTML.

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

Si eso no es lo que desea lograr, especifique exactamente lo que desea. Podemos encontrar una respuesta entonces.

Answer 4

Crear sus propios nombres de etiquetas en HTML no es posible / no es válido. Para eso están XML, SGML y otros lenguajes de marcas 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 así como <ul/> y <li/> .

Para que se vea y funcione bien, solo conecta un CSS y Javascript.

Answer 5

El objetivo de HTML es que las etiquetas incluidas en el idioma tengan un significado acordado, que todos en el mundo puedan usar y basar las decisiones, como el estilo predeterminado o hacer clic en los enlaces, o enviar un formulario cuando haga clic en un <input type="submit"> .

Las etiquetas confeccionadas como la tuya son excelentes para los humanos (porque podemos aprender inglés y saber, o al menos adivinar, qué significan tus etiquetas), pero no tanto para las máquinas.

Answer 6

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

Mira este ejemplo.
La primera línea contiene dos elementos inventados, what y what , y reciben diferentes tratamientos por diferentes navegadores. El texto sale en rojo en IE11 y Edge, pero en negro en otros navegadores.
Para comparación, la segunda línea es similar, excepto que contiene solo elementos HTML válidos, y por lo tanto tendrá el mismo aspecto 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 creó un sitio web hace un par de años con nombres de etiquetas como picture , dialog , details , slot , template , etc., esperando que se comporte como un tramo, ¿tiene problemas ahora?

Answer 7

Encontré este artículo sobre cómo crear etiquetas HTML personalizadas y crear instancias de ellas. Simplifica el proceso y lo desglosa en términos que cualquiera puede comprender y utilizar de inmediato, pero no estoy del todo seguro de que los ejemplos de código que contiene sean válidos en todos los navegadores, así que caveat emptor y pruébelo a fondo. Sin embargo, es una gran introducción al tema para comenzar.

Elementos personalizados: definición de nuevos elementos en HTML

Answer 8

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

Probablemente puedas hacer lo que quieras con elementos y clases de <div> , de la pregunta No estoy seguro de qué es exactamente lo que buscas, pero no, crear tus propias etiquetas no es una opción.

Answer 9

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

verde {color: verde} en css funciona para

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

Answer 10

No estoy tan seguro de estas respuestas. Como acabo de leer: "CUSTOM TAGS SIEMPRE HA SIDO PERMITIDO EN HTML".

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

El punto aquí es que HTML estaba basado en SGML. A diferencia de XML con sus doctypes y esquemas, HTML no se vuelve inválido si un navegador no conoce una o dos etiquetas. Piensa en <marquee>. Esto no ha estado en el estándar oficial. Por lo tanto, al usarlo hizo que su página HTML fuera "oficialmente no aprobada", 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 personalizadas, como data-XyZzz = "..." permitido en todas las etiquetas HTML5.

Por lo tanto, aunque no debe inventar una ensalada personalizada de marcado no especificado, no está prohibido tener etiquetas personalizadas en HTML. 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 limitado a SGML.

Answer 11

Para incrustar metadatos, podría intentar usar microdatos HTML , pero es incluso más detallado que usar nombres de clase.

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

Answer 12

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

Answer 13

Puede usar etiquetas personalizadas en los navegadores, aunque no serán HTML5 (consulte ¿Los elementos personalizados son válidos para HTML5? Y las especificaciones HTML5 ).

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

PASO 1

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

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

PASO 2

Haga que funcione en las versiones anteriores de Internet Explorer al agregar esta secuencia de comandos a la cabeza (¡Importante!):

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

Answer 14

Puedes hacer algunos estilos CSS personalizados, esto creará una etiqueta que hará que el color de fondo sea rojo:

redback {background-color:red;}

 

<redback>This is red</redback>

Answer 15

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

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

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

En este momento, los navegadores probablemente implementarán el estilo nativo para esta etiqueta y el diseño de su sitio web se puede romper.

Así que sugiero usar (de acuerdo con este ejemplo) <img-icon> .

De hecho, la etiqueta <menu> está definida; no tan usado, pero definido. Debe contener <menuitem> que se comporte como <li> .

Answer 16

puedes usar esto:

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

</bloodred>
</body>
<script>
var btn = document.createElement("BLOODRED")

</script>
</html>

Answer 17

X-tags Polymer o X-tags permiten crear sus propias etiquetas html. Se basa en el "DOM sombreado" del navegador nativo.

Answer 18

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