En este artículo encuentras una clase de HTML básica, que queremos que sirva para orientar a las personas que comienzan a trabajar con este lenguaje. En el texto del artículo encontrarás un resumen de la clase que impartió Miguel Angel Alvarez en mayo de 2015 y en la que vimos qué es el lenguaje HTML y cuál es la manera correcta de utilizarlo para el desarrollo de una web. Se vieron además otros asuntos de interés para aclarar conceptos, como la diferencia entre HTML y HTML5, junto con ejemplos básicos para poder estudiar las etiquetas más elementales.

Al final del texto encontrarás el vídeo de la clase completo, en la que se ofrece más información de interés para todas las personas que comienzan a estudiar HTML. Empecemos por el principio:

Qué es HTML

HTML es un lenguaje de marcación con el que definimos el contenido de una página web: texto, imágenes, distintas áreas de la página (barras de navegación, encabezados, pies…) entre otros elementos.

Decimos que con HTML puedes hacer páginas web, pero la verdad es que las aplicaciones del lenguaje, a día de hoy, son un poco más amplias. Actualmente existe una corriente muy importante de lo que son las apps para móviles y sistemas operativos, usando productos como Phonegap, Apache Cordoba, Ionic, etc. Incluso tenemos el ejempo de Windows 8 y Windows 10, donde se pueden realizar todo tipo de aplicaciones nativas usando los lenguajes que forman parte de HTML5.

Qué es HTML5

HTML5 es la versión más actual del lenguaje, pero sobre todo es una buena campaña de marketing con la que se ha conseguido que este estándar abierto haya contado con el apoyo de los desarrolladores, los navegadores y fabricantes de los sistemas operativos.

HTML5 engloba tres elementos principales:

HTML5
CSS3
JavaScript

Si nos limitamos al lenguaje de marcación podemos decir que HTML y HTML5 son distintas versiones de un mismo lenguaje. HTML5 viene a enriquecer el HTML clásico con una serie de mejoras y etiquetas nuevas. El modo de trabajar con los lenguajes es exactamente el mismo y las cosas que aprendemos cuando nos sumergimos en HTML se aplican también a HTML5. Aunque insistimos el estándar que se conoce como HTML5 no incluye solo mejoras en el lenguaje de marcación, sino mejoras en los lenguajes CSS y Javascript.

Contenido VS Presentación

Cuando estamos aprendiendo HTML nos debe quedar muy claro este punto: la diferencia entre el contenido y la presentación. Tenemos que aclarar que el contenido de la web (enlaces, listas, textos, imágenes) es lo que se escribe en HTML, mientras que la parte de la presentación se debe definir mediante otro lenguaje, el CSS. Podemos entender CSS como una capa de presentación, que viene a ser aquello que agregaremos posteriormente al HTML para definir cómo se debe mostrar el contenido, colores, fondos, tamaños de letra, posición de los elementos, etc.

Qué es un lenguaje de marcación

Para hablar acerca de HTML tenemos que definir lo que es un lenguaje de marcación, que es aquel que se compone por marcas, etiquetas o tags. Por "etiquetas" así en general podemos entender muchas por lo que mejor referirse a ellas con un sinónimo que podría ser "contenedores". Esos contenedores contienen el contenido de una página, es decir, texto, imágenes, listas…

Las etiquetas, que generalmente tienen principio y fin, sirven para englobar un contenido y expresan también el tipo de contenido y en ocasiones su significado o función dentro del contexto de la página. Con ellas conformaremos los elementos de nuestra web, por lo que tenemos que saber usarlas correctamente.

Otro detalle importante de la estructura de HTML es que tiene forma de árbol. En esta estructura nos encontraremos etiquetas que se pueden componer a su vez de otras etiquetas que van formando una estructura de árbol donde se especifica cada uno de los elementos de una página. De esta manera HTML tiene la capacidad de anidar etiquetas para llegar a cualquier tipo de estructura que podamos necesitar.

Como decíamos, las etiquetas siempre tenemos que definirlas con una apertura y un cierre, por ejemplo:

<b>Texto en negrita</b>

Documento básico y etiquetas fundamentales

En la última parte de este vídeo se explica el documento básico HTML, reconociendo cada uno de sus elementos, tanto cabecera como cuerpo de la página, así como el doctype. Todos esos elementos son los que tienes que conocer y usar correctamente cuando desarrollas una web.

Sobre etiquetas básicas se pudieron conocer diversas de ellas, como encabezamientos, imágenes, párrafos, listas, enlaces, etc. Luego se explicaron de manera general algunas de las etiquetas que incorporó el lenguaje HTML en su versión 5, haciendo especial hincapié en lo que se conoce como etiquetas semánticas.

Lo mejor es que puedas tomarte un tiempo para asistir a esta clase con calma. Si estás comenzando con HTML te proporcionará una base fundamental para empezar con buen pie tu aprendizaje.