Hipertexto y HTML

Enviado por Daniel Muñoz Egido el Dom, 29/01/2017 - 18:27

Tal y como nos dice Lamarca Lapuente (2013a), el término hipertexto se ha utilizado con diferentes acepciones. La primera de ellas, con un carácter general, para hacer referencia a una forma de organizar la información. La segunda, como un término concreto usado en dos sentidos, o bien para referirse a las herramientas software que permiten crear y gestionar este tipo de organización conceptual, o bien para hacer referencia a los documentos creados por estas herramientas software. En última instancia, y tal como nos dice el W3C («What is Hypertext?»), hipertexto “es un texto que no está limitado a ser líneal”.

Aunque el término hipertexto fue acuñado por Ted Nelson en 1965 (Connolly 2000) para hacer referencia a una estructura del texto no secuencial que permitiera al lector elegir aquello que considerara más adecuado en una pantalla interactiva, lo que realmente asociamos en la actualidad con hipertexto es el modelo creado por Tim Berners-Lee con el objetivo de compartir documentos en internet, desarrollado en colaboración con Robert Cailliau en 1989, al que se le dio el nombre de HTML Tags (HyperText Markup Language), lo cual dio origen a lo que hoy conocemos como la web (Coremans 2015). Este lenguaje de marchas, HTML, fue una simplificación de un metalenguaje, o marco general para la descripción de lenguajes de marcado, denominado como SGML (Standard Generalized Markup Language), el cual por su extrema complejidad, no era utilizable para el entorno web (Lamarca Lapuente 2013c)

Desde que vio la luz el primer documento en HTML en 1991 hasta la actualidad, se han llevado a cabo sucesivas versiones de este estándar definido por el W3C como la “lengua franca” para la publicación de hipertexto en el World Wide Web. En el año 1995 se hizo cargo de su desarrollo el World Wide Web Consortium en la versión 3.0 de este lenguaje de marcas. En la actualidad, a partir del año 2014, se encuentra disponible la versión 5.0 en la categoría de estándar, el cual es ya soportado por la mayoría de clientes (navegadores web) que existen en el mercado.

[HTML] es un tipo especial de documento de texto usado por las navegadores web para presentar texto y gráficos. El texto incluye marcas como puede ser <p> para indicar el inicio de un párrafo, y </p> para indicar la finalización de dicho párrafo. Los documentos HTML son denominado con frecuencia como páginas web (Raggett 2005).

Todo documento HTML debe comenzar con un definición de tipo de documento para que el cliente pueda saber qué lenguaje de marcas se está utilizando y pueda así interpretarlo. Esta declaración es conocida como DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML es un lenguaje de marcas, con lo cual, todo elemento dentro del documento debe estar “marcado”, incluso el propio documento. Todo documento en html se inicia con la etiqueta <html> y termina con </html> y además tiene que estar estructurado en dos secciones básicas, una cabecera, <head></head> la cual debe contener como mínimo el título del documento <title></title>, y un cuerpo <body></body>.

  <html>

   <head>

     <title> Título del documento </title>

   </head>

   <body>

    Todos los elementos que conforman el documento

   </body>

  </html>

En la cabecera se encuentran todos aquellos elementos que son necesarios para que el navegador o cliente procese el documento, como puede ser el título, las metaetiquetas, estilos de presentación tanto internos como externos, enlaces a otros documentos o librerías que son necesarios para renderizar el documento, etc. Esta información está “oculta” para el usuario. Dentro del cuerpo se encuentran todos aquellos elementos formales que constituyen parte del documento: títulos de sección, subsecciones, listas, párrafos, etc., y que serán presentados al usuario por el navegador.

