Edición con HTML semántico

El seguimiento de cambios es una función de edición por excelencia para comparar versiones de contenido. Si bien estamos acostumbrados a realizar un seguimiento de los cambios en un documento de procesamiento de textos, en realidad tenemos elementos HTML capaces de hacerlo. Hay una gran cantidad de elementos que podemos utilizar para este proceso. Los principales que veremos delson insy mark. Pero, como veremos, al combinarlos con otros elementos, incluidos uy asidemarcados personalizados, podemos obtener el mismo tipo de funciones de seguimiento visual de cambios que Word, Google Docs o incluso WordPress.

Empecemos por el inselemento.

Designa el instexto que debería insertarse o ya se ha insertado. El tiempo verbal se vuelve un poco complicado aquí porque, si bien la insetiqueta sugiere una edición, ya debe haber inssido insertada, en virtud de estar en la etiqueta. Es como decir: “Oye, inserta estas cosas que técnicamente ya están ahí”.

Observe cómo el navegador nos subraya el texto insertado. Es bueno tener ese tipo de indicación visual, incluso si podría confundirse con un subrayado usando el uelemento, un enlace o la text-decorationpropiedad CSS.

Emparejemos la inserción con el delelemento, lo que sugiere texto que debería eliminarse o que se ha eliminado.

Los estilos del navegador delson como un elemento tachado ( s), pero significan cosas diferentes. deles para contenido que debe eliminarse/editarse (como esa sección que parece espeluznante arriba), mientras que ses para contenido que ya no es verdadero o inexacto (como la creencia del autor de la carta de que esa sección sería entrañable).

Bien, genial, tenemos estos elementos HTML semánticos y producen algunos indicadores visuales luminosos para el contenido que se inserta o elimina. Pero hay algo que quizás no sepas sobre estos elementos: acepta un citeatributo que puede usarse para anotar el cambio.

citetoma una URL con el formato adecuado que proporciona puntos en algún lugar para encontrar las razones por las que se realizó el cambio. Ese lugar podría incluso ser un ancla en la página existente.

Eso está bien, pero un problema es que la URL de la cita en realidad no es visible ni se puede hacer clic en ella. Podríamos usar algo de magia CSS para mostrarlo. Pero incluso entonces, no lo llevará a la cita cuando haga clic… ni se podrá copiar.

Dicho esto, deja semánticamente claro qué es parte de la edición y qué no. Si envolvemos insy delen un enlace (o incluso al revés), todavía no está claro si se supone que el enlace es parte del contenido editado o no.

¡Pero! Hay un segundo atributo que insambos delcomparten: datetime. Y así es como podemos indicar cuándo se realizó una edición. Nuevamente, esto no está disponible de inmediato para el usuario, pero mantiene semánticamente claro qué es parte de la edición y qué no.

El formato HTML datetime, como fecha y hora legibles por máquina, requiere precisión y, por lo tanto, puede ser un poco irritable, pero sus inquilinos generales no son demasiado difíciles. Sin embargo, vale la pena señalar que, mientras datetimese usa en otros elementos, como time, formatear el valor de una manera que no incluya al menos un día, mes y año específicos insy delsería problemático, oscureciendo la fecha y hora de un editar en lugar de proporcionar claridad.

Podemos aclarar las cosas con un poco más de magia CSS. Por ejemplo, podemos revelar el datetimevalor al pasar el mouse:

Las casillas de verificación también funcionan:

Pero una buena edición es mucho más que simplemente agregar y eliminar contenido. Es hacer preguntas y descubrir qué diablos pretendía el autor. (Para mí, personalmente, también se trata de salvarme de errores ortográficos y gramaticales vergonzosos).

Entonces, conoce el markelemento.

markSeñala un texto de especial interés para el lector. Por lo general, se muestra como un fondo amarillo detrás del contenido.

Si eres el editor y quieres escribirle una nota al escritor (llamémosle a esa persona Stanley Meagher) con sugerencias para hacer que la carta de Stanly sea más asombrosa (o menos espeluznante, al menos) y esa nota es lo suficientemente grande como para justificar el flujo. contenido (es decir, elementos a nivel de bloque), entonces la nota puede ser un asideelemento.

asideMr. Meagher, I highly recommend you remove this list of preferred cheeses and replace it with things you love about the woman you are writing to. While I'm sure there are many people for whom your list would be interesting if not welcome, that list rarely includes a romantic interest in the midst of your profession of love. Though, honestly, if she is as perfect for you as you believe, it may be the exact thing you need to test that theory./aside

Pero a menudo querrás hacer algo en línea para señalar algo o hacer un comentario sobre la estructura de la oración o la elección de palabras. Desafortunadamente, no existe una forma integrada de hacerlo en HTML, pero con un poco de ingenio y algo de CSS puedes agregar una nota.

spanCheesecake isn't really a "cheese"/span

El uelemento, que durante mucho tiempo fue un anatema para los desarrolladores web por temor a confusión con un enlace, en realidad tiene un uso (lo sé, a mí también me sorprendió). Se puede utilizar para señalar un error ortográfico (aparentemente los subrayados garabatos y rojos no son una característica estándar de representación del navegador). Aún así, no debe usarse en ningún lugar donde pueda confundirse con un enlace real y, cuando se use, definitivamente debe usar un color que lo distinga de los enlaces. El color rojo puede ser apropiado para indicar un error.

pPlease, uLura/u tell me your answer. Will you wear my mathlete letter jacket?/p

Como hemos visto a lo largo de este artículo, los estilos predeterminados del navegador para los elementos que hemos cubierto hasta ahora son ciertamente útiles, pero también pueden resultar confusos, ya que apenas se distinguen de otros tipos de contenido. Si un usuario no sabe que el documento muestra ediciones, es posible que el usuario malinterprete o malinterprete el estilo. Por lo tanto, sugeriría algunos estilos adicionales o alternativos para ayudar a aclarar lo que está pasando.

ins {  padding: 0 0.125em;  text-decoration: none;  background-color: lightgreen}del {  padding: 0 0.125em;  text-decoration: none;  background-color: pink;}mark {  padding: 0 0.125em;}.note {  padding: 0 0.125em;  background-color: lightblue;}aside.note {  padding: 0.5em 1em;}u {  text-decoration: none;  border-bottom: 3px red dashed;}

Me hago la misma pregunta cada vez que aprendo algo nuevo en HTML: ¿Cómo puedo animar esto innecesariamente?

Sería fantástico si pudiéramos atenuar los cambios para que al hacer clic en una casilla de verificación las ediciones también desaparecieran.

Las notas y el texto de dellas etiquetas no se pueden difuminar con CSS de la misma manera que los colores de fondo y los rellenos. Además, mostrar: ninguno no produce ningún desvanecimiento. Todo vuelve a su lugar, incluidos los fondos. Pero usar una combinación de la visibilitypropiedad CSS con un conjunto heighty widthun valor de 0 permite que los fondos se desvanezcan suavemente.

---

Y ahí lo tiene: especificaciones y algunas estrategias para realizar un seguimiento de las ediciones en la web (además de un excelente ejemplo de cómo no escribir una carta de amor (o, tal vez, cómo escribir una tan perfecta que responder positivamente sea una firmar que sois almas gemelas).

Editar: Adrian Roselli agrega excelente información de accesibilidad en los comentarios. Antes de implementar estas ideas en producción, asegúrese de considerar esas sugerencias.