¿Los elementos personalizados son válidos HTML5?

181

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.

d13
fuente
2
Es posible que no desee poner demasiado stock en un artículo HTML5 escrito hace más de 4.5 años.
jessegavin
9
El artículo de Crockford es extraño. La oración importante es "Esta es mi propuesta para un HTML 5 más amable y gentil". En otras palabras, este no es el HTML5 que conocemos hoy, sino una propuesta para un HTML 5 diferente como sucesor del HTML 4. Extraño, porque está fechado en noviembre de 2007, cuando el W3C ya había estado trabajando en HTML5 durante casi un año. . Su uso de la palabra "permitido" aquí es confuso. Las etiquetas personalizadas nunca han sido "conformes" / "válidas", pero los analizadores de navegador continúan funcionando en su presencia. De todos modos, la propuesta de Crockford no ganó tracción en absoluto. Casi ninguna parte está incorporada en HTML5.
Alohci
3
Los elementos personalizados se están convirtiendo en primera clase ahora que el estándar W3 emergente para elementos personalizados de componentes web está comenzando a aterrizar en Firefox y Chrome: dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/…
csuwldcat
3
En cuanto a Douglas Crockford, estoy tentado a creer todo lo que dice.
wnrph
1
Tabla de soporte del navegador web para elementos personalizados caniuse.com/#feat=custom-elements
Adrien Be

Respuestas:

169

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

jessegavin
fuente
3
Esa es una buena respuesta (+1) pero la regla es algo circular. "Los usuarios no deben hacer cosas que no están permitidas ..."
Alohci
8
@Alohci debería haber agregado las siguientes 3 palabras a su cita: "según esta especificación".
jessegavin
1
También leí esa parte de la especificación, y realmente me confundió. He aquí por qué: 1) los atributos personalizados están permitidos en HTML5. Esto confirma la observación del argumento circular de Alochi. 2) En ninguna parte la especificación dice que los elementos personalizados no están permitidos.
d13
Esta cita es vaga en el mejor de los casos. ¿Seguramente el W3C tiene una postura más concreta de una forma u otra?
Flash
2
Ese enlace a customelements.io ya no es útil. ¿Te importaría actualizarlo / eliminarlo?
Nisarg
22

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)

svidgen
fuente
Parece que no leíste toda esa sección. No solo se trata principalmente de atributos , incluso desalienta fuertemente la personalización allí.
Andrew Barber
Repitiendo mis otros comentarios, sí, lo siento, no sabía que era mi blog. Supuse que eso era obvio. Sin embargo, el artículo es directamente relevante. Y agregaré, no está destinado a servir como referencia para respaldar cualquier "reclamo" que he presentado, sino para mostrar en un formato más largo cómo hacerlo para que funcione.
svidgen
1
El punto es simplemente esto: la especificación permite explícitamente estas cosas. Y en la mayoría de los contextos de comportamiento desalentador , la especificación está hablando claramente a los vendedores de agentes de usuario, no a los autores HTML.
svidgen
3
Esta declaración citada aquí arriba parece haber sido eliminada en la versión más reciente de w3.org/TR/html5/introduction.html#extensibility . Hasta ahora, todavía no puedo encontrar ninguna documentación sobre si el uso de elementos HTML personalizados sin guiones puede ser válido o no, o si necesita declaraciones JS para validar elementos HTML personalizados guiados ( html5rocks.com/en/tutorials/webcomponents/ customelements ).
John Slegers
@ JohnSlegers Sí, parece que la documentación y / o el anclaje se reorganizaron un poco. He actualizado el enlace. La cita en mi respuesta se encuentra cerca de la parte inferior de la sección de Extensibilidad vinculada .
svidgen
14

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.

