¿Los elementos personalizados son HTML5 válidos?

Es posible y permitido:

Los agentes de usuario deben tratar elementos y atributos que no entender como semánticamente neutral; dejándolos en el DOM (para DOM procesadores), y el estilo de acuerdo con CSS (para los 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á hacer que su documento no sea válido (pero aún así totalmente funcional) para acomodar el IE 7 y 8.

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

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

El elemento html solo puede contener Un elemento head seguido de un elemento body.

El elemento body 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, botón, lienzo, citar, codificar, comando, datalist, del, detalles, dfn, div dl, em, incrustar, fieldset, figura, pie de página, forma, h1, h2, h3, h4, h5, h6, cabecera, hgroup, hr, me, iframe, img, entrada, ins, kbd, keygen, etiqueta, asignar, marca, matemáticas, menu, metro, nav, noscript, objeto, oc, salida, p, pre, progreso, q, rubí, s, samp, script, apartado, seleccionar, pequeño, abarcar, fuerte, estilo (si el atributo scoped está presente), subtema, sup, svg, tabla, textarea, tiempo, u, ul, var, video, wbr y Texto

Y así sucesivamente.

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

Elementos y Atributos Básicos Personalizados

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

• Los nombres de los elementos son minúsculas y comienzan con x-
• Los nombres de atributos son minúsculas y comienzan con data-

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

Una convención común para los elementos es x-foo; x-vendor-feature se recomienda.

Esto maneja la mayoría de los casos, ya que es posiblemente raro que un desarrollador necesite todo el poder que viene con el registro de sus elementos. La sintaxis también es adecuadamente válida y estable. A continuación se ofrece una explicación más detallada.

Elementos y Atributos Personalizados Avanzados

A partir de 2014, hay una forma nueva y mucho mejor de registrar elementos y atributos personalizados. No funcionará en navegadores más antiguos como IE 9 o Chrome / Firefox 20. Pero le permite usar la interfaz estándar HTMLElement, evitar colisiones, usar nombres no - x-* y no - data-*, y definir un comportamiento personalizado y una sintaxis para el navegador para respetar. Requiere un poco de JavaScript de lujo, como se detalla en los enlaces a continuación.

HTML5 Rocks-Definiendo nuevos elementos en HTML
WebComponents.org -Introducción a los Elementos Personalizados
W3C-Componentes Web: Elementos personalizados

Respecto a La Validez de la Sintaxis Básica

Usar data-* para 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 fuertemente en contra de ellos, y los considera no conformes. Pero se requiere que los navegadores los soporten, y los identificadores x-* no entrarán en conflicto con las especificaciones HTML futuras y los identificadores x-vendor-feature no entrarán en conflicto con otros desarrolladores. Un DTD personalizado se puede utilizar para trabajar alrededor de cualquier navegador exigente.

Aquí hay algunos extractos relevantes de los documentos oficiales:

"Aplicable las especificaciones PUEDEN definir el nuevo contenido del documento (p. elemento foobar) [...]. Si la sintaxis y la semántica de un el documento HTML5 conforme no se modifica mediante el uso de especificación (s), entonces ese documento sigue siendo un HTML5 conforme documento."

" Los agentes de usuario deben tratar elementos y atributos que no entender como semánticamente neutral; dejándolos en el DOM (para DOM procesadores), y el estilo de acuerdo con CSS (para los procesadores CSS), pero no inferir cualquier significado de ellos."

" Los agentes de usuario no son libres de manejar documentos no conformes, ya que por favor; se aplica el modelo de procesamiento descrito en esta especificación para implementaciones independientemente de la conformidad de la entrada documento."

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

W3C-HTML5: Documentos de conformidad
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. ¿Un documento HTML con etiquetas personalizadas debe considerarse HTML5 válido? La respuesta a esto es claramente " no." La especificación lista exactamente qué etiquetas son válidas en qué contextos. Esta es la razón por la que un validador HTML no aceptará un documento con etiquetas personalizadas, o con etiquetas estándar en los lugares equivocados (como una etiqueta "img" en el cabecera).

2. ¿Se analizará y representará un documento HTML con etiquetas personalizadas de forma estándar y claramente definida en todos los navegadores? Aquí, tal vez sorprendentemente, la respuesta es " sí."A pesar de que el documento técnicamente no se consideraría HTML5 válido, la especificación HTML5 especifica exactamente lo que se supone que deben hacer los navegadores cuando ven una etiqueta personalizada: en resumen, la etiqueta personalizada actúa como un <span> - no significa nada y no hace nada por defecto, pero puede ser estilizado por HTML y accedido 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í: W3 Web Components Custom Elements spec. Además, Microsoft soporta una biblioteca (escrita por antiguos desarrolladores de Mozilla), llamada X-Tag - hace que trabajar con componentes web sea aún más fácil.

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

Para las características de nivel de marcado que se pueden limitar 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.

Así que si estás usando la serialización XML de HTML5, es legal que hagas 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 que están destinadas a usarse con la sintaxis HTML, las extensiones deben limitarse a los nuevos atributos de la forma "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 personalización elementos que eligieron crear.

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 que se represente de alguna manera especial, debería mirar la especificación de elementos personalizados .

Para una introducción más suave sobre el tema, lea el Web Components Introduction , que también incluye información sobre el Shadow DOM y otras especificaciones relacionadas. Estas especificaciones todavía están trabajando borradores en este momento-se puede ver el estado actual aquí - pero se están desarrollando activamente.

Como ejemplo, una definición simple para un elemento greeting podría ser algo 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 muestre el contenido del elemento entre comillas, y prefijado por el texto "Simon says:" que está estilizado con el color gris. Típicamente una costumbre la definición de elemento como esta se almacenaría en un archivo html separado que se 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 utilizando la biblioteca Polymer polyfill que se puede ver aquí. Tenga en cuenta que esto está utilizando una versión antigua de la biblioteca de Polímeros - las versiones más recientes funcionan de manera bastante diferente. Sin embargo, con la especificación todavía en desarrollo, esto no es algo que recomendaría usar en código de producción de todos modos.

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 incrustados

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

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

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

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

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

1. Puede entrar en conflicto con algo añadido 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.

Utilizo etiquetas personalizadas solo en lugares que a Google no le importan, por ejemplo, en un iframe de motor de juego, hice una etiqueta <log> que contenía <msg>, <error> y <warning> - pero solo a través de JavaScript. Y era totalmente 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 están soportando analizarlos y también puedes usarlos usando css. Entonces, si desea usar etiquetas personalizadas para los navegadores actuales, puede hacerlo. Pero el soporte puede ser eliminado 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 manera 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 las 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 (a-z, A-Z) para iniciar la etiqueta, y luego puede usar cualquiera de los caracteres no alfa después. Si en CSS, debe utilizar el " \ " (barra invertida) en orden para encontrar el elemento, tal como necesitaría Consulta \ ^ {... } . Pero en JS, lo llamas como lo ves. Espero que esto ayude. Ver ejemplo aquí

- Mink CBOS