¿Debo usar etiquetas no estándar en una página HTML para resaltar palabras?

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?

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.

Su 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:

Some <b>bold</b> and some <slanted>italic</slanted>.

Aparecerá como este es cada navegador:

Algunos en negrita y otros en cursiva.

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:

slanted { font-style: italic; }

la mayoría de los navegadores ahora se mostrarán de la siguiente manera:

Algunos en negrita y otros en cursiva .

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í:

Algunos en negrita y otros en cursiva.

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.

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"....

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.

<x-accordion> </x-accordion> no es peor que <div class = "accordion"> </div> en todos los sentidos mecánicos. En ausencia de una definición para "acordeón x" (o soporte de modelo de componente), ambos significan lo mismo, ambos pueden ser diseñados de la misma manera. Uno es HTMLUnknownElement, el otro es HTMLDivElement y su superficie API es idéntica.

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.

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.

En el aspecto práctico, no es necesario utilizar nuevas etiquetas para resaltar. Se puede utilizar emo ietiquetas, si lo prefiere cursiva como representación predeterminada (no CSS) y strong, o bsi lo prefiere en negrita como predeterminado. Si, por alguna razón, prefiere la representación predeterminada como texto normal, es decir, sin resaltar, use span. En cada caso, puede usar un classatributo 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.

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.

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, como

<important>This site is going to be down for maintenance 2/29/2012.</important>

Entonces 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 HTML5

El elemento fuerte representa una gran importancia para sus contenidos.

y

El elemento de marca representa una ejecución de texto en un documento marcado o resaltado para fines de referencia ...

Si no lo está utilizando para "fines de referencia", un <span>con una clase estaría bien.

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.

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.

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.

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:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

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 su data-typeatributo.