¿Los elementos personalizados son válidos HTML5?

No he podido encontrar una respuesta definitiva a si las etiquetas personalizadas son válidas en HTML5, como esta:

<greeting>Hello!</greeting>

No he encontrado nada en la especificación de una manera u otra:

http://dev.w3.org/html5/spec/single-page.html

Y las etiquetas personalizadas no parecen validarse con el validador W3C.

La especificación de elementos personalizados está disponible en Chrome y Opera, y está disponible en otros navegadores . Proporciona un medio para registrar elementos personalizados de manera formal.

Los elementos personalizados son nuevos tipos de elementos DOM que pueden ser definidos por los autores. A diferencia de los decoradores , que son sin estado y efímeros, los elementos personalizados pueden encapsular el estado y proporcionar interfaces de script.

Los elementos personalizados son parte de una especificación W3 más grande llamada Web Components , junto con Plantillas, Importaciones HTML y Shadow DOM.

Los componentes web permiten a los autores de aplicaciones web definir widgets con un nivel de riqueza visual e interactividad que no es posible solo con CSS, y la facilidad de composición y reutilización no es posible con las bibliotecas de scripts en la actualidad.

Sin embargo, de este excelente artículo sobre Google Developers sobre Custom Elements v1:

El nombre de un elemento personalizado debe contener un guión ( -). Entonces <x-tags>, <my-element>y <my-awesome-app>son todos nombres válidos, mientras que <tabs>y <foo_bar>no lo son. Este requisito es para que el analizador HTML pueda distinguir elementos personalizados de elementos regulares. También garantiza la compatibilidad hacia adelante cuando se agregan nuevas etiquetas a HTML.

Algunos recursos

• Los componentes web de ejemplo están disponibles en https://WebComponents.org
• WebComponents.js sirve como un polyfill para Web Components hasta que sean compatibles en todas partes. Consulte también la página WebComponents.js github y la tabla de soporte del navegador web .

Es posible y permitido:

Los agentes de usuario deben tratar los elementos y atributos que no entienden como semánticamente neutros; dejándolos en el DOM (para procesadores DOM), y estilizándolos de acuerdo con CSS (para procesadores CSS), pero sin inferir ningún significado de ellos.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Pero, si tiene la intención de agregar interactividad, deberá invalidar su documento (pero aún así completamente funcional) para acomodar los IE 7 y 8.

Ver http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (mi blog)

NB La respuesta a continuación fue correcta cuando se escribió en 2012. Desde entonces, las cosas han avanzado un poco. La especificación HTML ahora define dos tipos de elementos personalizados: "elementos personalizados autónomos" y "elementos integrados personalizados". El primero puede ir a cualquier lugar donde se espera contenido de fraseo; que es la mayoría de los lugares dentro del cuerpo, pero no, por ejemplo, hijos de elementos ul u ol, o en elementos de tabla que no sean td, th o caption elements. Este último puede ir a donde sea que vaya el elemento que extienden.

Esto es en realidad una consecuencia de la acumulación del modelo de contenido de los elementos.

Por ejemplo, el elemento raíz debe ser un htmlelemento.

El htmlelemento solo puede contener un elemento de cabecera seguido de un elemento de cuerpo.

El bodyelemento solo puede contener contenido de flujo donde el contenido de flujo se define como los elementos: a, abbr, dirección, área (si es un descendiente de un elemento del mapa), artículo, aparte, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, detalles , dfn, div dl, em, incrustar, conjunto de campos, figura, pie de página, formulario, h1, h2, h3, h4, h5, h6, encabezado, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, etiqueta, mapa, marca, matemáticas, menú, medidor, nav, noscript, objeto, ol, salida, p, pre, progreso, q, rubí, s, samp, script, sección, seleccionar, pequeño, span, fuerte, estilo ( si el atributo con alcance está presente), sub, sup, svg, table, textarea, time,u, ul, var, video, wbr y texto

y así.

En ningún momento el modelo de contenido dice "puede poner cualquier elemento que desee en este", lo que sería necesario para elementos / etiquetas personalizados.

Elementos personalizados básicos y atributos

Los elementos y atributos personalizados son válidos en HTML, siempre que:

• Los nombres de los elementos están en minúsculas y comienzan con x-
• Los nombres de los atributos están en minúsculas y comienzan con data-

Por ejemplo, <x-foo data-bar="gaz"/>o <br data-bar="gaz"/>.

Una convención común para elementos es x-foo; x-vendor-featurees recomendado.

