Uso de etiquetas HTML personalizadas

Question

En mi html tenía curiosidad si era semánticamente correcto utilizar identificadores únicos como <toys></toys> para contener una imagen en lugar de <h2>. Por ejemplo:

¿Es preferible tener: <toys class="grid_4 push_2">&nbsp</toys>

con el css:

toys { 
    background: url("toys.png") no-repeat scroll 0 0 transparent; 
    width: 181px; 
    height: 93px; 
    margin-top: -8px; 
    } 

en lugar de: Actualmente tengo: <h1 class="grid_4 push_2">&nbsp</h1>

con el css:

h1 { 
    background: url("toys.png") no-repeat scroll 0 0 transparent; 
    width: 181px; 
    height: 93px; 
    margin-top: -8px; 
    } 

¿Es semánticamente correcto el uso de identificadores únicos como <toys>?

Answer 1

Es mejor evitar el uso de etiquetas personalizadas, ya que nunca se sabe cuándo esas etiquetas pueden estandarizarse y tener un uso especial en el futuro.

Lo mejor que puede hacer por su ejemplo, si se quiere evitar el uso de las etiquetas de cabecera, es la siguiente:

<div class="toys grid_4 push_2">&nbsp</div> 

.toys { 
    background: url("toys.png") no-repeat scroll 0 0 transparent; 
    width: 181px; 
    height: 93px; 
    margin-top: -8px; 
} 

Además:

Si no utiliza el estándar HTML las etiquetas al diseñar páginas, no aparecerán de ninguna manera organizada cuando los estilos están deshabilitados. Esto no es un problema, en adelante, pero si por alguna razón necesitas ver una lista de "juguetes" sin estilos, no tendrías suerte a menos que uses <ul> o <ol> con las etiquetas <li>.

ACTUALIZACIÓN:

Como Flimzy señaló en los comentarios, los elementos HTML personalizados tienen ahora su propia especificación del W3C. Sin embargo, aún no son totalmente compatibles.

• Especificación: https://www.w3.org/TR/custom-elements/
• Soporte: http://caniuse.com/#feat=custom-elements

Answer 2

Sin duda puede; sin embargo, generalmente es no es una buena idea para hacerlo. En muchos sentidos, HTML5 se está moviendo a algo así, pero genérico; tener etiquetas específicas, si bien es compatible, puede tener resultados muy diferentes entre diferentes navegadores.

Answer 3

Sí, eso sería semánticamente correcto.

Sin embargo, es una sintaxis no válida ya que HTML tiene un conjunto definido de etiquetas.

Puede solucionarlo en algunos navegadores.

Dicho esto, ¿cuál es el beneficio de hacer eso? Realmente solo beneficiaría a la persona que tiene que mantener el código fuente.

Para su información, lo que usted propone es más o menos lo que XML es.

Answer 4

Si el tipo de documento se establece en XHTML, que debe estar bien. Pero generalmente no es válido para HTML doctypes.

Answer 5

No desea crear sus propias etiquetas.

Las etiquetas HTML se definen en la especificación HTML.

En lugar de:

<h1 class="grid_4 push_2">&nbsp</h1> 

Usted debe hacer algo como:

<h1 class="toys">&nbsp</h1> 

Sin embargo, usted puede hacer hasta que propias etiquetas XML si.

Pero tenga en cuenta que no todos los navegadores son compatibles con su etiqueta y no podrá personalizarlos con CSS.

está ocurriendo lo mismo con el nuevo HTML5 tags

Answer 6

Estoy de acuerdo con @superUntiled, usted debe hacer un buen uso de los selectores CSS (clases y IDs). Entonces, si tiene un objeto de tipo "juguete", debe crear una clase para ese objeto. Luego, puede seleccionar todos sus cars usando CSS simplemente usando el selector .toy.

Algo como esto:

<style> 
.toy { 
    color: red; 
} 
</style> 

<p class="toy">My little car</p> 

Answer 7

La mayor parte de estas respuestas son buenos consejos generales, pero no respuestas adecuadas a la pregunta, que creo que es perfectamente legítimo.

HTML5 ya es un objetivo en movimiento; los navegadores implementan especificaciones e innovan a diferentes ritmos. No hay una sola cosa llamada "HTML válido", al menos no que valga la pena usar. Si está construyendo una página pública para cada persona y bot/rastreador en el planeta, entonces ya tiene que A) detectar al cliente y personalizarlo en consecuencia, para páginas complejas/avanzadas o B) hacerlo realmente simple y simple. Si, por otro lado, lo está colocando en una LAN u ocultándolo detrás de un muro de inicio de sesión o desarrollándose a la vanguardia y planificando actualizaciones frecuentes de todos modos, entonces debe sentirse libre de innovar un poco, con discreción. Los desarrolladores de navegadores y los escritores de especificaciones satisfacen sus necesidades, usted puede hacer lo mismo.

Por lo tanto, si desea una etiqueta personalizada, elija con cuidado (aquí señalaré que las probabilidades que alguna vez se convertirían en parte de una especificación formal de la implementación del navegador son totalmente insignificantes), luego vaya por ello. Sin embargo, para hacer que su CSS funcione en IE, tendrá que hacer lo mismo que html5shim y llamar a document.createElement ('toys') en su javascript.

También debería agregar que los elementos personalizados obtienen sus propios estándares y soporte, pero el consenso actual es que todos deberían tener un '-' en el nombre. Así que recomendaría algo como 'x-toys' o 'mis-juguetes' en lugar de solo 'juguetes'. Personalmente, no estoy encantado con la convención, pero entiendo las razones.

Answer 8

ACTUALIZACIÓN (porque todas las respuestas son de edad):

A partir de componentes web de la API se implementa en todos los navegadores importante, en mi opinión, no se puede evitar el uso de etiquetas personalizadas en el futuro. Creo que Web Components se convertirá fácilmente en la corriente principal. Toda la teoría está basada en él: etiquetas personalizadas, atributos personalizados JS personalizados asociados a estos elementos.

Así que lo que digo: no es malo usar sus propias etiquetas hoy en día, pero aún necesita considerar la construcción relacionada con SEO.

Answer 9

Seguramente si define una etiqueta y también define dentro de su hoja de estilo lo que debería hacer, ¿eso debería atarla? Incluso si su nueva etiqueta se estandariza más tarde, su hoja de estilo reemplazará al estándar, después de todo para eso son las hojas de estilo.

Por ejemplo, a menudo necesito controlar los saltos de línea en mis páginas. En lugar de utilizar un torpe

<span style="white-space:nowrap">bla bla bla</span> 

cada vez, le adjunto mi texto no roto dentro de mis propias etiquetas y definir en mi hoja de estilo:

nbr { 
    white-space:nowrap; 
} 

por lo

<p> This is some text. <nbr>This is some more text.</nbr></p> 

aparecerá en una línea si hay espacio, de lo contrario la segunda oración aparecerá en la siguiente línea. O, para ser precisos, en todos los navegadores excepto en las versiones anteriores de IE. Para ser de hierro fundido, añadí lo siguiente a cada página de la sección [cabeza] (en Wordpress, sólo tiene que añadir a header.php del tema): -

<!--[if lt IE 9]> 
<script> document.createElement('nbr'); </script> 
<![endif]--> 

O me estoy perdiendo algo?