12. Conceptos básicos de HTML

Mark Norman Francis. 8 de julio del 2008. Última modificación: 13 de marzo de 2017 (equipo docente del grado de Multimedia). Publicado en: en línea, atributo, html, elemento, etiqueta.

En este apartado aprenderemos los conceptos básicos de HTML: qué es, qué hace, un resumen de su historia y qué estructura tiene un documento en HTML. Los apartados que encontraréis después de éste explican cada una de las partes específicas de HTML con mucho más detalle.

Los contenidos de este apartado son los siguientes:

• 12.1. Qué es el HTML
• 12.2. Aspecto del HTML
• 12.3. La historia del HTML
• 12.4. La estructura de un documento HTML
• 12.5. La sintaxis de los elementos HTML
• 12.6. Elementos de bloque y en línea
• 12.7. Referencias de carácter
• Resum

12.1. Qué es el HTML

La mayoría de las aplicaciones de escritorio que pueden leer y escribir ficheros utilizan un formato de fichero especial. Por ejemplo, Microsoft Word entiende los ficheros .doc y Microsoft Excel entiende los .xls. Estos ficheros contienen las instrucciones para reconstruir el documento cuando se vuelve a abrir y para saber cuál es su contenido, además de los "metadatos" sobre el artículo, como por ejemplo el autor, la fecha de la última modificación del documento e incluso cosas como la lista de cambios realizados con el fin de poder recuperar todas sus diferentes versiones.

Utilizamos el término técnico agentes de usuario en lugar de navegadores web. Un agente de usuario es cualquier software que se utilice para acceder a las páginas web en nombre de los usuarios. Aquí debemos hacer una distinción muy importante: todos los tipos de navegadores de escritorio (Internet Explorer, Opera, Firefox, Safari, etc.) y los navegadores alternativos para otros dispositivos (como el canal de Internet de la Wii y los navegadores para teléfonos móviles como Opera Mini y WebKit para el iPhone) son agentes de usuario, pero no todos los agentes de usuario son navegadores. Los programas automatizados que utilizan Google y Yahoo! para indexar la web y que ejecutan en sus motores de búsqueda también son agentes de usuario, pero no hay ningún ser humano que los controle directamente.

12.2. Aspecto del HTML

El HTML es sólo una representación textual del contenido y de su significado general. Por ejemplo, el código para el encabezamiento "Aspecto del HTML" es el siguiente:

<h2 id="htmllooks">Aspecto del HTML </h2>

La parte <h2> es un marcador (que se conoce como "etiqueta") que significa "lo que sigue se debe considerar como un título de segundo nivel". </h2> es una etiqueta que indica dónde acaba el título de segundo nivel (y se conoce como "etiqueta de cierre"). La etiqueta de apertura, la etiqueta de cierre y todo lo que hay entre ellas se conoce como "elemento". Mucha gente utiliza los términos elemento y etiqueta indistintamente, lo cual no es del todo correcto. id="htmllooks" es un atributo; ya hablaremos de los atributos más adelante.

La mayoría de los navegadores incorporan una opción "Código fuente" o "Ver el código fuente", normalmente bajo el menú "Ver". Si vuestro navegador incorpora esta opción, seleccionadla y dedicad unos momentos a mirar el código fuente HTML de esta página.

12.3. La historia del HTML

Cuando Tim Berners-Lee inventó la web, creó tanto el primer servidor web como la primera versión del HTML.

El HTML ha cambiado de una manera muy importante desde aquellos primeros días, pero una buena parte del contenido del HTML actual ya se encontraba en esta primera documentación y más de la mitad de las "etiquetas" descritas en el documento "Etiquetas HTML" original todavía existen.

A medida que fue habiendo cada vez más gente que escribía páginas web y alternativas al navegador original, también se fueron añadiendo más funciones a HTML. Muchas se adoptaron universalmente (como el elemento img utilizado para insertar una imagen en un documento, que se utilizó por primera vez en NCSA Mosaic). Otras etiquetas eran propias y sólo se utilizaban en uno o dos navegadores. Cada vez había una necesidad mayor de estandarización a fin de que los autores de otros navegadores pudieran tener un documento (conocido como "especificación") que describiera de manera definitiva el aspecto de HTML para así poder juzgar si se saltaban algunas partes de la implantación de HTML.

