El lenguaje de marcado y su evolución

Fuente: (Fotolia, 2004)

A través de la Norma Técnica Colombiana de Accesibilidad a páginas web NTC

5854, los diseñadores y desarrolladores de sitios web encuentran los parámetros
que deben cumplir sus portales para ser realmente asequibles y poder ser
utilizados eficientemente por la mayoría de las personas. Sin embargo, estos
requerimientos demandan en la mayoría de los casos, intervenir directamente el
código HTML para hacerlo realmente de fácil ingreso.

Anteriormente, se explicaba que todos los usuarios no pertenecen a un mismo

perfil, ya que cada uno tiene intereses y necesidades diferentes con respecto al
uso de la tecnología; sin embargo, todos deben tener el mismo derecho para
acceder oportuna y eficientemente a la información mediada por internet.

Al recordar los diferentes grupos de usuarios debe reflexionarse sobre la forma

correcta de realizar el diseño del sitio web, pues muchos de esos usuarios
pueden no ser capaces de ver, escuchar, desplazarse, comprender fácilmente
la información o pueden tener dificultades para utilizar dispositivos como el
mouse o el teclado. El diseño accesible y universal de toda página web tiene
sus bases técnicas en el marcado del documento, es decir en la gramática del
código HTML.

1
 Desarrollar una página web realmente accesible puede suponer en la mayoría
de los casos un esfuerzo inferior al que se puede imaginar y tiene su
fundamento en el código HTML; el marcado correcto que haga de este
disminuirá el tiempo que se emplea en corregir los posibles fallos de
accesibilidad, característica que favorecerá el sitio web.

A través de esta actividad de aprendizaje se dan a conocer diferentes técnicas

para lograr importantes mejoras en la accesibilidad desde el mismo instante en
que se codifica la página web, además ofrece fundamentos técnicos para cumplir
con la mayoría de puntos de revisión de la norma técnica.

¿Qué es un lenguaje de marcado?

Un lenguaje de marcado es un conjunto de etiquetas o marcas que indican al

agente de usuario la forma en que debe interpretarse la información
enmarcada dentro de estas etiquetas. Comúnmente se confunden los
lenguajes de marcado con los lenguajes de programación, siendo estos
diferentes aunque complementarios en algunos casos, como en las páginas web
dinámicas en donde la programación puede estar desarrollada en un lenguaje
como PHP o JSP y la salida de datos está codificada en el lenguaje de marcado
HTML para ser interpretado por el navegador web.

En términos generales, se pueden encontrar dos grandes clasificaciones para

los lenguajes de marcado:

1. Marcado descriptivo o semántico

Define la presentación del texto, indicando al agente de usuario la forma en que

debe presentar la información. Sin embargo, también es visible para el usuario
que crea el documento, lo que eleva sus posibilidades de uso pero exige
conocimiento específico por parte del usuario.

Este tipo de lenguajes añaden una serie de etiquetas al texto que modifican la
forma en la que es presentado en pantalla, permitiendo editar textos con una
gran cantidad de efectos de formato, uno de los formatos de lenguaje de
marcado procedimental más utilizado es TeX.

Este tipo de marcado se utiliza en actividades de edición y producción

profesional de textos por las inmensas posibilidades de formato que ofrece; sin
embargo, su complejidad lo hace poco usable para el usuario promedio.

2
 2. Marcado procedimental

Debe usarse tags o etiquetas para describir la información pero no especifica

cómo debe ser presentada o en qué orden. Los lenguajes descriptivos más
utilizados y de los cuales se desprenden otros más específicos (como el HTML)
son el SGML y el XML.

Uno de los lenguajes de marcado

descriptivo más utilizados es el HTML
(Hyper Text Markup Language),
puesto que es el más predominante
para la elaboración de sitios web. Es
empleado para describir la
información de la página web a
través de etiquetas y dada su
flexibilidad se usa en conjunto con
otros lenguajes de marcado para
modificar la presentación o con
lenguajes de programación para
definir el comportamiento.
Fuente: (Fotolia, 2004)

El lenguaje HTML

El lenguaje de marcado HTML nació como fruto de las investigaciones de Tim

