¿Qué es HTML? Guía completa del lenguaje de marcado

HTML: el esqueleto de toda página web

Te voy a contar algo: cada vez que abres una página web (incluyendo esta), estás viendo HTML en acción. Y es que HTML (HyperText Markup Language) es básicamente el idioma que le dice a tu navegador "ey, muestra este título aquí, este párrafo allá, y pon esa imagen del lado derecho".

Es como el esqueleto de una casa - HTML es la estructura, CSS se encarga de hacerla bonita, y JavaScript le da vida. Sin HTML, la web sería un lugar muy aburrido (y vacío).

¿Qué rayos es un "lenguaje de marcado"?

Aquí está la cosa: HTML no es un lenguaje de programación como JavaScript o Python. No puedes hacer matemáticas complejas o crear algoritmos con él. Es un lenguaje de marcado - básicamente usas etiquetas para decirle al navegador "esto es un título", "esto es un párrafo", "esto es una imagen".

Te muestro cómo funciona:

<h1>Mi primer título</h1>
<p>Este es un párrafo de texto.</p>

¿Ves? Súper simple:

<h1> le dice al navegador "esto es un título importante"
<p> significa "este es un párrafo normal"
Las etiquetas de cierre </h1> y </p> son como decir "aquí termina"

Es tan lógico que casi se lee solo.

Cómo funcionan las etiquetas (la anatomía básica)

Las etiquetas HTML tienen una estructura súper predecible:

<etiqueta atributo="valor">Contenido</etiqueta>

Un ejemplo que uso todo el tiempo:

<a href="https://google.com" target="_blank">Ir a Google</a>

Desglosando esto:

Etiqueta: <a> (de "anchor", para enlaces)
Atributos: href (a dónde va) y target (cómo se abre)
Contenido: "Ir a Google" (lo que ve el usuario)
Etiqueta de cierre: </a> (fin del enlace)

La estructura que nunca cambia

Todo documento HTML tiene la misma estructura básica. Es como una plantilla que siempre usas:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página web</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
</body>
</html>

Te explico cada pedazo:

<!DOCTYPE html>: Le dice al navegador "hey, esto es HTML5"
<html>: La etiqueta madre, todo va dentro
<head>: Info para el navegador (no la ve el usuario)
<body>: Todo lo que el usuario ve en pantalla

En mi experiencia, una vez que memorizas esta estructura, ya tienes el 80% del trabajo hecho.

Las etiquetas que vas a usar todos los días

Títulos (porque la jerarquía importa)

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Título de tercer nivel</h3>
<h4>Título de cuarto nivel</h4>
<h5>Título de quinto nivel</h5>
<h6>Título de sexto nivel</h6>

Ojo: Solo usa un <h1> por página. Google lo ama y tu SEO te lo agradecerá.

Párrafos y texto con estilo

<p>Este es un párrafo normal.</p>
<p>Este párrafo tiene <strong>texto en negrita</strong> y <em>texto en cursiva</em>.</p>
<p>También puedes usar <mark>texto resaltado</mark>.</p>

Enlaces (lo que hace que la web sea "web")

<!-- Enlace externo -->
<a href="https://google.com">Ir a Google</a>

<!-- Enlace interno -->
<a href="#seccion1">Ir a la sección 1</a>

<!-- Enlace de email -->
<a href="mailto:contacto@ejemplo.com">Enviar email</a>

Listas (porque nos encantan las listas)

<!-- Lista ordenada -->
<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>

<!-- Lista desordenada -->
<ul>
    <li>Elemento con viñeta</li>
    <li>Otro elemento</li>
    <li>Último elemento</li>
</ul>

Imágenes (porque una imagen vale más que mil palabras)

<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">

Súper importante: Siempre, SIEMPRE incluye el alt. Las personas con discapacidad visual te lo van a agradecer.

Tablas (cuando los datos necesitan orden)

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Ciudad</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Juan</td>
            <td>25</td>
            <td>Madrid</td>
        </tr>
        <tr>
            <td>María</td>
            <td>30</td>
            <td>Barcelona</td>
        </tr>
    </tbody>
</table>

HTML5: cuando las etiquetas tienen significado

Una de las cosas geniales de HTML5 es que introdujo etiquetas que realmente significan algo:

<article>
    <header>
        <h2>Título del artículo</h2>
        <p>Publicado el <time datetime="2025-01-27">27 de enero de 2025</time></p>
    </header>
    
    <section>
        <h3>Introducción</h3>
        <p>Este es el contenido del artículo...</p>
    </section>
    
    <aside>
        <h4>Información relacionada</h4>
        <p>Contenido relacionado...</p>
    </aside>
    
    <footer>
        <p>Autor: Carlos Seijas</p>
    </footer>
</article>

¿Por qué usar estas etiquetas "fancy"?

Google las entiende mejor (SEO mejorado)
Los lectores de pantalla navegan más fácil
Tu código es más legible (tu yo del futuro te lo agradecerá)

Formularios: cuando necesitas que el usuario te hable

Los formularios son donde la magia realmente sucede - es cuando tu sitio deja de ser estático:

<form action="/enviar" method="POST">
    <div>
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required>
    </div>
    
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div>
        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" rows="5" cols="30"></textarea>
    </div>
    
    <div>
        <label for="pais">País:</label>
        <select id="pais" name="pais">
            <option value="es">España</option>
            <option value="mx">México</option>
            <option value="ar">Argentina</option>
        </select>
    </div>
    
    <div>
        <input type="checkbox" id="acepto" name="acepto" required>
        <label for="acepto">Acepto los términos y condiciones</label>
    </div>
    
    <button type="submit">Enviar</button>
