HTML

El lenguaje HTML fue creado en 1991 por Tim Berners-Lee, conocido científico a quien se le considera padre de la World Wide Web. En su momento inicial en el lenguaje HTML se describen una pequeña cantidad de tags o etiquetas que servían para componer documentos. La mayor innovación en ellos era la posiblidad de crear enlaces entre documentos, de modo que se hacía posible la navegación entre páginas.

Para definir el lenguaje HTML se usó como base SGML, que es un meta-lenguaje de marcado (compuesto por etiquetas, como el propio HTML). SGML corresponde con las siglas de Standard Generalized Markup Language y permite especificar otros lenguajes de marcado, como es el caso de HTML. En 1993 se publicó el primer borrador de especificación del lenguaje HTML basado en SGML. Esta primera etapa de la estandarización del HTML fue creada en el marco de la IEFT (Internet Engineering Task Force). A ella le debemos el primer intento de estandarización del HTML que se conoció como HTML 2.0.

La creación de la organización que regula actualmente los estándares de la web, conocida por W3C (World Wide Web Consortium), no se produjo hasta el año 1996. Ya bajo la tutela del W3C se publicó la versión 3.2 de HTML en enero de 1997. Posteriormente se publicó HTML 4.0 en abril de 1998, que podemos considerar como la primera versión madura del HTML.

HTML 4.0 trajo como novedad la separación entre contenido y presentación. Manteniendo la definición de lo que es el contenido en el lenguaje HTML y la capa de presentación en el lenguaje CSS. Esta versión de HTML se mantuvo durante muchos años y no hubieron cambios en el estándar de HTML, sino más bien en los lenguajes colindantes, como el CSS.

De hecho, W3C decidió que la evolución de HTML sería XHTML y se centró en definir este nuevo estándar. XHTML partía de la base de HTML, pero usaba al lenguaje XML como base para su definición, por ello agregaba algunas reglas más estrictas en la creción de documentos HTML, como por ejemplo que todas las etiquetas tuvieran su correspondiente etiqueta de cierre. Lo cierto es que XHTML nunca fue un proyecto muy apoyado y los esfuerzos en crear este estándar nunca dieron grandes frutos.

Ante la falta de interés del W3C en el desarrollo de nuevas versiones de HTML, se creó un grupo paralelo centrado en desarrollar las tecnologías de la web llamado WHATWG (Web Hypertext Application Technology Working Group). A ellos les debemos el impulso que llegó a HTML y los estándares abiertos con la publicación de HTML 5. Tal fue la repercusión del movimiento de HTML 5 que la W3C decidió relegar sus esfuerzos de crear un nuevo lenguaje para sustituir al HTML y retomó las actividades de estandarización de HTML, creando los primeros documentos de estandarización de HTML 5 en 2007.

El movimiento HTML5 no solo afectó al propio HTML, sino que abarcó otra serie de lenguajes relacionados como CSS y también Javascript. En lo que respecta a CSS su aporte fundamental fue CSS3, que trajo múltiples mejoras que permitían separar con más facilidad todos los aspectos relacionados con la presentación. En lo que respecta a Javascript HTML 5 trajo la estandarización de las API de Javascript que los navegadores debían respetar, para trabajar de una manera única con los elementos de la página y acceder a funcionalidades modernas como la geolocalización o el trabajo a pantalla completa.

A la hora de aprender HTML es importante observar que sirve para expresar el contenido (el qué) y nunca la presentación (el cómo). Es decir, con HTML podemos colocar párrafos, listas, secciones, enlaces, imágenes, todo aquello que forma parte del contenido que va a tener una página web.

Para definir la presentación se usa un lenguaje complementario, llamado CSS. Además, para definir la funcionalidad en el ámbito de la web se usa el lenguaje Javascript.

Sin embargo, esto no siempre ha sido así. En el momento de crearse el lenguaje HTML sí que existían etiquetas que permitían cambiar el estilo o presentación de la página, tales como <font> que sirve para cambiar el color del texto o su tamaño. Todas estas etiquetas se han ido retirando del lenguaje a medida que se presentaban nuevas versiones, aunque por motivos de compatibilidad hacia atrás los navegadores siguen soportándolas.

También existen atributos pensados para cambiar la forma como la que esa etiqueta se representa, como el atributo "align", que permite cosas como centrar el texto del contenido de un párrafo, por ejemplo. Sin embargo, aunque existan etiquetas o atributos que sirvan para cambiar el formato o estilo de los elementos, no es una buena idea utilizarlos.

