El lenguaje de marcado y su evolucin

Fuente: (Fotolia, 2004)

A travs de la Norma Tcnica Colombiana de Accesibilidad a pginas web NTC

5854, los diseadores y desarrolladores de sitios web encuentran los parmetros
que deben cumplir sus portales para ser realmente asequibles y poder ser
utilizados eficientemente por la mayora de las personas. Sin embargo, estos
requerimientos demandan en la mayora de los casos, intervenir directamente el
cdigo HTML para hacerlo realmente de fcil 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 tecnologa; sin embargo, todos deben tener el mismo derecho para
acceder oportuna y eficientemente a la informacin mediada por internet.
Al recordar los diferentes grupos de usuarios debe reflexionarse sobre la forma
correcta de realizar el diseo del sitio web, pues muchos de esos usuarios
pueden no ser capaces de ver, escuchar, desplazarse, comprender fcilmente
la informacin o pueden tener dificultades para utilizar dispositivos como el
mouse o el teclado. El diseo accesible y universal de toda pgina web tiene
sus bases tcnicas en el marcado del documento, es decir en la gramtica del
cdigo HTML.

Desarrollar una pgina web realmente accesible puede suponer en la mayora

de los casos un esfuerzo inferior al que se puede imaginar y tiene su
fundamento en el cdigo HTML; el marcado correcto que haga de este
disminuir el tiempo que se emplea en corregir los posibles fallos de
accesibilidad, caracterstica que favorecer el sitio web.
A travs de esta actividad de aprendizaje se dan a conocer diferentes tcnicas
para lograr importantes mejoras en la accesibilidad desde el mismo instante en
que se codifica la pgina web, adems ofrece fundamentos tcnicos para cumplir
con la mayora de puntos de revisin de la norma tcnica.
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 informacin
enmarcada dentro de estas etiquetas. Comnmente se confunden los
lenguajes de marcado con los lenguajes de programacin, siendo estos
diferentes aunque complementarios en algunos casos, como en las pginas web
dinmicas en donde la programacin 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 trminos generales, se pueden encontrar dos grandes clasificaciones para
los lenguajes de marcado:
1. Marcado descriptivo o semntico
Define la presentacin del texto, indicando al agente de usuario la forma en que
debe presentar la informacin. Sin embargo, tambin es visible para el usuario
que crea el documento, lo que eleva sus posibilidades de uso pero exige
conocimiento especfico por parte del usuario.
Este tipo de lenguajes aaden 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 ms utilizado es TeX.
Este tipo de marcado se utiliza en actividades de edicin y produccin
profesional de textos por las inmensas posibilidades de formato que ofrece; sin
embargo, su complejidad lo hace poco usable para el usuario promedio.

2. Marcado procedimental
Debe usarse tags o etiquetas para describir la informacin pero no especifica
cmo debe ser presentada o en qu orden. Los lenguajes descriptivos ms
utilizados y de los cuales se desprenden otros ms especficos (como el HTML)
son el SGML y el XML.
Uno de los lenguajes de marcado
descriptivo ms utilizados es el HTML
(Hyper Text Markup Language),
puesto que es el ms predominante
para la elaboracin de sitios web. Es
empleado
para
describir
la
informacin de la pgina web a
travs de etiquetas y dada su
flexibilidad se usa en conjunto con
otros lenguajes de marcado para
modificar la presentacin o con
lenguajes de programacin 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 dcada 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 aos despus, el lenguaje de marcado HTML se convirti en norma
internacional con la introduccin de la norma ISO 15445 del 15 de mayo del
ao 2000, basada en la recomendacin HTML 4.01 del W3C.
Desde ese entonces, HTML ha sido el principal lenguaje usado para describir la
estructura y el contenido en las pginas web y hasta un cierto punto, la apariencia
y comportamiento de un documento mediante la inclusin de hojas de estilos y
scripts de Java.
La estructura bsica del contenido HTML est compuesta por sus elementos,
estos cuentan con propiedades bsicas tales como: atributo y contenido.

Cada atributo y contenido tiene ciertas condiciones de uso para que se

