¿Qué es HTML Authoring y porqué es importante que lo aprendas?

2024/09/15

HTML (Hypertext Markup Language) es un lenguaje muy común utilizado por todo aquel que alguna vez ha desarrollado algo para la web.

*En español se podría traducir a Lenguaje de Marcado de Hipertexto. Pero…eso no importa porque nadie le lllama así. Con HTML nos entendemos.

He aquí un ejemplo de un documento de HTML simple y como se ve en la web.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejemplo</title>
    </head>
    <body>
        <p>Un ejemplo de un texto.</p>
        <h1>Texto H1</h1>
        <h2>Texto H2</h2>
        <h3>Texto H3</h3>
        <h4>Texto H4</h4>
        <h5>Texto H5</h5>
        <h6>Texto H6</h6>
        <i>Un texto idiomatico. Usado normalmente para terminos tecnicos o conceptos fuera del idioma original del texto.</i> <br>
        <em>Un texto con enfasis. Usado para enfatizar una parte del texto.</em> <br>
        <a href="https://www.google.com/">Link a Google</a> <br>
        <label for="text-field">Un campo de Texto: </label> <br>
        <input type="text" id="text-field" name="text-field" required>  <br>
    </body>
</html>

Nada que no hayas visto antes. Esas etiquetas son bien conocidas. (Aunque no tal vez siempre usadas correctamente)

Pero bueno probablemente ya sabes que HTML se usa para definir la estructura de una página web.

Esto es algo que representa muy bien la famosa analogía de la casa:

src = https://medium.com/@fbado66/a-little-css-goes-a-long-way-3a91c88a188f

Y entender HTML es bastante simple la verdad. Sin embargo eso provoca muchas veces que se subestime lo que puede ofrecerenos y por ende la mayoria de los desarrolladores nunca aprenden correctamente el uso de HTML.

¿Pero entonces se puede hacer mal el HTML? ¿Que no solo es cuestion de corregir los tags (etiquetas) y ya?

*Si no sabes que es un tag/etiqueta HTML debo ser sincero y decirte que esté tema es algo avanzado para ti. Pero puedes empezar con HTML aquí.

Bueno HTML no es un lenguaje de programación y por lo tanto no tiene la rigídez de uno. El uso correcto de HTML implica volverse un autor de la pagina que se esta creando y crear el HTML de manera que le de significado al contenido. Es decir: implementar HTML Authoring (autoría de HTML).

Pero entender que es exactamente HTML Authoring es imposible sin entender como funciona un navegador y como es que este interpreta un documento HTML.

Asi que sin mas empecemos:

¿Qué es un navegador para HTML?

HTML como ya mencionamos es un lenguaje que tiene como fin darle significado al contenido que alberga. El objetivo es que cualquier programa que lea el documento de HTML lo pueda interpretar y pueda saber que significa cada elemento.

A ver espera. ¿Como que cualquier programa? Estamos hablando del navegador, ¿no? De Chrome, Firefox, Edge o lo que sea.

Nop.

HTML no esta hecho solo para que un navegador lo lea. Los programas que son capaces de leer un documento de HTML se dice que actuan como intermediarios del usuario y por lo tanto se les llama User-Agents.

¿Ya habías escuchado de los User-Agents? Si no lo habías hecho te recomiendo leer Aprende que es un User-Agent en 5 minutos.

*Adicionalmente para expandir el conocimiento de los User-Agents puedes leer acerca de su uso dentro de los headers/encabezados de HTTP. Este no es un tema fuertemente relacionado con el uso de los User-Agents en este artículo pero es bueno saberlo para evitar confusiones entre estos temas.

Una vez tenemos claro el concepto de User-Agents, podemos entonces empezar a entender que es eso de darle significado al HTML. ¿Por qué? ¿Para qué? ¿Cuál es el punto de hacer eso?

¿Qué es HTML Authoring?

HTML Authoring o Autoreo de HTML es simplemente la práctica de darle el significado apropiado al contenido de tu HTML. Hay un punto para que existan tantos tags de HTML. Cada uno de ellos tiene un propósito distinto.

Empecemos con un ejemplo sencillo. Precisamente el documento de HTML que vimos al inicio:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejemplo</title>
    </head>
    <body>
        <p>Un ejemplo de un texto.</p>
        <h1>Texto H1</h1>
        <h2>Texto H2</h2>
        <h3>Texto H3</h3>
        <h4>Texto H4</h4>
        <h5>Texto H5</h5>
        <h6>Texto H6</h6>
        <i>Un texto idiomatico. Usado normalmente para terminos tecnicos o conceptos fuera del idioma original del texto.</i> <br>
        <em>Un texto con enfasis. Usado para enfatizar una parte del texto.</em> <br>
        <a href="https://www.google.com/">Link a Google</a> <br>
        <label for="text-field">Un campo de Texto: </label> <br>
        <input type="text" id="text-field" name="text-field" required>  <br>
    </body>
</html>

