Pese a que no se trate de un lenguaje de programación en el sentido estricto, HTML es el lenguaje más importante de todos los tiempos. Gracias a él existe este sitio web, así como las redes sociales que visitas a diario y cualquier página que encuentres en internet. Por todo esto y más, hoy toca definir qué es y cómo funciona esta tecnología que ha llegado a nuestro mundo para quedarse.  

¿QUÉ ES HTML?

HTML es un lenguaje de marcado de documentos usado en la creación de páginas y sitios web. Fue inventado por el padre de internet, Timothy John Berners-Lee, en 1992. Sus siglas en inglés describen la funcionalidad del mismo: HyperText Markup Language (Lenguaje de marcado de hipertexto).  

El objeto de marcar los documentos con HTML es la creación de estructuras de contenido con significado y contexto para los navegadores web, de modo que estos puedan interpretarlas y mostrarlas consistentemente en pantalla. Así, si en nuestro documento marcamos títulos, imágenes y vídeos, entonces el software de navegación sabrá qué tipo de contenido es y cómo debe exponerlo al usuario.  

También podemos marcar texto para que contenga un enlace hacia otro documento que está escrito con HTML. A este sistema se le conoce como hipertexto y es el responsable de  la navegación entre páginas hoy en día. Cada vez que hacemos un clic en una palabra o frase que apunta a otro lugar en internet, estamos usando esta función que es inherente al lenguaje.  

Por otra parte, cualquier navegador presente en el mercado es capaz de mostrar el contenido de una página en HTML de manera idéntica y fiel al marcado, gracias a que este lenguaje está regido por un estándar que define cómo debe ser escrito e interpretado. La organización encargada de mantener dicho estándar es la World Wide Web Consortium (W3C) y la WHATWG.  

¿CÓMO FUNCIONA ESTE LENGUAJE?

De todas las tecnologías web con las que se construyen páginas y sitios enteros, HTML es una de las más sencillas debido a su sintaxis basada en elementos delimitados por etiquetas, que precisan cada párrafo, sección, título, imagen o vídeo insertado en los mismos.  

Cada elemento es, por tanto, un marcador semántico: le dice al navegador qué tipo de contenido debe mostrar, cuál es su contexto y qué atributos tiene. Los nombres de cada uno son fáciles de recordar por asociación y ayudan al desarrollador en la creación de la estructura de su página web. Así, podemos mencionar algunos ejemplos como header, body, footer, section, article, entre otros.  

Todos los elementos tienen la siguiente estructura: 

Ejemplos de elementos HTML:
    <section> </section>
    <article> </article>
    <header> </header>    

Cada elemento está compuesto por un par de etiquetas que marcan el inicio del bloque de contenido y su fin: 

<section>
    <article>
        <h1> Título de nivel 1 </h1>
        <p> 
            ¡Me encanta HTML! Es un lenguaje fácil de entender.
        </p>
    </article>
</section>

De esta manera delimitamos una sección, un párrafo, título o artículo que queramos colocar en la página o sitio web.  

Sin embargo, existen elementos que por su naturaleza no tienen etiquetas que marcan el fin del bloque. A estos se les conocen como elementos vacíos. Ejemplos de estos pueden ser img, br, link, meta, embed, entre otros:

Ejemplos de elementos vacíos:
    <img>    <!-- Permite insertar imágenes en la página --> 
    <br>    <!-- Inserta un salto de línea --> 
    <link>    <!-- Especifica la relación del documento actual con un recurso externo --> 
    <meta>    <!-- Especifica los metadatos del documento actual -->   

ESTRUCTURA BÁSICA DE UNA PÁGINA WEB CON HTML  

Presentamos el siguiente fragmento de documento marcado con este lenguaje:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    Aquí va el contenido completo de la página
</body>
</html>

Ahora vamos a examinar con detalle cada etiqueta presente en el ejemplo:

1. Declaración <!DOCTYPE html>: es la etiqueta principal de toda página web. Le dice al navegador qué versión del estándar HTML se está usando. Actualmente lo declaramos tal y como está en el ejemplo para indicar que se trata de la última versión disponible. Un DOCTYPE distinto podría generar errores de visualización en los navegadores.

2. Etiqueta de apertura <html>: indica el inicio del documento marcado.

3. Etiqueta de apertura <head>: especifica la información general de la página, como los metadatos, el título de la página, codificación de caracteres, descripción, enlaces a hojas de estilo y scripts, entre otros.

4. Elemento <title>...</title>: especifica el título de la página, visible para los motores de búsqueda, las redes sociales y los navegadores web en la pestaña de navegación.

5. Etiqueta de cierre </head>: Marca el fin del bloque de información general de la página.

6. Etiqueta de apertura <body>: marca el inicio de todo el contenido de la página que será visible para el usuario. En este bloque van insertados los elementos mencionados anteriormente: header, section, h1, img, etcétera.

7. Etiqueta de cierre </body>: indica el final de la página.

8. Etiqueta de cierre </html>: marca el final del código HTML.

Fácil, ¿verdad?

Si entre tus planes está ser desarrollador web y quieres conocer más sobre este poderoso lenguaje, en Academia Web tenemos un curso completísimo preparado para ti, con el que aprenderás todo lo necesario para estructurar páginas y sitios web enteros sin complicaciones.