Me gustaría saber si es una buena práctica o legal usar etiquetas no estándar en una página HTML para ciertos propósitos personalizados.
Por ejemplo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consequat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.
Quiero destacar "consectetur adipiscing elit" como importante y "nisi arcu accumsan arcu" como destacado.
Entonces en el HTML pondría:
Lorem ipsum dolor sit amet, <important> consectetur adipiscing elit </important>. Nullam consequat, felis sit amet suscipit laoreet, <highlighted> nisi arcu accumsan arcu </highlighted>, vel pulvinar odio magna suscipit mi.
y en el CSS:
important {
background: red
color: white;
}
highlighted {
background: yellow;
color: black;
}
Sin embargo, dado que estas no son etiquetas HTML válidas, ¿está bien?
fuente
<span class=..>
?<mark>
? developer.mozilla.org/en/HTML/Element/mark<em>
es básicamente tu<important>
y<mark>
es tu<highlight>
.<strong>
es más apropiado para la importancia de lo que<em>
es. Culpa mía.Respuestas:
No, esta no es una buena práctica. Debería usar etiquetas significativas y semánticas, tal vez
<em>
en este caso, y aplicar estilos CSS para cumplir con los requisitos de diseño.fuente
<em class="myclass">sample text</em>
CSS.myclass: { background: red; etc. }
Puede dar clases a la mayoría de las etiquetas, no soloem
. Por lo generaldiv
ospan
para el texto. Ver tambiénSu pregunta es si es " buena práctica o legal ".
En primer lugar: es algo legal , al menos, se tolera. Los navegadores siempre se han programado para hacer frente a etiquetas que no entienden, incluso si eso significa que simplemente las ignoran. Este código HTML:
Aparecerá como este es cada navegador:
Además, la mayoría de los navegadores le permitirán diseñar ese elemento en CSS. Entonces, si agrega la siguiente definición CSS:
la mayoría de los navegadores ahora se mostrarán de la siguiente manera:
Realmente: pruébalo por ti mismo . Por cierto, este es un truco que los desarrolladores web usan para tratar de garantizar que las nuevas etiquetas HTML5 se muestren correctamente en los navegadores más antiguos.
Sin embargo, esa no es la imagen completa. La respuesta completa es no, no es una buena práctica . Es posible que haya notado mi uso de la frase "la mayoría de los navegadores". Desafortunadamente, todas las versiones de Internet Explorer anteriores a IE9 no implementan este comportamiento. En IE8 y versiones anteriores, el código anterior se verá así:
Hay una descripción excelente del problema en Dive Into HTML5 , donde también encontrará detalles de una solución alternativa. Sin embargo, la solución requiere JavaScript, por lo que no es una solución HTML pura y no funcionará en todos los escenarios.
Por lo tanto, respuesta corta: se adhieren a los elementos HTML estándar solamente y dales estilo como quieras en tu CSS.
fuente
Si necesita mantener la semántica
<important/>
por razones específicas, puede usar XSL para transformar sus etiquetas personalizadas en HTML válido. Puede leer más sobre este tema aquí:http://www.w3.org/Style/XSL/WhatIsXSL.html
http://www.4guysfromrolla.com/webtech/081300-2.shtml
http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html
http://www.siteexperts.com/tips/xml/ts01/page5.asp
http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html
Todavía no puede tener
<important/>
la salida HTML final, pero puede transformarla automáticamente en algo así<span class="important"...
.fuente
Aquí hay bastantes respuestas que explican por qué nunca debe crear sus propias etiquetas personalizadas. Podría decirse que todos son incorrectos.
El análisis de WHATWG de etiquetas personalizadas concluye que son aceptables, que cumplen con los estándares (ya que el manejo de etiquetas no reconocidas está bien definido) y más accesible que, por ejemplo, diseñar un div genérico.
Lo que debe hacer, lo que no hizo el OP, es prefijar todas las etiquetas personalizadas con 'x-' por convención. Esto indica claramente que tiene la intención de que esta etiqueta sea local a su documento y evita conflictos con elementos de especificaciones futuros.
Algunos sostienen que, dado que ciertos navegadores populares no manejan etiquetas personalizadas de una manera que cumpla con los estándares, no debe usarlas. Sin embargo, el comportamiento de los navegadores no conformes es su propio problema y, preferiblemente, no lo obligará a escribir un marcado no semántico. Existen soluciones Javascript y no Javascript para ese problema, que solo deben aplicarse a aquellos navegadores no compatibles que desea admitir específicamente.
Dicho todo esto, si existe una etiqueta en la especificación (<marca>) que cubre claramente el significado semántico de la etiqueta que ha creado (<resaltado>), entonces es preferible usar la etiqueta existente.
fuente
<x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>
?Puede usar
<em />
y<strong />
con CSS personalizado para alterar cómo se muestra.Fuerte, se refiere a una mayor importancia.
El énfasis se refiere a un mayor énfasis.
fuente
En el aspecto práctico, no es necesario utilizar nuevas etiquetas para resaltar. Se puede utilizar
em
oi
etiquetas, si lo prefiere cursiva como representación predeterminada (no CSS) ystrong
, ob
si lo prefiere en negrita como predeterminado. Si, por alguna razón, prefiere la representación predeterminada como texto normal, es decir, sin resaltar, usespan
. En cada caso, puede usar unclass
atributo para distinguir este uso de otro uso que pueda tener para el marcado.Las especificaciones HTML y los borradores (HTML5) son oscuros con respecto a la semántica de estos elementos, pero esto no tiene por qué causar un gran dolor de cabeza.
fuente
em
ystrong
deben usarse cuando sea semánticamente correcto hacerlo, no cuando desee negrita o cursiva. Puede cambiar la presentación con CSS.No, aunque se permite agregar nuevas etiquetas desde otro espacio de nombres en XHTML, se desaconseja el procesamiento de etiquetas HTML que no están especificadas.
fuente
Bueno, es legal que no te arresten por hacerlo. Pero si aparecen asesinos del W3C en su puerta, no se sorprenda.
En primer lugar, otros desarrolladores no van a saber lo que quieren decir. En el caso de
<important>
y<highlight>
lo son, pero si usa algo como, por ejemplo,<set>
puede saber que se refiere a un conjunto matemático, pero alguien que lea su código podría confundirlo con otra cosa. Sin la especificación allí para dar una respuesta, podría haber una gran confusión.En segundo lugar, ¿qué
<important>
pasa si el W3C decide que un elemento es una buena idea, pero piensa que debería significar un aviso urgente, comoEntonces estás jodido. Los navegadores y sus compañeros desarrolladores estarán bastante confundidos. Probablemente te obligarán a analizar tu código con expresiones regulares hasta que te vuelvas loco. Y todos sabemos cómo resulta eso.
Tercero, IE <9 no te permite diseñar elementos desconocidos sin un pequeño truco. No es una gran cosa, pero molesto.
Por último, en este caso, ¡
<important>
y<highlight>
ya existe!<strong>
y<mark>
son lo que estás buscando. De acuerdo con la especificación HTML5y
Si no lo está utilizando para "fines de referencia", un
<span>
con una clase estaría bien.fuente
http://www.w3.org/TR/html5/elements.html
Esta es la revisión 1.5612.
Los autores no deben usar elementos, atributos o valores de atributos que no estén permitidos por esta especificación u otras especificaciones aplicables, ya que hacerlo dificulta significativamente la extensión del lenguaje en el futuro.
fuente
Ignorando la opinión de todos los demás aquí.
No es una buena práctica por dos razones muy importantes:
Primero, es completamente posible que en algún momento el comité de estándares decida incluir una etiqueta con el nombre
<important>
que termine bloqueando su uso. Claro, puede llevar un tiempo ... Pero es posible que pierdas el tiempo después de sacarlo.En segundo lugar, (esta es la verdadera razón) el programador que hereda su código va a decir constantemente "wtf" en su enfoque no estándar mientras saca todo eso, o, igualmente posible, estará completamente confundido por lo que es usted Lo he hecho y simplemente renuncié con frustración.
Entonces, sé amable. Nunca se sabe, algún día podrías terminar pidiéndole trabajo a uno de ellos.
fuente
No, no puede crear sus propias etiquetas HTML, ya que entonces tendría que hacer que todos los principales navegadores las implementaran, actualmente cuando los navegadores encuentran una etiqueta no reconocida ignoran todo lo que contiene, así que a menos que desee hacer que su propio navegador cree un nuevo la etiqueta no tiene sentido, e incluso entonces solo funcionarían en su navegador.
Podría intentar enviar un caso de uso para ellos al w3c, pero dudo que llegue a alguna parte.
fuente
No, no es una buena práctica por todas las razones proporcionadas por todas las demás respuestas. ¡En lugar de reiterar esos puntos, me gustaría presentar una opción que no he visto en esas respuestas!
En el caso de que no existan etiquetas cuyo significado semántico coincida con sus objetivos, puede usar una combinación de CSS y el nuevo
data-*
atributo en la especificación HTML 5. Por supuesto, esto funcionará con la mayoría de las etiquetas que elija.Ejemplo:
Si bien esta no es una solución perfecta, dado que no existe un significado semántico bien definido para los
data-*
atributos, esto al menos le permitirá proporcionar información adicional a aquellos que conocen el significado de sudata-type
atributo.fuente