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

Quiero crear algo así como

  aaa bbb   ccc   

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

  

pero es mucho menos legible 🙁

Puede usar tags 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 . 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!):

   

Entonces puedes usar tu etiqueta personalizada libremente.

 Overflow 

Siéntase libre de establecer atributos también …

  hello  

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 tags. Piensa en . 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á , que era específico de Netscape, olvidado en HTML4 y redescubierto y ahora especificado en HTML5. Y ahora también tenemos atributos de tags personalizadas, como data-XyZzz = “…” permitido en todas las tags HTML5.

Por lo tanto, aunque no debe inventar una ensalada personalizada de marcado no especificado, no está prohibido tener tags 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.

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

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 . Reemplace “menu.xsl” con la ruta a la hoja de estilo XSL que crea para convertir sus tags personalizadas en HTML.

  2. Advertencias: Su archivo debe ser un documento XML bien formado, con el encabezado XML . XML es más exigente que HTML sobre cosas como tags que no coinciden. Además, a diferencia de HTML, las tags 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.

Crear sus propios nombres de tags 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

  

O en lugar de

y algo así como

    y

  • .

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

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


    Por ejemplo, quiere usar la etiqueta , porque no le gusta , y tampoco 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) .


    De hecho, la etiqueta

    está definida; no tan usado, pero definido. Debe contener que se comporte como

  • .

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

     This is some text. 

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

     

    My name is Elizabeth.

    My name is Daniel.

    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 , por ejemplo, es un nodo en línea, pero no tendrá idea de qué hacer con .

    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.

    El objective de HTML es que las tags 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 .

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

    Como dijo Nick, las tags 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

      para crear los elementos rool y usar la etiqueta

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

      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.

      Las tags de polymer o X le permiten crear sus propias tags html. Se basa en el “DOM sombreado” del navegador nativo.

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

       redback {background-color:red;} 
       This is red 

      En algunas circunstancias, puede parecer que crear sus propios nombres de tags 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} 
       

      test

      test

      Esta no es una opción en ninguna especificación HTML 🙂

      Probablemente puedas hacer lo que quieras con elementos y clases de

      , de la pregunta No estoy seguro de qué es exactamente lo que buscas, pero no, crear tus propias tags no es una opción.

      Encontré este artículo sobre cómo crear tags 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

              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.   

      puedes usar esto:

           MyExample   this is BLOODRED (not to scare you)