Esto maneja la mayoría de los casos, ya que es posiblemente raro que un desarrollador necesite toda la potencia que viene con el registro de sus elementos. La sintaxis también es adecuadamente válida y estable. Una explicación más detallada está abajo.

Elementos y atributos personalizados avanzados

A partir de 2014, hay una forma nueva y muy mejorada de registrar elementos y atributos personalizados. No funcionará en navegadores antiguos como IE 9 o Chrome / Firefox 20. Pero le permite usar la HTMLElementinterfaz estándar , evitar colisiones, usar nombres y nombres x-*distintos data-*, y definir comportamientos y sintaxis personalizados para que el navegador los respete . Requiere un poco de JavaScript sofisticado, como se detalla en los enlaces a continuación.

Rocas HTML5 - Definición de nuevos elementos en HTML
WebComponents.org - Introducción a los elementos personalizados
W3C - Componentes web: Elementos personalizados

Sobre la validez de la sintaxis básica

El uso data-*de nombres de atributos personalizados ha sido perfectamente válido durante algún tiempo e incluso funciona con versiones anteriores de HTML.

W3C - HTML5: Extensibilidad

En cuanto a los nombres de elementos personalizados (no registrados), el W3C recomienda enfáticamente no usarlos y los considera no conformes. Pero se requiere que los navegadores los admitan, y los x-*identificadores no entrarán en conflicto con las futuras especificaciones HTML y los x-vendor-featureidentificadores no entrarán en conflicto con otros desarrolladores. Se puede usar una DTD personalizada para evitar cualquier navegador exigente.

Aquí hay algunos extractos relevantes de los documentos oficiales:

"Las especificaciones aplicables PUEDEN definir el nuevo contenido del documento (por ejemplo, un elemento foobar) [...]. Si la sintaxis y la semántica de un documento HTML5 conforme no se modifica por el uso de las especificaciones aplicables, entonces ese documento sigue siendo un HTML5 compatible documento."

"Los agentes de usuario deben tratar los elementos y atributos que no entienden como semánticamente neutros; dejarlos en el DOM (para procesadores DOM) y diseñarlos de acuerdo con CSS (para procesadores CSS), pero sin inferir ningún significado de ellos".

"Los agentes de usuario no son libres de manejar documentos no conformes cuando lo deseen; el modelo de procesamiento descrito en esta especificación se aplica a las implementaciones independientemente de la conformidad de los documentos de entrada".

"La interfaz HTMLUnknownElement debe usarse para elementos HTML que no están definidos por esta especificación".

W3C - HTML5: Documentos
conformes WhatWG - Estándar HTML: Elementos DOM

Me gustaría señalar que la palabra "válido" puede tener dos significados diferentes en este contexto, cualquiera de los cuales es potencialmente, um, válido.

1. ¿Debe un documento HTML con etiquetas personalizadas considerarse HTML5 válido? La respuesta a esto es claramente "no". La especificación enumera exactamente qué etiquetas son válidas en qué contextos. Esta es la razón por la cual un validador de HTML no aceptará un documento con etiquetas personalizadas o con etiquetas estándar en los lugares incorrectos (como una etiqueta "img" en el encabezado).

2. ¿Se analizará y representará un documento HTML con etiquetas personalizadas de forma estándar y claramente definida en todos los navegadores? Aquí, quizás sorprendentemente, la respuesta es "sí". Aunque técnicamente el documento no se consideraría HTML5 válido, la especificación HTML5 especifica exactamente qué se supone que deben hacer los navegadores cuando ven una etiqueta personalizada: en resumen, la etiqueta personalizada actúa como una especie de <span>: no significa nada y no hace nada predeterminado, pero puede ser diseñado por HTML y accesible por javascript.

Los elementos HTML personalizados son un estándar emergente de W3 al que he estado contribuyendo que le permite declarar y registrar elementos personalizados con el analizador, puede leer la especificación aquí: Especificación de elementos personalizados de componentes web de W3 . Además, Microsoft admite una biblioteca (escrita por antiguos desarrolladores de Mozilla), llamada X-Tag , que facilita aún más el trabajo con Web Components.

Para dar una respuesta actualizada que refleje las páginas modernas.

Las etiquetas personalizadas son válidas si,

1) Contienen un guión

<my-element>

2) Son XML incrustado

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Esto supone que está utilizando el doctype HTML5 <!doctype html>

Teniendo en cuenta estas restricciones simples, ahora tiene sentido hacer todo lo posible para mantener su marcado HTML válido (deje de cerrar etiquetas como <img>y <hr>, es tonto e incorrecto a menos que use un doctype XHTML, que probablemente no necesite).