Berners-Lee durante la década de los ochenta en el CERN, quien como resultado
de su trabajo definió el lenguaje HTML como un subconjunto del conocido
lenguaje SGML y elaboró el concepto del World Wide Web (WWW), en 1991
programó el primer navegador web en modo texto y corriendo sobre un sistema
operativo UNIX.

Varios años después, el lenguaje de marcado HTML se convirtió en norma

internacional con la introducción de la norma ISO 15445 del 15 de mayo del
año 2000, basada en la recomendación HTML 4.01 del W3C.

Desde ese entonces, HTML ha sido el principal lenguaje usado para describir la
estructura y el contenido en las páginas web y hasta un cierto punto, la apariencia
y comportamiento de un documento mediante la inclusión de hojas de estilos y
scripts de Java.

La estructura básica del contenido HTML está compuesta por sus elementos,
estos cuentan con propiedades básicas tales como: atributo y contenido.

3
 Cada atributo y contenido tiene ciertas condiciones de uso para que se
considere válida la gramática y sintaxis del documento HTML y estas condiciones
dependen de la versión de HTML.

Los elementos generalmente tienen una etiqueta de inicio <etiqueta> y una

etiqueta de cierre </etiqueta>, sus atributos están contenidos dentro de la
etiqueta de inicio, dejando el contenido entre las dos etiquetas <etiqueta
atributo="valor">contenido</etiqueta>). Algunas etiquetas, tales como <img>
(etiqueta para imagen) se cierran a sí mismas e incluso algunas como <br> no
tienen contenido y se cierran así mismas.

Etiquetas para documentos HTML

A continuación se explican las etiquetas básicas que componen cualquier

documento HTML:

Tipo de documento