considere vlida la gramtica y sintaxis del documento HTML y estas condiciones
dependen de la versin de HTML.
Los elementos generalmente tienen una etiqueta de inicio <etiqueta> y una
etiqueta de cierre </etiqueta>, sus atributos estn 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 continuacin se explican las etiquetas bsicas que componen cualquier
documento HTML:
Tipo de documento
Todo documento HTML debe contener una declaracin del tipo de documento
que define la versin 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 (definicin 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 bsicas 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 dems etiquetas
encerradas.
Cualquier documento HTML (independientemente de su versin o DTD) debe
contener al menos las siguientes etiquetas:

<html> </html>
Es la etiqueta de apertura en donde se indica al navegador que debe
interpretar un documento; dentro de esta se encuentran las dems etiquetas
encerradas.
<head> </head>
Contiene informacin que no va a ser visible para el usuario pero que aporta
informacin importante sobre el documento, como el ttulo, enlaces a hojas de
estilo CSS o informacin de posicionamiento en motores de bsqueda.

<body> </body>

Contiene la informacin visible para el usuario, que por tanto constituye el

contenido en s mismo de la pgina 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>Ttulo de la pgina</title>
</head>
<body>
Contenido de la pgina web
</body>
</html>

Estructura y metadatos del documento

Resulta muy importante que pueda proveer informacin semntica a las
herramientas de indexacin, motores de bsqueda y herramientas de asistencia
tcnica sobre el sitio web que est creando. Esta informacin se denomina

metadatos y si estn bien elaborados pueden proporcionar a los usuarios

informacin orientativa acerca del documento.
Los elementos HTML de uso ms comn y relevante que proporcionan
informacin incluyen son:
Title: ttulo del documento
La etiqueta title aparece una vez en un documento HTML y tiene como funcin
establecer el ttulo de la pgina, el cual es interpretado por el navegador
mostrndolo sobre la parte superior de la ventana, as como por motores de
bsqueda para la indexacin 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, descripcin del sitio, informacin sobre el autor, actualizaciones
del sitio, ubicacin y tipo de tecnologa, entre otros. Esta informacin es
especialmente til para los motores de bsqueda y algunas etiquetas que
proporcionan informacin al navegador.
!Doctype: declaracin 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 seccin
Los encabezados de seccin son imprescindibles para generar la estructura
semntica del documento y describir la jerarqua y correspondencia de los
contenidos.
P: prrafos
Es el elemento que genera, agrupa y diferencia las lneas de texto para formar
prrafos.
A continuacin se muestra un ejemplo con estas etiquetas:

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ttulo de la pgina</title>
<meta name="keywords" content="palabras clave" />
<meta name="description" content="descripcin 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>

Informacin sobre el idioma

Es necesario que siempre se facilite la identificacin del idioma de la pgina y
del texto a travs del atributo lang, para que tanto el usuario como el navegador y
las ayudas tcnicas interpreten correctamente la informacin.
La identificacin del idioma es til en los casos en que los usuarios acceden a
la pgina web a travs de herramientas de asistencia como lectores de pantalla
o teclados braille, ya que el atributo lang le permite al software de asistencia
la generacin de cdigos correctos para proporcionar la informacin al usuario,
por ejemplo, al permitirle al lector de pantalla identificar en dnde hay un cambio
de idioma para cambiar as mismo la pronunciacin y acentuacin del sintetizador
de voz.
Ejemplo:
<p>La etiqueta <span lang="en">title</span>es utilizada para definir el
idioma del ttulo principal de la pgina</p>
Tambin se recomienda definir el idioma principal de la pgina en la
declaracin del documento HTML.

Ejemplo:
<html lang="es">
Etiquetado y formato de texto
Em y strong
Estas etiquetas tienen como objetivo proporcionar nfasis semntico y estructural
al texto, al tiempo que ofrecen un efecto visual. Nunca deben usarse las
etiquetas B e I que slo ofrecen un efecto visual y no proporcionan informacin
semntica.
Abbr y acronym
Estas etiquetas son utilizadas para sealar las abreviaturas y acrnimos
presentes en los textos.
Ejemplo:
<p>Ingreso al sitio web del
Aprendizaje">SENA</acronym>!
Q y BLOCKQUOTE

<acronym

title="Servicio

Nacional

de

Estas etiquetas sirven para sealar citas en lnea y en bloques respectivamente.

Ejemplo:

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

<p>Nunca consideres el estudio como una obligacin, 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 (vieta) respectivamente, indican al usuario la correspondencia
entre los distintos elementos que componen la lista. A travs de la aplicacin

de estilos CSS pueden definirse los estilos de los nmeros y de las vietas para
todos los tipos de lista, no solamente las ordenadas.
Debe evitarse el uso de imgenes como vietas para listas desordenadas
creadas con los elementos DL, DT, y DD. Recordar que cualquier imagen
utilizada con fines decorativos y que no transmite mayor informacin 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 cdigo sera interpretado por el navegador web o las ayudas tcnicas 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 cdigo sera interpretado por el navegador web o las ayudas tcnicas de la
siguiente manera:
Internet Explorer.
Mozilla Firefox.
Google Chrome.

Tablas
Numeral de

Equivalencias

la norma

(pautas WCAG)

Requisitos
Subttulos

3.1.2.4.

1.2.4.

(en

directo):

se

proporciona subttulos para todo el

contenido de audio en directo de los
multimedia sincronizados.

3.1.2.5.

1.2.5.

Audiodescripcin

(grabado):

proporciona

audiodescripcin

una

se

para todo el contenido de video

grabado

dentro

de

contenido

multimedia sincronizado.
Lengua de seas (grabado): se
debe proporcionar una interpretacin
3.1.2.6.

1.2.6.

en lengua de seas 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), comnmente llamados tablas. Estas pueden ser
muy tiles para representar informacin relacionada, pero si no se tienen en
cuenta ciertos aspectos de accesibilidad puede resultar muy difcil para algunos
usuarios acceder a esta informacin.
Al crear una tabla de datos debe proporcionarse un ttulo descriptivo mediante el
elemento <caption> y un resumen que relate el objetivo de la tabla a travs del
atributo summary. El ttulo 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 descripcin de la tabla.
Para la relacin entre filas y columnas, se deben proporcionar subttulos
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 diseadores y desarrolladores de sitios web deben ser conscientes de que las
tablas de datos son elementos cuya funcin, es relacionar el contenido y que bajo
ninguna circunstancia deben ser usadas para maquetar un sitio web.
Vnculos
Los enlaces son uno de los elementos ms importantes y utilizados en las
pginas web, pues son la base principal de la navegacin por internet, al permitir
al usuario ir de un sitio a otro a travs de los destinos de los enlaces; por lo tanto,
debe prestarse especial atencin 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 vnculo,
razn por la cual frases como haga clic aqu, ver ms o similares estn
completamente desaconsejados, pues obligan al usuario a conocer el contexto de
la pgina de antemano para anticiparse a lo que encontrarn tras el enlace y esto
puede generar dificultad particularmente en la navegacin para usuarios ciegos o
con problemas cognitivos. Adems de textos adecuados en los enlaces se debe
especificar una descripcin clara del mismo a travs valor del atributo title.
Ejemplo:
<a href="ventas.html">Tienda online</a>
<a href="suscribe.hml" title="Al hacer clic se suscribir a nuestro boletn">
Suscrbase a nuestro boletn</a>
<a href="mapa.html" target="_blank" title="El mapa de Google se abrir en
una nueva ventana">Cmo llegar</a>
Aunque siempre debe procurarse utilizar textos y no imgenes como enlaces,
cuando se usa una imagen como vnculo 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 semntico.
Ejemplo:
<a href="ayuda.html"><img src="help.jpg" alt="Ayuda y soporte tcnico"></a>