Dado que HTML5 define claramente las reglas de análisis, un navegador compatible podrá manejar cualquier etiqueta que le arrojes, incluso si no es estrictamente válida.

Citando de la sección Extensibilidad de la especificación HTML5 :

Para las características de nivel de marcado que pueden limitarse a la serialización XML y no necesitan ser compatibles con la serialización HTML, los proveedores deben usar el mecanismo de espacio de nombres para definir espacios de nombres personalizados en los que se admiten los elementos y atributos no estándar.

Entonces, si está utilizando la serialización XML de HTML5, es legal que haga algo como esto:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Sin embargo, si está utilizando la sintaxis HTML, está mucho más limitado en lo que puede hacer.

Para las características de nivel de marcado destinadas a la sintaxis HTML, las extensiones deben limitarse a los nuevos atributos del formulario "x-vendor-feature" [...] No se deben crear nuevos nombres de elementos.

Pero esas instrucciones están dirigidas principalmente a los proveedores de navegadores, que supuestamente proporcionarían un estilo visual y funcionalidad para cualquier elemento personalizado que elijan crear.

Sin embargo, para un autor, aunque puede ser legal incrustar un elemento personalizado en la página (al menos en la serialización XML), no obtendrá nada más que un nodo en el DOM. Si desea que su elemento personalizado realmente haga algo, o se represente de alguna manera especial, debería estar mirando la especificación de Elementos personalizados .

Para obtener una introducción más suave sobre el tema, lea la Introducción a los componentes web , que también incluye información sobre el DOM DOM y otras especificaciones relacionadas. Por el momento, estas especificaciones todavía están en borrador, puedes ver el estado actual aquí , pero se están desarrollando activamente.

Como ejemplo, una definición simple para un greetingelemento podría verse así:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Esto le dice al navegador que represente el contenido del elemento entre comillas, y con el prefijo del texto "Simon dice:" que está diseñado con el color gris. Por lo general, una definición de elemento personalizado como esta se almacenaría en un archivo html separado que importaría con un enlace.

<link rel="import" href="greeting-definition.html" />

Aunque también puede incluirlo en línea si lo desea.

He creado una demostración de trabajo de la definición anterior usando la biblioteca Polyfill polyfill que puedes ver aquí . Tenga en cuenta que esto está utilizando una versión anterior de la biblioteca Polymer: las versiones más recientes funcionan de manera bastante diferente. Sin embargo, con la especificación aún en desarrollo, esto no es algo que recomendaría usar en el código de producción de todos modos.

solo usa lo que quieras sin ninguna declaración dom

<container>content here</container>

agregue su propio estilo (display: block) y funcionará con cualquier navegador moderno

data-*los atributos son válidos en HTML5 e incluso en HTML4, todos los navegadores web los respetan. Agregar nuevas etiquetas está técnicamente bien, pero no se recomienda solo porque:

1. Puede entrar en conflicto con algo agregado en el futuro, y
2. Hace que el documento HTML no sea válido a menos que se agregue dinámicamente a través de JavaScript.

Yo uso de etiquetas personalizadas solo en lugares que Google no le importa, por ecample en un marco flotante motor de juego, hice una <log>etiqueta que contenía <msg>, <error>y <warning>- pero a través de JavaScript solamente. Y era completamente válido, según el validador. ¡Incluso funciona en Internet Explorer con su estilo! ;]

Las etiquetas personalizadas no son válidas en HTML5. Pero actualmente los navegadores son compatibles para analizarlos y también puede usarlos usando css. Entonces, si desea utilizar etiquetas personalizadas para los navegadores actuales, puede hacerlo. Pero el soporte se puede quitar una vez que los navegadores implementen los estándares W3C estrictamente para analizar el contenido HTML.

Sé que esta pregunta es antigua, pero he estado estudiando este tema y, aunque algunas de las afirmaciones anteriores son correctas, no son la única forma de crear elementos personalizados. Por ejemplo:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

funcionaría perfectamente bien (en versiones más recientes de Google Chrome, IE, Firefox y Safari móvil hasta ahora). Todo lo que necesita es solo un carácter alfa (az, AZ) para iniciar la etiqueta, y luego puede usar cualquiera de los caracteres no alfa después. Si está en CSS, debe usar la "\" (barra invertida) para encontrar el elemento, como necesitaría Consulta \ ^ {...}. Pero en JS, simplemente lo llamas como lo ves. Espero que esto ayude. Ver ejemplo aquí

-Mink CBOS