Todo documento HTML debe contener una declaración del tipo de documento
que define la versión de HTML que debe interpretar el navegador para ese
contenido web, la cual debe definir en el inicio y comenzando con el delimitador
<!DOCTYPE html, seguido del identificador del DTD (definición del tipo de
documento PUBLIC "-//w3C//DTD XHTML 1.0 Transitional //EN"
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Etiquetas básicas de la estructura del texto

Es la etiqueta de apertura en donde se indica al navegador que debe

interpretar un documento, dentro de esta se encuentran las demás etiquetas
encerradas.

Cualquier documento HTML (independientemente de su versión o DTD) debe

contener al menos las siguientes etiquetas:

4
 <html> </html>

Es la etiqueta de apertura en donde se indica al navegador que debe

interpretar un documento; dentro de esta se encuentran las demás etiquetas
encerradas.

<head> </head>

Contiene información que no va a ser visible para el usuario pero que aporta
información importante sobre el documento, como el título, enlaces a hojas de
estilo CSS o información de posicionamiento en motores de búsqueda.

<body> </body>

Contiene la información visible para el usuario, que por tanto constituye el

contenido en sí mismo de la página web.

Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página web
</body>
</html>

Estructura y metadatos del documento

Resulta muy importante que pueda proveer información semántica a las

herramientas de indexación, motores de búsqueda y herramientas de asistencia
técnica sobre el sitio web que está creando. Esta información se denomina

5
 metadatos y si están bien elaborados pueden proporcionar a los usuarios
información orientativa acerca del documento.

Los elementos HTML de uso más común y relevante que proporcionan

información incluyen son:

Title: título del documento

La etiqueta title aparece una vez en un documento HTML y tiene como función
establecer el título de la página, el cual es interpretado por el navegador
mostrándolo sobre la parte superior de la ventana, así como por motores de
búsqueda para la indexación de contenido. No confundirla con el atributo title,
el cual se puede utilizar junto a varias etiquetas como <a> o <img>.

Meta: etiquetas de metadatos

Este elemento puede especificar metadatos para un documento HTML, tales como
palabras clave, descripción del sitio, información sobre el autor, actualizaciones
del sitio, ubicación y tipo de tecnología, entre otros. Esta información es
especialmente útil para los motores de búsqueda y algunas etiquetas que
proporcionan información al navegador.

!Doctype: declaración del tipo de documento

Es necesario que siempre se declare el tipo de documento HTML para que el

navegador pueda interpretar correctamente las etiquetas disponibles.

H1, H2, H3, H4, H5 y H6: encabezados de sección

Los encabezados de sección son imprescindibles para generar la estructura

semántica del documento y describir la jerarquía y correspondencia de los
contenidos.

P: párrafos

Es el elemento que genera, agrupa y diferencia las líneas de texto para formar
párrafos.

A continuación se muestra un ejemplo con estas etiquetas:

6
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Título de la página</title>
<meta name="keywords" content="palabras clave" />
<meta name="description" content="descripción del sitio" />
<meta name="generator" content="Joomla! 1.6-Open Source Content
Management" /> </head>
<body>
<h1>Tema principal</h1>
<p>Contenido del tema principal</p>
<h2>Tema secundario</h2>
<p>Contenido del tema secundario</p>
<h2>Otro tema…</h2> <p>Contenido de otros temas…</p>
</body>
</html>

Información sobre el idioma

Es necesario que siempre se facilite la identificación del idioma de la página y

del texto a través del atributo lang, para que tanto el usuario como el navegador y
las ayudas técnicas interpreten correctamente la información.

La identificación del idioma es útil en los casos en que los usuarios acceden a
la página web a través de herramientas de asistencia como lectores de pantalla
o teclados braille, ya que el atributo lang le permite al software de asistencia
la generación de códigos correctos para proporcionar la información al usuario,
por ejemplo, al permitirle al lector de pantalla identificar en dónde hay un cambio
de idioma para cambiar así mismo la pronunciación y acentuación del sintetizador
de voz.

Ejemplo:

<p>La etiqueta <span lang="en">title</span>es utilizada para definir el

idioma del título principal de la página</p>

También se recomienda definir el idioma principal de la página en la

declaración del documento HTML.

7
 Ejemplo:
<html lang="es">

Etiquetado y formato de texto

Em y strong

Estas etiquetas tienen como objetivo proporcionar énfasis semántico y estructural

al texto, al tiempo que ofrecen un efecto visual. Nunca deben usarse las
etiquetas B e I que sólo ofrecen un efecto visual y no proporcionan información
semántica.

Abbr y acronym

Estas etiquetas son utilizadas para señalar las abreviaturas y acrónimos

presentes en los textos.

Ejemplo:

<p>Ingreso al sitio web del <acronym title="Servicio Nacional de

Aprendizaje">SENA</acronym>!
Q y BLOCKQUOTE

Estas etiquetas sirven para señalar citas en línea y en bloques respectivamente.

Ejemplo:

<blockquote cite=" http://www.proverbia.net/citasautor.asp?autor=327">

<p>Nunca consideres el estudio como una obligación, sino como una
oportunidad para penetrar en el bello y maravilloso mundo del saber. Albert
Einstein.</p>
</blockquote>

Listas

Las etiquetas <ol> y <ul> se utilizan para crear listas ordenadas (numeral) y
desordenadas (viñeta) respectivamente, indican al usuario la correspondencia
entre los distintos elementos que componen la lista. A través de la aplicación

8
 de estilos CSS pueden definirse los estilos de los números y de las viñetas para
todos los tipos de lista, no solamente las ordenadas.

Debe evitarse el uso de imágenes como viñetas para listas desordenadas

creadas con los elementos DL, DT, y DD. Recordar que cualquier imagen
utilizada con fines decorativos y que no transmite mayor información al usuario
debe declararse en la hoja de estilos CSS.

Ejemplo de lista ordenada:

<ol>
<li>Internet Explorer.</li>
<li>Mozilla Firefox.</li>
<li>Google Chrome.</li>
</ol>

Este código sería interpretado por el navegador web o las ayudas técnicas de la
siguiente manera:

1. Internet Explorer.
2. Mozilla Firefox.
3. Google Chrome.

Ejemplo de lista desordenada:

<ul>
<li>Internet Explorer.</li>
<li>Mozilla Firefox.</li>
<li>Google Chrome.</li>
</ul>

Este código sería interpretado por el navegador web o las ayudas técnicas de la
siguiente manera:

 Internet Explorer.
 Mozilla Firefox.
 Google Chrome.

9
 Tablas

Numeral de Equivalencias
Requisitos
la norma (pautas WCAG)

Subtítulos (en directo): se

proporciona subtítulos para todo el
3.1.2.4. 1.2.4.
contenido de audio en directo de los
multimedia sincronizados.
Audiodescripción (grabado): se
proporciona una audiodescripción
3.1.2.5. 1.2.5. para todo el contenido de video
grabado dentro de contenido
multimedia sincronizado.
Lengua de señas (grabado): se
debe proporcionar una interpretación
3.1.2.6. 1.2.6. en lengua de señas para todo el
contenido de audio grabado dentro
de contenido multimedia sincronizado.
Fuente: (W3C, 2010)

La etiqueta <table> permite crear espacios de datos relacionados entre filas y

columnas (matrices de datos), comúnmente llamados tablas. Estas pueden ser
muy útiles para representar información relacionada, pero si no se tienen en
cuenta ciertos aspectos de accesibilidad puede resultar muy difícil para algunos
usuarios acceder a esta información.

Al crear una tabla de datos debe proporcionarse un título descriptivo mediante el

elemento <caption> y un resumen que relate el objetivo de la tabla a través del
atributo summary. El título y el resumen de la tabla resultan muy útiles para
personas que navegan con lectores de pantalla o teclados braille, pues le
ofrecen al usuario una descripción de la tabla.

Para la relación entre filas y columnas, se deben proporcionar subtítulos

descriptivos para las etiquetas de encabezado de tabla con el atributo abbr de

10
 <th> e identificar las estructuras de filas utilizando la etiqueta <thead> para
encabezados de tabla, <tfoot> para pies de tabla y <tbody> para grupos de fila.

Los diseñadores y desarrolladores de sitios web deben ser conscientes de que las
tablas de datos son elementos cuya función, es relacionar el contenido y que bajo
ninguna circunstancia deben ser usadas para maquetar un sitio web.

Vínculos

Los enlaces son uno de los elementos más importantes y utilizados en las
páginas web, pues son la base principal de la navegación por internet, al permitir
al usuario ir de un sitio a otro a través de los destinos de los enlaces; por lo tanto,
debe prestarse especial atención a la forma en que se crean los enlaces, sus
textos y su comportamiento.

Al escribir el texto para un enlace, este deber ser lo suficientemente descriptivo

para que el usuario pueda intuir lo que encontrará al acceder a dicho vínculo,
razón por la cual frases como haga clic aquí, ver más o similares están
completamente desaconsejados, pues obligan al usuario a conocer el contexto de
la página de antemano para anticiparse a lo que encontrarán tras el enlace y esto
puede generar dificultad particularmente en la navegación para usuarios ciegos o
con problemas cognitivos. Además de textos adecuados en los enlaces se debe
especificar una descripción clara del mismo a través valor del atributo title.

Ejemplo:

<a href="ventas.html">Tienda online</a>

<a href="suscribe.hml" title="Al hacer clic se suscribirá a nuestro boletín">
Suscríbase a nuestro boletín</a>
<a href="mapa.html" target="_blank" title="El mapa de Google se abrirá en
una nueva ventana">Cómo llegar</a>

Aunque siempre debe procurarse utilizar textos y no imágenes como enlaces,

cuando se usa una imagen como vínculo hay que especificar un texto alternativo
para esta, en caso de que no pueda ser visualizada, de forma tal que el enlace no
pierda su valor semántico.

Ejemplo:

<a href="ayuda.html"><img src="help.jpg" alt="Ayuda y soporte técnico"></a>

11
 Etiquetas para imágenes, audio, video y formularios

Imágenes

Fuente: (Fotolia, 2004)

Uno de los elementos multimedia más utilizados son las imágenes por la
capacidad que estas tienen para transmitir información. Sin embargo, si el usuario
no puede ver la imagen por alguna causa (persona ciega, conexión a internet
lenta, navegador no soportado, entre otros) estos datos no pueden ser
transferidos. Para solucionar este inconveniente se proporciona un equivalente
textual con el atributo alt y cuando sea necesario, una descripción completa de la
imagen con el atributo longdesc.

Ejemplos:

<img src="logo_empresa.jpg" alt="Nombre de la empresa">

Ejemplo:

<img src="estadisticas.gif" alt="Estadísticas de uso del portal"

longdesc="estadísticas.html">

<a href="ayuda.html"><img src="help.jpg" alt="Ayuda y soporte

técnico"></a>

12
 En el segundo ejemplo se ofrece un enlace a la página «estadisticas.html» en
donde se ofrece una descripción detallada de la imagen «estadisticas.gif» en el
caso en que el usuario necesite una descripción detallada.

Audio y video

En el caso de utilizar elementos multimedia como audio, video o animaciones

debe ofrecerse una alternativa textual, al igual que con las imágenes, de forma tal
que un usuario ciego, sordo o que simplemente no puede ver el video o escuchar
el audio, porque no tiene instalados los plugins necesarios, pueda acceder a una
versión alternativa del elemento.

Formularios

Los formularios son elementos que permiten el intercambio de datos en las

páginas web y la interacción de los usuarios con los servicios del sitio. Debido a la
importancia de estos, es necesario codificarlos de forma tal que favorezcan la
accesibilidad y el uso para la mayoría de usuarios.

Todo formulario está compuesto por diferentes elementos de entrada de

información como campos de texto, menús de selección, botones y campos de
selección, los cuales se deben agrupar según su función en el formulario a través
de la etiqueta <fieldset> e identificarlos con la etiqueta <legend>.

Ejemplo:

<form action="send.php" method="post">

<fieldset>
<legend>Datos personales</legend>
<label for="nombre">Nombre: </label>
<input type="text" id="nombre" tabindex="1" name="nombre">
<label for="email">Email: </label>
<input type="text" id="email" tabindex="2" name="email" >
</fieldset>
<fieldset>
<legend>Mensaje</legend>
<textarea name=mensaje rows="20" cols="80"> Escriba su mensaje.
</textarea>
<input type="submit" value="Enviar mensaje">
</fieldset>
</form>

13
 Una etiqueta se asocia implícitamente con su control de formulario, bien
sea mediante las marcas o por su posición en la página. El ejemplo
siguiente muestra cómo una etiqueta y un control de formulario pueden
asociarse implícitamente mediante marcadores.

Ejemplo:
<LABEL for="nombre">Nombre:
<input type="text" id="nombre" tabindex="1">
</LABEL>

(W3C, 2008)

14
 Referencias

 Accesibilidad a páginas web (NTC 5854). (2011, 15 de julio). Instituto

Colombiano de Normas Técnicas y Certificación (ICONTEC), 2011, 15 de julio.

 Fotolia. (2004). 3D Word HTML on yellow background. Consultado el 30 de

abril de 2014, en http://co.fotolia.com/id/48167588

 Fotolia. (2004). Globalization concept. Consultado el 30 de abril de 2014, en

http://co.fotolia.com/id/55704351

 Fotolia. (2004). Mondialisation. Consultado el 30 de abril de 2014, en

http://co.fotolia.com/id/55983405

 Ministerio de Tecnologías de la Información y las Comunicaciones. (2011).

Manual 3.0 para la Implementación de la Estrategia de Gobierno en Línea En
las Entidades del Orden Nacional de la República de Colombia. Bogotá,
Colombia: Ministerio de Tecnologías de la Información y las Comunicaciones.

 Sidar. (2009). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el

10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/

 W3C. (2008). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el

10 de abril de 2014, en http://www.w3.org/TR/WCAG20/

 W3C. (2010). Lengua de señas (grabada). Consultado el 10 de abril de 2014,

en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/media-
equiv-sign.html

Control del documento

Nombre Cargo Dependencia Fecha

Ministerio de
Tecnologías de la
Mayo de
Autores Información y las
2012
Comunicaciones -
Gobierno en Línea
Guionista - Centro
Paola Andrea Mayo de
Adaptación Línea de Agroindustrial
Bobadilla Gutiérrez 2014
producción Regional Quindío

15