</form>

Los atributos que realmente importan

Atributos que uso constantemente

<!-- ID único -->
<div id="contenedor-principal">

<!-- Clases para CSS -->
<p class="texto-destacado texto-grande">

<!-- Título tooltip -->
<span title="Información adicional">Texto con tooltip</span>

<!-- Datos personalizados -->
<div data-usuario="123" data-rol="admin">

Accesibilidad (porque todos merecen acceso)

<!-- Texto alternativo para imágenes -->
<img src="grafico.png" alt="Gráfico de ventas del último trimestre">

<!-- Etiquetas para formularios -->
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono">

<!-- Roles para elementos -->
<nav role="navigation">
<main role="main">

Buenas prácticas (aprende de mis errores)

1. Usa HTML que tenga sentido

<!-- ❌ Malo -->
<div class="header">
    <div class="nav">
        <div class="menu-item">Inicio</div>
    </div>
</div>

<!-- ✅ Bueno -->
<header>
    <nav>
        <a href="/">Inicio</a>
    </nav>
</header>

2. Organiza tu contenido lógicamente

<!-- ✅ Jerarquía clara -->
<main>
    <article>
        <h1>Título principal</h1>
        <section>
            <h2>Subtítulo</h2>
            <p>Contenido...</p>
        </section>
    </article>
</main>

3. Piensa en Google desde el día uno

<head>
    <title>Título descriptivo y único</title>
    <meta name="description" content="Descripción clara del contenido">
    <meta name="keywords" content="html, tutorial, programación">
    <meta name="author" content="Carlos Seijas">
</head>

4. Accesibilidad no es opcional

<!-- Usa alt en imágenes -->
<img src="logo.png" alt="Logo de la empresa">

<!-- Estructura de encabezados lógica -->
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>

<!-- Etiquetas en formularios -->
<label for="nombre">Nombre completo:</label>
<input type="text" id="nombre" name="nombre">

Los errores que me han hecho sufrir (y cómo evitarlos)

1. Etiquetas sin cerrar (el infierno del debugging)

<!-- ❌ Malo -->
<p>Texto sin cerrar
<div>Otro elemento

<!-- ✅ Bueno -->
<p>Texto correctamente cerrado</p>
<div>Elemento cerrado</div>

2. Meter elementos donde no van

<!-- ❌ Malo -->
<p>Texto con <div>elemento de bloque</div> dentro</p>

<!-- ✅ Bueno -->
<div>
    <p>Texto correcto</p>
    <div>Elemento de bloque</div>
</div>

3. Saltarse niveles de encabezados

<!-- ❌ Malo -->
<h1>Título principal</h1>
<h4>Subtítulo</h4> <!-- Saltamos h2 y h3 -->

<!-- ✅ Bueno -->
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>

Las herramientas que me salvan la vida

Editores que realmente uso:

Visual Studio Code: Gratis y con extensiones increíbles
Sublime Text: Súper rápido, perfecto para proyectos grandes
Atom: Ya no se actualiza, pero algunos lo siguen amando

Para verificar que no rompiste nada:

W3C Markup Validator: El árbitro oficial de HTML
HTML5 Validator: Específico para HTML5

Extensiones de VS Code que uso diariamente:

Live Server: Servidor local instantáneo
Auto Rename Tag: Cambia las etiquetas de apertura y cierre juntas
HTML Snippets: Atajos para código HTML común

Un ejemplo del mundo real

Esto es lo que una página web completa se ve en HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Blog Personal</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobre-mi">Sobre mí</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="inicio">
            <h1>Bienvenido a mi blog</h1>
            <p>Aquí comparto mis experiencias en programación.</p>
        </section>

        <section id="blog">
            <h2>Últimos artículos</h2>
            <article>
                <h3>Mi primer artículo</h3>
                <time datetime="2025-01-27">27 de enero de 2025</time>
                <p>Este es el resumen del artículo...</p>
                <a href="articulo1.html">Leer más</a>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Mi Blog Personal. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Lo que viene: HTML del futuro

HTML sigue evolucionando. Algunas cosas geniales que ya puedes usar:

Web Components (súper cool)

<custom-button type="primary">Mi botón personalizado</custom-button>

Elementos multimedia más inteligentes

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles.vtt" srclang="es" label="Español">
</video>

Inputs que facilitan la vida

<input type="date" name="fecha">
<input type="color" name="color">
<input type="range" min="0" max="100" name="volumen">

Mi reflexión después de años con HTML

Mira, HTML puede parecer súper básico al principio - solo etiquetas, ¿verdad? Pero dominarlo realmente requiere práctica y, sobre todo, pensar en el usuario final.

Lo que realmente importa:

HTML es pura estructura - no trates de hacerlo bonito, para eso está CSS
La semántica es clave - usa la etiqueta correcta para cada cosa
La accesibilidad no es opcional - piensa en todos los usuarios
Valida tu código - los errores te van a morder después

Mi consejo basado en experiencia:

Empieza pequeño. Crea una página personal súper simple y ve agregando cosas poco a poco. No te agobies tratando de memorizar cada etiqueta - con la práctica, se vuelve automático.

Lo importante es entender los conceptos. Una vez que "click" en tu cabeza cómo funcionan las etiquetas, el resto es solo práctica.

Ahora viene la parte divertida: abre tu editor favorito y empieza a experimentar. Crea una página sobre tu hobbie, tu mascota, o lo que se te ocurra. La mejor manera de aprender HTML es ensuciándose las manos.

¿Tienes alguna duda específica sobre HTML? ¿Hay algo que no quedó claro? Me encanta resolver dudas - cada pregunta me ayuda a explicar mejor estos conceptos.