Alohci
fuente
Ok, entonces podemos suponer que si los elementos personalizados no se mencionan, entonces tampoco están permitidos. Eso parece bastante justo.
d13
44
Esta respuesta ahora no es válida, el estándar emergente W3 Web Components Custom Elements está comenzando a aterrizar en los navegadores ahora: dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/…
csuwldcat
1
@csuwldcat - En realidad no. El estándar HTML5 o posterior aún deberá actualizarse de alguna manera para permitir que dichos elementos personalizados formen parte de su modelo de contenido. Sin embargo, es una noticia interesante. ¿En qué navegadores puedo usarlos?
Alohci
3
@Alochi: obviamente, cualquier otra especificación con lenguaje antiguo deberá actualizarse para reflejar esta nueva realidad, pero HTML es un estándar de vida y no bloquea otras especificaciones; las actualizaciones se realizarán una vez que pasemos a las siguientes etapas del estándar pista. Puedes jugar con implementaciones nativas de Web Components en Chrome Canary, y pronto en Firefox Aurora. Además, hay polyfills disponibles para 3 de las 4 especificaciones de componentes web que funcionan muy bien en todos los navegadores modernos de hoy en día, esto incluye las características / características de elementos personalizados.
csuwldcat
¿Entonces los elementos personalizados se pueden poner en ciertos lugares? ¿O estás diciendo que no están permitidos en absoluto?
Melab
12

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

Beejor
fuente
11

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.

Josh
fuente
5

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.

csuwldcat
fuente
1
¿Se aprobó este borrador?
Starx
Las porciones están llegando a Firefox y Chrome: estamos trabajando en estrecha colaboración y esperamos tener implementaciones completas para finales de 2013.
csuwldcat
1
Ahora 2014, ¿han aterrizado implementaciones completas?
Hasib Mahmud
1
@JamieHutber y vea cómo sus páginas web se rompen en los últimos navegadores dentro de un año. Regla n. ° 1 para la interoperabilidad del navegador: siga las reglas.
Sr. Lister
1
@HasibMahmud las especificaciones ahora están finalizadas y aterrizarán en Chrome Beta en un par de semanas, Firefox Aurora en ~ 6 semanas. Puede usarlos en Firefox Aurora hoy cambiando el indicador de configuración dom.webcomponents.enableda true.
csuwldcat
4

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.

Henrik Vendelbo
fuente
3

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.

James Holderness
fuente
2

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

Erick Boileau
fuente
1

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

Петър Петров
fuente
1
Era válido para el validador porque estaba creando esos elementos con JavaScript, y el validador no los vio porque no ejecuta su JavaScript. Solo vería la página tal como aparece cuando se carga por primera vez.
animuson
Exactamente. Si bien no es HTML válido, las etiquetas personalizadas siguen siendo válidas SGML y HTML es SGML después de todo. CSS se puede utilizar para diseñar etiquetas personalizadas y funciona perfectamente en IE. :) Además, puede especificar su propio DTD con sus propios elementos personalizados en su especificación DOCTYPE, por lo que mis etiquetas personalizadas pueden validarse incluso sin JavaScript, pero no me importan, un sistema GUI de motor de juego definitivamente no es Google trabajo :)
Петър Петров
1
Bueno, hay una trampa. No puede simplemente agregar elementos personalizados de todas formas. Debe definirlos y registrarlos con el DTD para que se consideren HTML "válidos". El hecho de que algo funcione no significa que sea válido.
animuson
Si solo agrega un calificador a los nombres de sus elementos, como <x-msg>, <x-log>, etc., entonces estaría cumpliendo con la especificación de Componentes web / Elementos personalizados.
Neil Monroe
En un motor de juego en el que Webkit solo está ahí para representar su GUI dinámica, a nadie le importará también el DTD. Cualquier etiqueta no desconocida para el HTML es HTMLUnknownElement de JS, sigue trabajando perfectamente con jQuery y CSS, por lo que su interfaz gráfica de usuario recibe algunas semántica al final: <inventory>, <item type="potion" sprite="2">- por lo que es mejor para ser llamado SGML + CSS en lugar de HTML, a pesar de que los elementos HTML que tienen definición trabajar como está - Botones, listas, ...
Петър Петров
1

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.

Nisarg Shah
fuente
1
Tal vez eso sucederá cuando dejen de apoyar <center>y <marquee>?
Ravenstine
1

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

Ephellon Dantzler
fuente
3
Este es el HTML más extraño que he visto últimamente :)
Dan Dascalescu