Por lo tanto, entiendo la diferencia funcional entre las etiquetas span y label ... sin embargo, parece que también hay una diferencia de renderizado entre las etiquetas y no puedo entender qué es. ¿Alguien sabe la diferencia entre el tramo y la etiqueta? Gracias¿Cuál es la diferencia de representación entre un tramo y una etiqueta?
Aparte de los estilos de representación predeterminados (la etiqueta a veces es negrita en algunos navegadores), la diferencia importante es que una etiqueta se supone que está vinculada a un campo de formulario (entrada, selección, etc.) para etiquetar qué campo es ese. Por lo tanto, es un atributo "para". No debería usarse para nada más que eso. Esto es especialmente importante en lo que respecta a la accesibilidad con lectores de pantalla, ya que esperan que este enlace exista.
Span es para un grupo de texto al que le gustaría aplicar un estilo similar. Por defecto, Span no tiene ningún estilo aplicado.
PD: Que la ira de Grayskull te encuentre si alguna vez te atrapo utilizando una pestaña de etiqueta solo para hacer que algo de texto sea negrita o algo así. Repita después de mí: "sin campo de entrada, sin etiqueta".
PPS: Lo siento, es una de mis mayores molestias con las marcas de otras personas.
* "la etiqueta a veces es negrita en algunos navegadores" *. ¿Podrían detallar en qué etiqueta de navegadores está en negrita? –
No veo diferencia en la representación con las hojas de estilo predeterminadas en IE, Firefox, Opera o Chrome. Es posible que un navegador elija renderizarlo de manera diferente, pero es poco probable que sea una diferencia significativa.
La principal ventaja de una etiqueta es que puede asociarla con otro control de formulario (a través de la contención o el atributo for). Esto puede tener ventajas de accesibilidad. Cabe destacar que en el típico navegador basado en gráficos puede hacer clic en la etiqueta para enfocar el control asociado (y marcarlo, para casillas de verificación/radios, que es útil porque de lo contrario es un blanco bastante pequeño para golpear). Esto reproduce el comportamiento del widget de formulario del sistema operativo establecido.
excepto que hay una diferencia en firefox ... – Polaris878
caso de prueba a continuación. No hay diferencia aquí; ¿Tiene otras reglas interfiriendo? La única regla que se aplica específicamente a 'label' en la hoja de estilo predeterminada de Firefox 3.5 es' cursor: default'. – bobince
drat .... así que estoy investigando nuestras enormes cantidades de CSS y hay una clase que está anulando los atributos de etiqueta predeterminados. Lo siento por eso. – Polaris878
Parece que hay algunos CSS que actúan en él que me perdí ... por lo que probablemente no haya una diferencia de representación en los navegadores compatibles – Polaris878