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

20

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?

rcs20
fuente
56
<span class=..>?
Jake Berger
12
Por definición, si son personalizados, no son etiquetas HTML (que están estandarizadas). Son solo elementos que no tienen un significado específico.
Oded
14
<em>es básicamente tu <important>y <mark>es tu <highlight>.
Peter C
3
Tienes razón. La especificación HTML5 dice que <strong>es más apropiado para la importancia de lo que <em>es. Culpa mía.
Peter C

Respuestas:

50

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.

Wyatt Barnett
fuente
3
Presumiblemente no está familiarizado con las clases. La sintaxis es: HTML <em class="myclass">sample text</em>CSS .myclass: { background: red; etc. } Puede dar clases a la mayoría de las etiquetas, no solo em. Por lo general divo spanpara el texto. Ver también
BlueRaja - Danny Pflughoeft
@ BlueRaja-DannyPflughoeft: las clases esparcidas por todo el código son la forma incorrecta de manejar esto también. Probablemente podría mejorar utilizando selectores descendientes con una clase o dos en contenedores.
Wyatt Barnett
14

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.

Mark Whitaker
fuente
No es legal La especificación define qué elementos están permitidos. La capacidad de los navegadores para recuperarse de los errores del autor no hace que los errores del autor sean correctos.
Quentin
¿Dónde puedo encontrar que no es legal? Intenté buscar en las especificaciones HTML, pero no pude encontrar una buena referencia.
Dibbeke
2
@DavidDorward Sí, entiendo tu punto. Lo que quise decir es que los navegadores garantizan que no se rompan cuando ven una etiqueta desconocida, a diferencia de la falta de garantía alrededor de, por ejemplo, una etiqueta no cerrada. Entonces, quizás el término correcto aquí es "tolerado" en lugar de legal. He actualizado la respuesta en consecuencia.
Mark Whitaker
@DavidDorward es absolutamente legal. W3C incluso llegó tan lejos en la especificación HTML5 como para dictar que "la interfaz HTMLUnknownElement debe usarse para elementos HTML que no están definidos por esta especificación". Si no fuera legal, lo habrían dicho. Creo que se está acumulando un polvo sobre si UnknownElement o Microformats son el mejor enfoque semántico para la web. Independientemente de cuál sea mejor, ambos son legales.
cáñamo
1
De la especificación : a diferencia de las versiones anteriores de la especificación HTML, esta especificación define con cierto detalle el procesamiento requerido para documentos no válidos, así como documentos válidos. Sin embargo, aunque el procesamiento de contenido no válido en la mayoría de los casos está bien definido, los requisitos de conformidad para los documentos siguen siendo importantes
Quentin
8

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

FrustratedWithFormsDesigner
fuente
8

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.

cáñamo
fuente
Si se desea marcar algún texto (p. Ej., "Dm7") de modo que al hacer clic en él, un acordeón animado toque un séptimo acorde en re menor, ¿sería el enfoque "acordeón x" una buena opción? Si el Javascript para el acordeón necesitaría información adicional, ¿cómo debería notarse mejor? Como <x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>?
supercat
5

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.

CaffGeek
fuente
4

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.

Jukka K. Korpela
fuente
77
-1 Este es un mal consejo. Las etiquetas emy strongdeben usarse cuando sea semánticamente correcto hacerlo, no cuando desee negrita o cursiva. Puede cambiar la presentación con CSS.
DisgruntledGoat
2

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.

Dibbeke
fuente
2

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.

Peter C
fuente
2

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.

zhao
fuente
1
Este es el comienzo de una gran respuesta; sin embargo, para ser grandioso, sería útil agregar algunos de los motivos por los cuales se escribió la guía. Además, la adición de estrategias alternativas que permiten el mismo efecto, pero que se ajustan a la guía, a menudo se ven favorablemente.
JustinC
1

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.

Yo no
fuente
0

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.

Ryathal
fuente
0

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.

Andy Hunt
fuente