Veamos lo que significan cada tag dentro de <body>

  • <a>
    • Se utiliza para poner links de navegación ya sea dentro de la misma página o hacia alguna página diferente.
  • <input>
    • Se utiliza para definir diferentes campos que permiten introducir información.
  • <p>
    • Para escribir un texto.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    • Para escribir titulos y subtitulos. Entre menor es el numero menor es la categoría del título.
  • <i>
    • Para texto idomatico que es de otro lenguaje o que representa nombre técnicos.
  • <em>
    • Para enfatizar una parte del texto.
  • <label>
    • Un texto que se asocia con otro elemento. Generalmente un <input>.

A esto nos referimos con darle significado al contenido del HTML. A utilizar correctamente los tags para darle el propósito correct a cada parte de nuestro texto.

De nada nos sirve tener todo dentro de una sola etiqueta como <p> o alguna otra, porque entonces no se diferenciaría una parte del texto de otras.

Porsupuesto, como desarrolladores nos puede dar igual esta parte. Pero recuerda que un sitio web al final se hace para ser leído.

Si queremos tener buena autoría de HTML debemos cambiar nuestro sombrero de desarrollador y temporalmente usar uno de escritor y autor.

El significado en el navegador

Es bien sabido que este HTML no se va a ver bien por si solo. Para que lo haga tenemos que agregarle CSS.

Pero entonces…¿porqué se le agregan estilos a los textos si solo usamos HTML?

Evidentemente tu no agregaste esos estilos. ¿Quién lo hizo entonces?

La respuesta es…¡¡el User-Agent!! El cual en este caso es el navegador.

Asi que en realidad el navegador es quien decide como se ve cada elemento:

  • Los <p> se mantienen con un estilo y tamaño estándar.
  • Los <h1>, <h2>, <h3>, etc., serán mas grandes que el texto normal y serán en negritas.
  • Los <a> serán azules antes de darles click y morados despues.
  • Los <i> y <em> se representarán como italicas.

Ahora que sabes esto probablemente tengas la duda. Pero…entonces ¿Chrome despliega esto de manera diferente a otros navegadores? ¿Firefox lo hace diferente? ¿Edge lo hace diferente? ¿Todos lo hacen diferente?

No. Los navegadores siguen la especificación de W3C (World Wide Web Consortium) para definir funcionalidad común.

Eso sí. Si se define a través del W3C que un día los <a> deberán ser verdes y los <h2> morados, los navegadores harán los cambios respectivos. Así que… no te debe sorprender que un día puedan cambiar dichos estilos.

*Porsupuesto en un proyecto real, se espera que estes utilizando CSS así que no te debería afectar realmente, ya que la prioridad la tendría tu misma hoja de estilos.

Muy bien entonces ya sabemos de donde vienen esos estilos…pero ¿para qué existen en primer lugar? Se supone que HTML es solo para definir la estructura y CSS para dar los estilos.

Aqui viene un punto crucial. El navegador decide darles una representación visual a los elementos HTML no para que se vean bien, sino para diferenciar cada elemento. Porque cada uno significa y representa algo diferente en el texto.

Piensalo un momento.

Si tienes que aplicar estilos específicos a los labels de tu formulario: ¿No sería más fácil poder seleccionar todas las etiquetas <label> con seguridad en lugar de preocuparse de si usaste otra etiqueta como <p> y tener agregar clases o ids?

Si tienes que aplicar estilos específicos a los títulos: ¿No sería más fácil haber estandarizado el HTML desde el incio para que todos sean identificado con <h1> y por lo tanto poder solo cambiar esos estilos?

Una buen autoría de HTML se hace no con el objetivo de que se vean bien los estilos, sino para que cualquier programa que parse o trabaje con tu documento HTML pueda identificar fácilmente qué es qué.

Pero y si no lo haces…¿que pasa?

Pues la respuesta es algo anticlimática.

En un navegador…no pasa nada.

¡¿Tanto para esto?!

Lamentablemente con un navegador no puedes ver las consecuencias. Es un mal ejemplo. Pero es un ejemplo con el que teníamos que empezar porque es el que todo mundo conoce.

Sin embargo hay otro tipo de User-Agent que hará que si veas las consecuencias de un mal HTML Authoring.

El significado en un Screen Reader

Empecemos por lo básico.

¿Qué es un Screen Reader?

Un Screen Reader es un programa que tiene como objetivo proporcionar accesibilidad a las personas con impedimentos visuales.

Para Windows tenemos el Narrador de Windows por defecto o podemos descargar NVDA. Por otra parte en Mac tenemos VoiceOver que también forma parte por defecto del sistema.

Utilizar un Screen Reader requiere una curva de aprendizaje algo compleja. Sin embargo si te interesa aprender mas del tema de accesibilidad es necesario que aprendas a utilizarlos para que entiendas sus especificidades.

¿Cómo interpreta un Screen Reader nuestro HTML?

Veamos un ejemplo:

