Just because it can be done, doesn’t mean it’s right

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset’s Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since 1966 is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

What is Gulp and why is important in your project

HTML y su estructura: Todo lo que debemos saber

El esqueleto de la Web

Imagina cuántas horas al día dedicamos en navegar por internet ya sea para leer noticias, chatear con amigos, hacer alguna compra por Amazon o simplemente consumir algún tipo de información, vayas donde vayas esa página web que carga en tu navegador, tiene toda una estructura… algo así como el esqueleto humano, con sus 206 huesos y cada uno cumpliendo una función importante.

Antes de pensar en colores llamativos, animaciones fluidas o botones interactivos, es fundamental comprender que ningún edificio se mantiene en pie sin unos cimientos sólidos. En el mundo digital, esa base es la que sostiene todo el contenido que consumimos. Del mismo modo que el cuerpo humano necesita de sus huesos para dar soporte a los músculos y la piel, una página web requiere de una arquitectura interna organizada para poder existir. Esta estructura fundamental, que actúa como el soporte invisible de todo lo que ves, es lo que conocemos técnicamente como HTML.

¿Qué es HTML? Los cimientos del desarrollo web

HTML, que significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el componente más básico de la Web. Su función principal es definir el significado y la organización del contenido.

Para entender cómo encaja en el ecosistema del desarrollo, debemos visualizarlo como el primero de tres pilares esenciales que trabajan en conjunto para crear la experiencia digital completa:

Tecnología Rol Principal (¿Qué hace?)
HTMLDefinir significado y estructura.
CSSDescribir apariencia o presentación.
JavascriptFuncionalidad o comportamiento.


Para dominar este lenguaje, primero debemos desglosar la esencia de su nombre, empezando por el concepto que revolucionó la forma en que consumimos información: el “Hipertexto”.

El poder del “Hipertexto”: Más que simples palabras

El “Hipertexto” no es otra cosa que los enlaces o links que conectan las páginas web entre sí. Esta interconectividad es lo que hace que la Web sea “World Wide”. Sin enlaces, estaríamos leyendo documentos aislados; con ellos, navegamos por una red global de conocimiento.

“Al publicar contenido en Internet y enlazarlo con páginas creadas por otras personas, te conviertes en un participante activo de la World Wide Web.”

Pero, para que esos enlaces y el contenido tengan un lugar y una jerarquía, necesitamos un sistema que le indique al navegador qué es cada cosa. Aquí es donde entra en juego el concepto de “Marcado”.

El concepto de “Marcado” y la anatomía de una etiqueta

El “Marcado” consiste en utilizar etiquetas para identificar y categorizar los diferentes elementos de una página. Como desarrolladores, usamos estas etiquetas para “envolver” nuestro contenido, dándole un propósito semántico. La sintaxis es sencilla pero estricta: utilizamos los símbolos menor que (<) y mayor que (>) para delimitar nuestras instrucciones.

Antes de empezar a escribir código, como mentor siempre recalco estas reglas de sintaxis que separan a un principiante de un profesional:

  • Uso de etiquetas: El nombre del elemento siempre va rodeado por los símbolos < y >. Generalmente, tenemos una etiqueta de apertura y una de cierre para contener el elemento.
  • Sensibilidad a mayúsculas: HTML técnicamente no distingue entre mayúsculas y minúsculas. El navegador entenderá igual <TITLE>, <Title> o <title>.
  • Mejor práctica: Aunque el lenguaje sea flexible, la convención profesional y el estándar de la industria es escribir siempre en minúsculas. Esto no es solo por estética; facilita la legibilidad, reduce errores en entornos colaborativos y asegura la compatibilidad con sistemas de procesamiento de datos más estrictos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>



Entendida la gramática del lenguaje, veamos cuáles son las piezas fundamentales que conforman nuestro catálogo de construcción.

Catálogo de etiquetas: Estructura y Semántica

Para que un documento HTML sea “grokable” (fácil de entender de un vistazo), clasificamos las etiquetas según su función. Como desarrollador Senior, te aseguro que elegir la etiqueta correcta no solo ayuda al navegador, sino que es vital para la accesibilidad y el SEO.

  • Etiquetas de Estructura y Contenedores Estas etiquetas definen las grandes zonas de nuestro esqueleto digital y organizan la jerarquía global:
    • <html>: El elemento raíz que envuelve todo el documento.
    • <head> y <body>: Separan los metadatos (configuración invisible) del contenido que el usuario realmente ve.
    • <header> y <footer>: Definen el encabezado y el pie de página del sitio o de una sección.
    • <section>, <nav> y <div>: Se utilizan para segmentar el contenido y crear menús de navegación.
    • <main> representa el contenido principal del <body> de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación.

Nota: no debe haber más de un elemento <main> en un documento, y este no debe ser descendiente de un elemento <article>, <aside>, <footer>, <header>, o <nav>.

Al combinar estas piezas con criterio, transformamos un simple archivo de texto en una experiencia interactiva y estructurada que cualquier navegador del mundo puede interpretar.

Dominar la estructura es y será siempre lo primero. Entender cómo marcar los elementos y cómo conectarlos a través del hipertexto te otorga el poder de transformar una pantalla vacía en una herramienta de comunicación global. Aunque quisiera agregar también que es importante por el SEO, pero eso lo iremos viendo mas adelante.