Gracias a la separación entre contenido y presentación, que conseguimos usando lenguajes separados para cada cosa, se obtienen múltiples beneficios. El más importante es que, para un mismo HTML podemos aplicar diversos tipos de presentación, solo cambiando el código CSS. De este modo, si en algún momento se decide cambiar el estilo de una página, se puede hacer simplemente alterando su código CSS y sin necesidad de cambiar el HTML.

Se deduce también de aquí que, para desarrollar una página web, no solo se trata de aprender HTML, sino que será necesario también aprender CSS, un lenguaje imprescindible para poder aplicar el formato deseado a nuestro contenido.

La etiqueta es el elemento básico del código HTML. Es un bloque de contenido que puede tener naturaleza diversa, desde un párrafo a una imagen o un vídeo, por ejemplo.

Las etiquetas se engloban entre signos menor y mayor que y tienen un inicio y un cierre. Dentro de estos signos mayor y menor que se coloca el nombre de la etiqueta. Por ejemplo:

<p>Esto es un párrafo, usamos la etiqueta P.</p>

La anterior etiqueta <p> sirve para indicar el inicio de un párrafo. Dentro figura su contenido y finalmente tenemos la etiqueta de cierre del párrafo </p>.

Muchas etiquetas tienen atributos para ajustar su comportamiento o definir alguna de sus propiedades. Por ejemplo, la etiqueta <a> para crear enlaces tiene el atributo href, donde se coloca la URL a la que va dirigido un enlace.

<a href="https://desarrolloweb.com">Enlace a DesarrolloWeb</a>

Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:

• <head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
• <body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.

Además, hay algunas otras etiquetas básicas de control, como podemos ver en el siguiente esqueleto de documento HTML básico.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Título del documento HTML</title>
</head>
<body>
  <h1>Desarrollo web</h1>
  <p>Editar código HTML no parece tan difícil además podemos añadir código css y nos queda un diseño mas elegante</p>
</body>
</html>

La primera etiqueta (DOCTYPE) indica el tipo de documento. Esta etiqueta debe estar siempre al principio. Fue definido y simplificado así desde HTML 5, ya que antes el doctype se expresaba con una etiqueta mucho mayor.

Posteriormente tenemos la etiqueta <html>, con el atributo "lang" opcional. En este caso hemos indicado que el idioma es español.

Luego encontramos el <head>, que tiene varias etiquetas. Las importantes son:

• charset, siendo UTF-8 el recomendado. Lógicamente es importante que ese juego de caracteres se esté usando realmente al guardar el archivo con el código .html. Si usamos algún editor orientado a programadores seguramente se guarde con UTF-8 o al menos tengas la opción de escoger este juego de carácteres.
• Title, que es lo que mostrará el navegador en la pestaña donde se muestre esta página. También es muy importante para que Google y otros motores identifiquen bien el contenido.

Hay otras etiquetas en el <head> que son realmente aconsejables. El caso más claro es el del viewport. También es el lugar correcto para importar estilos CSS, por ejemplo.

Para acabar, el <body> contendrá la mayor parte de las etiquetas, con todo el marcado necesario para definir el contenido completo que se verá en la página.

Los archivos HTML son ficheros de texto plano, que tienen extensión .html.

Como archivos de texto deben estar escritos con un editor de código, como los que generalmente se usan para programación. Por tanto, los archivos HTML no se deben escribir con programas de texto enriquecido como Word.

La recomendación es que estos archivos se guarden con codificación UTF-8, que es el formato habitual de los editores de texto para programación. Este punto es fundamental en Windows ya que editores de texto plano como el "Bloc de Notas" generalmente usan otros juegos de caracteres.

Los archivos HTML se pueden almacenar en cualquier carpeta del ordenador y para abrir los generalmente es suficiente con hacer doble clic sobre ellos, con ello el ordenador los abrirá con el navegador predeterminado configurado en el equipo.

Varios archivos HTML componen un sitio web

Varios archivos HTML enlazados entre sí es lo que llamamos un sitio web. generalmente se encontrarán todos almacenados en la misma carpeta o en carpetas dependientes de un directorio principal.

El archivo index.html de la carpeta principal es el documento raíz del sitio web, es decir, la portada o "home". Al index.html también se le llama documento por defecto o documento predeterminado y es el que se carga en el acceso a una carpeta, si no se indica ningún otro nombre de archivo HTML al que se pretenda acceder.