Como puedes ver en el video. El Screen Reader lee de corrido todo el contenido. Este es el mismo HTML que hemos ustado usando (con unas adiciones mínimas en el contenido):

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejemplo</title>
    </head>
    <body>
        <p>Un ejemplo de un texto. Este es un texto estándar. Usado para representar información diversa.</p>
        <h1>Texto H1</h1>
        <h2>Texto H2</h2>
        <h3>Texto H3</h3>
        <h4>Texto H4</h4>
        <h5>Texto H5</h5>
        <h6>Texto H6</h6>
        <i>Un texto idiomatico. Usado normalmente para terminos tecnicos o conceptos fuera del idioma original del texto.</i> <br>
        <em>Un texto con énfasis. Usado para enfatizar una parte del texto.</em> <br>
        <a href="https://www.google.com/">Link a Google</a> <br>
        <label for="text-field">Un campo de Texto: </label> <br>
        <input type="text" id="text-field" name="text-field" required>  <br>
    </body>
</html>

Si te fijas en el video la voz del narrador, el tono, cambia dependiendo que línea esta leyendo. ¿Por qué pasa esto?

Simple. Así como el navegador decidió el color y la fuente de los elementos <em>, <i>, <a>, <p> y de todos los tags h, del <h1> al <h6>, el Screen Reader tomó sus propias decisiones en cuánto a como representar cada uno de ellos:

  • Los <p> se leen en un tono estándar.
  • Los <h1>, <h2>, <h3>, etc., se leen en un tono estándar pero se menciona el nivel de heading antes de leer el título/subtítulo.
  • Los <a> se leen en tono estándar pero mencionando que son un vínculo antes de leer el texto correspondiente.
  • Los <i> y <em> se lee con un tono diferente. Para diferenciar la parte del texto idiomatica y/o la de énfasis del un texto normal con la etiqueta <p>.

¿Qué pasaría si hicieramos un documento de HTML sin seguir estas reglas básicas?

Obviamente ya te lo puedes imaginar. El no cuidar el HTML Authoring afecta directamente la experiencia de los usuarios que usan un Screen Reader. Ellos dependen de estas herramientas para diferenciar las diferentes secciones de un sitio web y si no lo haces bien… !no podrían entender nada!

El significado en otros programas

Hasta ahora ya viste como se interpreta el significado de los tags de HTML en el navegador y en un screen reader.

¿Qué mas hay? Si revisaste Aprende que es un User-Agent en 5 minutos, habrás visto que hay bastantes tipos diferentes de User-Agents.

Al final el propósito de cada User-Agent es diferente y por lo tanto el uso que le den a cada tag de HTML será diferente.

Repasemos el elemento <a>:

  • Un navegador le agrega estilos para que sea de color azul y el texto este subrayado-
  • Un screen reader agrega en el audio la palabra “vínculo“ antes de reproducri el audio del texto.

¿Qué harán otros programas?

Feed Reader y Web Crawler (Google Bot)

Un feed reader es un programa comúnmente usado para agregar noticias o posts a una lista de lectura. La idea es presentarle al usuario una lista de todo lo que el haya agregado de manera accesible y fácil de entender

No es necesario ponernos a investigar exactamente como lo hace pero probablemente te puedes imaginar que un feed reader buscará información relevante en el HTML de las páginas que los usuarios le indiquen por medio de los tags.

Un web crawler por otra parte es un programa que escanea en la web buscando páginas o contenido específico. Un web crawler muy conocido es precisamente el bot de Google que hace esta función para indexar las páginas web y mostrarnos los resultados relevantes cuando utilizamos su buscador.

Ambos tanto el feed reader como el web crawler suelen buscar la información más relevante de una página web y tienden a darle mayor peso porsupuesto a la información que se encuentra entre sus títulos, sus subtítulos, (los tags de <h1> o <h2>), el primer párrafo (el tag <p>) y los <a> para analizar los lugares a los que redirige el mismo sitio.

*Porsupuesto esta no es una lista absoluta de lo que toman en cuenta.

Herramientas de pruebas de automatización (Automated Testing Tools)

Estas herramientas son programas utilizados para realizar pruebas automatizadas de código. Sirven para mucho más que solo HTML, pero lo incluyen. Y como el propósito de estos programas es validar las reglas de negocio que uno defina, también necesitan parsear el HTML y clasificar la información dependiendo de los tags que encuentren.

En este caso no le dan una representación visual a los elementos necesariamente. Pero igual es importante tener una buena autoría dado que eso puede afectar la validación de las pruebas.

Como desarrolladores de software es fácil centrarse en las partes más complejas que HTML como Javascript o incluso CSS (sin mencionar porsupuesto los mil y un lenguajes que existen aparte de este trío). Esto ha relegado a HTML al olvido prácticamente.

Sin embargo como puedes ver el aprender a utilizarlo correctamente eleva la calidad de tus páginas y aplicaciones. Haciendo así a tu proyecto, compatible con un mayor numéro de programas y logrando aumentar el alcance de usuarios que tienes.