Herramientas de desarrollo · Editor HTML WYSIWYG
strong vs by em vs i: Por qué el HTML semántico en línea es importante para los editores
· Por qué es importante
html accesibilidad contento
Explica la diferencia práctica entre elementos en línea semánticos y de presentación, qué hacen la tecnología de asistencia y los motores de búsqueda con ellos, y cómo verificar lo que emite su editor.
Negrita no siempre es importante: elija el significado antes que la apariencia
Un código de producto puede estar en negrita únicamente para que los lectores puedan encontrarlo rápidamente; una advertencia puede ser fuerte porque su importancia pertenece al significado de la oración. Esas dos intenciones pueden parecerse en una hoja de estilo predeterminada. Elegir únicamente por la apariencia hace que el marcado sea ambiguo cuando CSS cambia u otro lector consume la estructura.
La barra de herramientas de ToolAcre etiqueta sus acciones en negrita y cursiva, mientras que el desinfectante normaliza los elementos heredados byi a fuerte y em. Se trata de un valor predeterminado útil para la prosa enfatizada, pero el editor aún debe decidir si las palabras seleccionadas realmente tienen importancia o acento en lugar de decoración.
Lo que dice la especificación HTML hoy: resume el significado actual de strong, em, by i
Fuerte representa gran importancia, seriedad o urgencia; em representa el énfasis del acento cuya ubicación puede afectar la interpretación. El elemento b puede llamar la atención sin agregar importancia, mientras que i puede marcar el texto desplazado de la prosa circundante, como un término, voz o convención, sin afirmar el énfasis.
La lección práctica no es que dos etiquetas estén prohibidas. Es que la igualdad visual no borra las diferencias semánticas. La salida estrecha de ToolAcre elige fuerte y em, por lo que el contenido que requiere un desplazamiento meramente estilístico puede necesitar revisión o un flujo de trabajo de destino diferente en lugar de una capacidad de barra de herramientas inventada.
La tecnología de asistencia puede exponer la semántica de manera diferente; este repositorio no prueba ningún anuncio
Las tecnologías de asistencia pueden utilizar semántica de elementos, pero el tratamiento hablado exacto varía según el producto, el modo y la configuración del usuario. El repositorio no contiene ningún paquete de compatibilidad con lectores de pantalla, por lo que este artículo no promete que strong siempre se anunciará con una voz particular o que b siempre permanecerá en silencio.
La estructura sigue siendo importante porque proporciona información de software de la que carece un intervalo con estilo. Pruebe las páginas de representantes con las tecnologías de asistencia en su política de soporte. Un elemento semántico crea una oportunidad para una interpretación significativa; no garantiza un efecto audible universal en todos los entornos.
Los efectos de la búsqueda están fuera de la evidencia de este editor; la semántica aún mejora la estructura del documento
Los motores de búsqueda pueden analizar la estructura del documento, pero ninguna fuente local prueba los cambios en la clasificación al cambiar b por fuerte. Evite convertir el HTML semántico en una fórmula de SEO. La visibilidad de la búsqueda depende del contenido, los enlaces, la accesibilidad técnica y muchos sistemas fuera de este editor.
La razón defendible para utilizar la semántica es la claridad y la interoperabilidad. Los autores, los navegadores y las transformaciones posteriores pueden identificar la importancia o el énfasis deseado sin realizar ingeniería inversa en una declaración de estilo. Cualquier consecuencia de la búsqueda debe describirse únicamente con evidencia de la plataforma relevante, no inferirse de un botón de formato local.
Listas que en realidad son listas: extiende el argumento a <ul> y <ol> en lugar de guiones y numeración manual.
El mismo principio se aplica a las listas. Tres líneas que comienzan con guiones son texto normal, mientras que ul y li representan una colección de elementos pares. Los caracteres numéricos escritos antes de los párrafos no son equivalentes a ol, cuya secuencia y valor inicial opcional son parte de la estructura.
ToolAcre expone comandos de lista numerada y con viñetas y permite que ul, ol y li pasen por su filtro. El comportamiento de los comandos del navegador puede variar, especialmente para el anidamiento, así que inspeccione el código fuente después de crear una lista. La semántica correcta de la lista no excusa la falta de etiquetas, el orden confuso o la profundidad no respaldada en el destino.
Ejemplo resuelto: ToolAcre asigna b a fuerte y i a em durante el filtrado
Escriba "Detener la implementación antes de cambiar el esquema", seleccione "Detener la implementación" y presione Negrita. El comando del navegador puede crear inicialmente b, pero el mapa de alias del desinfectante emite una fuerte emisión. La cursiva sigue el mismo patrón de i a em. El modo fuente revela el resultado normalizado.
Ahora seleccione una etiqueta de producto que solo esté resaltada visualmente. ToolAcre no tiene control de atención solo b o basado en clases, y la marca se incluye en la lista de permitidos solo a través de la edición directa del código fuente en lugar de un reclamo de la barra de herramientas. Decida si fuerte es exacto; de lo contrario, utilice un estilo específico del destino fuera de este flujo de trabajo restringido.
Lo que esto no cubre: atributos ARIA, auditorías de accesibilidad completa o estructura de encabezados, que se cubren por separado.
Este artículo no cubre ARIA, la auditoría completa de accesibilidad, la jerarquía de encabezados ni el comportamiento exacto del motor de búsqueda. Tampoco afirma que todos los elementos en línea incluidos en la lista permitida tengan un control de barra de herramientas. El modo fuente puede retener u, s, sub, sup, mark, small, code, kbd, samp, var y abbr cuando sean válidos, pero los comandos visuales exponen menos opciones.
El filtrado de etiquetas semánticas no desinfecta HTML hostil arbitrario para su publicación. El tokenizador de ToolAcre tiene una limitación explícita del diferencial del analizador. Un servidor que genera envíos que no son de confianza necesita una política y un desinfectante adecuados basados en analizadores, mientras que la revisión de accesibilidad debe examinar el destino final en lugar de solo esta vista previa aislada.
Conclusión: formatee el significado, luego verifique: resume el hábito y cómo el editor HTML WYSIWYG de ToolAcre expone los elementos exactos producidos.
Formatee el significado y luego inspeccione. Strong y em son valiosos cuando la prosa realmente contiene importancia y énfasis; no son sustitutos universales de todos los elementos visuales en negrita o cursiva. ToolAcre hace visible su elección exponiendo el HTML filtrado después de cada acción.
Utilice el control visual para el dibujo, el modo de origen para la verificación y el CSS de destino para la apariencia. Cuando la presentación deseada no tiene un elemento semántico preciso, no fuerce una etiqueta engañosa simplemente porque se parece al diseño. Preservar la intención del autor en un sistema capaz de representarla.