El IETF (Internet Engineering Task Force, un organismo definidor de estándares que se preocupa por la interoperabilidad a través de Internet) publicó en el año 1993 un borrador de propuesta de HTML. Esta propuesta caducó en el año 1994 sin haberse convertido en un estándar, pero provocó que el IETF creara un grupo de trabajo para estudiar la estandarización del HTML.

En el año 1995 se redactó "HTML 2.0", que aprovechaba ideas del borrador de HTML original. Dave Raggett escribió una propuesta alternativa conocida como HTML+; esta propuesta se utilizó como base para muchos de los elementos nuevos implantados por los navegadores (como el método para insertar imágenes en documentos, que se utilizó por primera vez en NCSA Mosaic).

Más tarde, en aquel mismo año apareció un borrador de HTML 3.0, pero se dejó de trabajar en esta versión a causa de la falta de apoyo por parte de los creadores de navegadores en cuanto a la dirección que se debía seguir. HTML 3.2 suprimió muchas de las funciones nuevas de la versión 3.0 y, en lugar de éstas, adoptó muchas de las creaciones de los navegadores más populares de entonces: Mosaic y Netscape Navigator.

En el año 1997, el W3C publicó HTML 4.0 como recomendación que adoptaba más extensiones específicas de navegadores, pero que también intentaba racionalizar y perfeccionar HTML. Esto se hizo marcando varios elementos como desaprobados (deprecated), que significa que los elementos están obsoletos y que, aunque todavía aparecen en esta versión, se eliminarán en una revisión posterior. Esto se hizo para impulsar un uso mejor y más semántico de HTML en documentos.

En el año 1999 se publicó HTML 4.01, con algunas erratas corregidas en el año 2001. En el año 2000, el W3C también publicó la especificación XHTML 1.0, que era HTML reestructurado para ser un documento XML válido.

En el año 2004 el Web Hypertext Application Technology Working Group (WHATWG) inició el trajo para desarrollar la especificación de HTML5. En enero de 2008 se publicó el primer "borrador de trabajo" de HTML5, que posteriormente alcanzaría el estatus de "candidate recommendation" en diciembre de 2012. El documento lo mantiene el HTML Working Group del W3C.

12.4. La estructura de un documento HTML

El documento HTML válido más pequeño posible sería algo similar a esto:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Página de ejemplo</title>
  </head>
  <body>
    <h1>Hola mundo</h1>
  </body>
</html>

El documento empieza con un elemento de tipo de documento o doctype. Este elemento describe el tipo de HTML que se utiliza para que los agentes de usuario puedan determinar cómo se debe interpretar el documento y saber si sigue las normas que dice que seguirá.

A continuación, se puede ver la etiqueta de apertura del elemento html. Éste es un elemento que incluye a todo el documento. La etiqueta html de cierre es lo último que hay en cualquier documento HTML.

Dentro del elemento html está el elemento head. Éste es un elemento que contiene información sobre el documento (los metadatos). Este elemento se describe más detalladamente en el apartado siguiente. En la cabecera está el elemento title, que define el título "Página de ejemplo" de la barra del menú.

Después del elemento head está el elemento body, que es el elemento que incluye el contenido real de la página; en este caso sólo hay un elemento de encabezamiento de nivel uno (h1), que contiene el texto "Hola mundo". Y éste es todo nuestro documento.

Como se puede ver, a menudo los elementos contienen otros elementos. El cuerpo del documento incluirá inevitablemente muchos otros elementos. Las divisiones de página crean la estructura general del documento y contendrán subdivisiones. Éstas contendrán títulos, párrafos, listas, etc. Los párrafos pueden contener elementos que creen enlaces hacia otros documentos, citas, énfasis, etc. A medida que vayáis avanzando en esta serie, iréis sabiendo más cosas sobre estos elementos.

12.5. La sintaxis de los elementos HTML

Como ya hemos visto, un elemento básico en HTML consiste en dos marcadores al principio y al final de un bloque de texto. Hay algunos elementos que no rodean al texto y, en la mayoría de los casos, los elementos pueden contener subelementos (como html que contiene head y body en el ejemplo anterior).