También nos podemos encontrar con elementos vacíos, es decir, con elementos que no tienen contenido pero que son necesarios para estructurar el documento, como pueden ser («Referencia de Elementos HTML» 2017) los elementos <area> (crea distintas secciones dentro de un mapa de imágenes), <base> (especifica la dirección URL base que se utilizará para todas las direcciones URL relativas contenidas dentro del documento), <br> (line break, inserta un salto de línea en el documento o “retorno de carro”), <col> (permite especificar propiedades para una columna o un grupo de ellas), <embed> (establece un punto de integración paa una aplicación externa o de contenido interactivo, lo que es conocido como plug-in), <hr> (crea una línea de separación horizontal), <img> (representa una imagen en el documento), <input> (crea controles interactivos para formularios basados en la web los cuales reciben datos por parte del usuario y su comportamiento dependerá del valor que tenga su atributo type), <keygen> (prácticamente no utilizado, sirve para la generación de llaves o el envío de claves públicas como parte de un formulario HTML), <link> (establece la relación entre el documento actual y un recurso externo), <meta> (de metainformación, sirve para aportar información sobre el documento), <param> (permite especificar parámetros de ejecución sobre un objeto), <source> (permite especificar los recursos de medios múltiples para otros elementos, como pueden ser <code>audio</code> y <code>vídeo</code>, <track> (usado como elemento hijo de los elementos <audio> y <video> nos permite especificar pistas específicas de texto, para, por ejemplo, añadir subtítulos a un vídeo),o <wbr> (word break oportunity, representa una posición dentro del texto donde el explorador puede opcionalmente saltar una línea) .

Los elementos (o marcas) en HTML pueden tener también atributos que los describen, habiendo para cada elemento un rango de atributos válidos y en algunos casos específicos para dicho elemento. Entre aquellos atributos globales, es decir, que pueden ser utilizados por todos los elementos, nos encontramos entre otros con id (establece un identificador único para dicho elemento el cual no puede repetirse en todo el documento), style ( contiene las declaraciones de estilo que se deben aplicar a dicho elemento), class (identifica al elemento dentro de una clase de elementos para que los estilos CSS y Javascript puedan seleccionarlo y acceder a ellos a través de selectores de clases o funciones), o lang (participa en la definición del lenguaje del documento).

Los elementos en HTML, excluyendo aquellos elementos vacíos que ya hemos visto, estructuran el documento en función de la naturaleza de su contenido y la función que ocupa. El grupo de desarrollo del navegador Mozilla («Referencia de Elementos HTML» 2017) clasifica los distintos elementos en:

  • Elementos básicos, aquellos que se encuentran en todos los documentos html, como puede ser la propia etiqueta <html>.

  • Metadatos del documento, aquellos que contienen información sobre el propio documento, muchos de los cuales ya hemos vista dentro de los elementos vacíos ya que no incluyen contenido, y entre los cuales podemos destacar <head> (incluye la información general del documento y está oculta al usuario) y <title> (indica el título del documento).

  • Seccionamiento del contenido, aquellos que permiten organizar los contenidos en partes lógicas, alguno de ellos incorporados desde las primeras versiones del estándar como son <h1> <h2> <h3> <h4> <h5> y <h6> (elementos de encabezado organizados de manera lógica, siendo h1 el de primer nivel y más importante, h2 de segundo nivel y menos importante que h1, etc.), y otros añadidos en las últimas versiones, como son <article> (composición auto-centenida dentro del documento, que se destina a distribuir de forma independiente o reutilizable), <section> (representa una sección genérica, no independiente, de un documento, es decir, sirve para determinar qué contenido corresponde a qué parte de un esquema dentro de un documento) o <aside> (sección de un documento con contenido relacionado tangencialmente con el contenido que le rodea), entre otros.

  • Contenido del texto, elementos que organizan bloques o secciones de contenido dentro de <body>, como pueden ser <div> (crear secciones o grupos de contenido), <ol> (listas ordenadas) o <ul> (listas desordendas) cada uno de los cuales con sus correspondientes elementos de lista <li>, <p> (párrafos), etc.

  • Semántica del texto en línea, aquellos que definen el significado, estructura o estilos de una palabra, línea o pieza dentro del texto, entre los que se encuentran <a> (identifica y define un enlace o link), <cite> (marca una referencia a una fuente o al autor de un texto citado), <code> (identifica un bloque de código), <em> (enfatiza una parte del texto), o <strong> (para marcar con especial énfasis), etc.

  • Imagen y elementos multimedia, aquellos elementos que insertan contenidos de tipo imagen, vídeo o audio dentro del documento, como son <audio> (inserta audio), <video> (inserta vídeo) o <map> (inserta un mapa>, entre otros.

  • Contenido embebido, para insertar otro tipo de contenidos dentro del documento html, como son <embed> (establece el punto de integración de una aplicación externa o de contenido interactivo) o <param> (establece los parámetros de ejecución de un objeto.

  • Scripts, elementos que soportan lenguajes de script como es Javascript, entre los que se encuentran <canvas> (incorpora gráficos o composiciones de imágenes), <noscript> (contenido que se debe mostrar cuando la aplicación de usuario no soporte la ejecución de scripts), y <script> (establece el punto de ejecución de un script.

  • Tablas de contenido, usados para crear y manipular datos, como son entre otros <caption> (para dar título a una tabla), <table> (para establecer el punto de inserción de la tabla), <td> (para definir las celdas de una tabla) o <tr> (define una fila de celdas de la tabla).

  • Formularios, los cuales recogen información del usuario para completar enviar al sitio o a una aplicación, como son <form> (establece el punto de inserción del formulario), <input> (elementos interactivos que recogen información del usuario>, <button> (crea un botón para enviar los datos introducidos por el usuario), o <select> (crea un menu de opciones que deben ser seleccionadas por el usuario).

  • Elementos interactivos que pueden crear objetos interactivos de la interfaz de usuario aunque su uso en algunos casos está desaprobado o se encuentran en fase experimental.

  • Componentes web o aquellos elementos que contienen elementos propios de html, aunque su uso al igual que con los elementos interactivos, su uso está desaconsejado en las versiones actuales.

HTML es un lenguaje sencillo y flexible para la creación de documentos en la web, aspectos estos que en algunas ocasiones creaba algunos problemas de interpretación a medida que iban apareciendo cada vez más dispositivos y servicios vinculado a la web. Para paliar estos problemas se desarrollo una versión de HTML más estricta y limpia, XHTML (Extensible Hipertext Markup Language), en la que se “combinaba la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir datos” («Guía Breve de XHTML» ).

Referencias
CONNOLLY, D., 2000. A Little History of the World Wide Web. W3C [en línea]. [Consulta: 23 enero 2017]. Disponible en: https://www.w3.org/History.html.
 
COREMANS, C., 2015. HTML: A Beginner’s Tutorial [en línea]. S.l.: Brainy Software. [Consulta: 23 enero 2017]. Disponible en: http://proquest.safaribooksonline.com/book/web-development/html/9781771970181.
 
Guía Breve de XHTML. W3C [en línea], [sin fecha]. [Consulta: 24 enero 2017]. Disponible en: http://www.w3c.es/Divulgacion/GuiasBreves/XHTML.
 
LAMARCA LAPUENTE, M.J., 2013a. Hipertexto. Hipertexto [en línea]. [Consulta: 23 enero 2017]. Disponible en: http://www.hipertexto.info/documentos/hipertexto.htm.
 
LAMARCA LAPUENTE, M.J., 2013b. SGML. Hipertexto [en línea]. [Consulta: 24 enero 2017]. Disponible en: http://www.hipertexto.info/documentos/sgml.htm.
 
RAGGETT, D., 2005. Getting started with HTML. W3C [en línea]. [Consulta: 23 enero 2017]. Disponible en: https://www.w3.org/MarkUp/Guide/.
 
Referencia de Elementos HTML. Mozilla Developer Network [en línea], 2017. [Consulta: 23 enero 2017]. Disponible en: https://developer.mozilla.org/es/docs/Web/HTML/Elemento.
 
What is Hypertext? W3C [en línea], [sin fecha]. [Consulta: 23 enero 2017]. Disponible en: https://www.w3.org/WhatIs.html

Daniel Muñoz Egido es Grado en Información y Documentación y  Máster en Bibliotecas y Servicios de Información Digital en la Universidad Carlos III de Madrid. En la actualidad está realizando su tesis doctoral en el Programa de Doctorado de la misma universidad enfocada a la gestión de contenidos en unidades de información.