11

Etiquetas para imgenes, audio, video y formularios

Imgenes

Fuente: (Fotolia, 2004)

Uno de los elementos multimedia ms utilizados son las imgenes por la

capacidad que estas tienen para transmitir informacin. Sin embargo, si el usuario
no puede ver la imagen por alguna causa (persona ciega, conexin 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 descripcin 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="Estadsticas de uso del portal"

longdesc="estadsticas.html">

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

tcnico"></a>

12

En el segundo ejemplo se ofrece un enlace a la pgina estadisticas.html en

donde se ofrece una descripcin detallada de la imagen estadisticas.gif en el
caso en que el usuario necesite una descripcin 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 imgenes, 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
versin alternativa del elemento.
Formularios
Los formularios son elementos que permiten el intercambio de datos en las
pginas web y la interaccin 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 mayora de usuarios.
Todo formulario est compuesto por diferentes elementos de entrada de
informacin como campos de texto, mens de seleccin, botones y campos de
seleccin, los cuales se deben agrupar segn su funcin en el formulario a travs
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 implcitamente con su control de formulario, bien

sea mediante las marcas o por su posicin en la pgina. El ejemplo
siguiente muestra cmo una etiqueta y un control de formulario pueden
asociarse implcitamente mediante marcadores.
Ejemplo:
<LABEL for="nombre">Nombre:
<input type="text" id="nombre" tabindex="1">
</LABEL>
(W3C, 2008)

14

Referencias
Accesibilidad a pginas web (NTC 5854). (2011, 15 de julio). Instituto
Colombiano de Normas Tcnicas y Certificacin (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 Tecnologas de la Informacin y las Comunicaciones. (2011).
Manual 3.0 para la Implementacin de la Estrategia de Gobierno en Lnea En
las Entidades del Orden Nacional de la Repblica de Colombia. Bogot,
Colombia: Ministerio de Tecnologas de la Informacin 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 seas (grabada). Consultado el 10 de abril de 2014,
en
http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/mediaequiv-sign.html

Control del documento

Autores

Adaptacin

15

Nombre
Ministerio de
Tecnologas de la
Informacin y las
Comunicaciones Gobierno en Lnea
Paola Andrea
Bobadilla Gutirrez

Cargo

Dependencia

Fecha
Mayo de
2012

Guionista Lnea de
produccin

Centro
Agroindustrial
Regional Quindo

Mayo de
2014