Los elementos también pueden tener atributos, que pueden modificar el comportamiento del elemento e introducir un significado adicional.

<div id="masthead">
   <h1>Conceptos básicos del 
      <abbr title="lenguaje de marcado de hipertexto">HTML</abbr>
   </h1>
</div>

En este ejemplo hay un elemento div (división de página, una manera de partir los documentos en bloques lógicos) con un atributo id añadido que tiene el valor de masthead. El elemento div contiene un elemento h1 (encabezamiento de primer nivel o más importante), que al mismo tiempo contiene texto. Parte de este texto está incluido en un elemento abbr (que se utiliza para especificar la expansión de las siglas), que tiene el atributo title, cuyo valor está definido como lenguaje de marcado de hipertexto (Hypertext Markup Language).

Muchos de los atributos de HTML son comunes para todos los elementos, aunque algunos son específicos de uno o varios elementos concretos. Éstos tienen siempre la forma palabraclave="valor". El valor debe aparecer siempre entre comillas simples o dobles (en algunas circunstancias se pueden omitir las comillas, pero no es una práctica recomendable con respecto a la predictibilidad, la comprensión y la claridad; se deben poner siempre los valores entre comillas).

La mayoría de los atributos y sus valores posibles están definidos por las especificaciones HTML; no es posible crear atributos propios sin invalidar el HTML, ya que ello puede confundir a los agentes de usuario y provocar problemas a la hora de interpretar correctamente la página web. Las únicas excepciones reales son los atributos id y class; sus valores están totalmente bajo vuestro control, ya que sirven para añadir significado y semántica propias a vuestros documentos.

Un elemento que se encuentra dentro de otro elemento se conoce como "hijo" de este elemento. Así pues, en el ejemplo anterior, abbr es hijo del elemento h1, que al mismo tiempo es hijo de div. Y al revés, el elemento div sería "padre" del elemento h1. Este concepto de padre/hijo es muy importante, ya que es la base de CSS y se utiliza mucho en JavaScript.

12.6. Elementos de bloque y en línea

En el HTML hay dos categorías generales de elementos que corresponden a dos tipos de contenidos y estructuras que representan estos elementos: elementos de bloque y elementos en línea.

Algunos elementos de bloque comunes incluyen los párrafos, las listas, los títulos y las tablas.

Un elemento en línea no hará que aparezca una línea nueva en el documento; son los tipos de elementos que aparecen dentro de un párrafo de texto. Algunos elementos en línea comunes son los vínculos de hipertexto, las palabras o frases destacadas o las citas breves.

12.7. Referencias de carácter

Un último aspecto que hay que mencionar de un documento HTML es la manera de incluir caracteres especiales. En el HTML, los caracteres <, > i & son especiales. Estos caracteres inician y finalizan partes del documento HTML, y no representan los caracteres de "menor que", "mayor que" y "et".

Uno de los primeros errores que puede cometer un autor de webs es utilizar un carácter "et" en un documento y entonces ver que aparece algo inesperado. Por ejemplo, si se escribe la frase "Imperial units measure weight in stones&pounds" puede ser que en algunos navegadores se vea "...stones£s".

Esto sucede porque en HTML la cadena literal "&pound;" éses en realidad una referencia de carácter. Una referencia de carácter es una manera de incluir en un documento un carácter que es difícil o imposible de escribir desde un teclado, o en una codificación de documento concreta.

El símbolo "et" (&) introduce la referencia, y el punto y coma (;) la acaba. No obstante, muchos agentes de usuario pueden ser muy condescendientes a la hora de perdonar errores en el HTML, como por ejemplo el de olvidar el punto y coma, e interpretarán "&pound" como una referencia de carácter. Las referencias pueden ser números (referencias numéricas) o palabras abreviadas (referencias de entidades).

Resumen

En este apartado hemos aprendido los conceptos básicos del HTML, de dónde proviene y algunas ideas sobre la estructura de un documento HTML. A continuación, explicaremos la sección <head> de un documento HTML más detalladamente y después continuaremos explicando el contenido de <body>.

Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada.

: :