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

¿Qué es HTML?

Cada vez que abres una página web, estás viendo HTML en acción. HTML (HyperText Markup Language) es el lenguaje de marcado que le dice a tu navegador cómo estructurar y mostrar el contenido de una página web.

Piénsalo como el esqueleto de una casa: HTML proporciona la estructura básica, mientras que CSS se encarga de la decoración y JavaScript añade la funcionalidad. Sin HTML, no existiría la web tal como la conocemos.

Pero, ¿qué significa "lenguaje de marcado"?

A diferencia de los lenguajes de programación como JavaScript o Python, HTML no es un lenguaje de programación. Es un lenguaje de marcado que utiliza etiquetas para definir diferentes elementos de una página web.

Un ejemplo sencillo:

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

En este ejemplo:

<h1> indica que es un título principal
<p> define un párrafo
Las etiquetas de cierre </h1> y </p> marcan el final de cada elemento

La anatomía de una etiqueta HTML

Las etiquetas HTML siguen una estructura específica:

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

Ejemplo práctico:

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

Aquí tenemos:

Etiqueta: <a> (para enlaces)
Atributos: href (destino del enlace) y target (cómo abrir el enlace)
Contenido: "Ir a Google"
Etiqueta de cierre: </a>

Estructura básica de un documento HTML

Todo documento HTML tiene una estructura estándar:

<!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>

Desglosemos cada parte:

<!DOCTYPE html>: Le dice al navegador que es un documento HTML5
<html>: La etiqueta raíz que contiene todo el contenido
<head>: Metadatos que no se muestran en la página
<body>: El contenido visible de la página

Etiquetas HTML más importantes

Títulos y encabezados

<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>

Tip: Usa solo un <h1> por página para mejor SEO.

Párrafos y texto

<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

<!-- 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

<!-- 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

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

Importante: Siempre incluye el atributo alt para accesibilidad.

Tablas

<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>

Elementos semánticos de HTML5

HTML5 introdujo etiquetas semánticas que dan significado al contenido:

<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>

Beneficios de usar elementos semánticos:

SEO mejorado: Los motores de búsqueda entienden mejor el contenido
Accesibilidad: Los lectores de pantalla pueden navegar mejor
Mantenimiento: El código es más fácil de leer y mantener

Formularios HTML

Los formularios son esenciales para la interacción con usuarios:

<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>

Atributos HTML importantes

Atributos globales

<!-- 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">

Atributos de accesibilidad

<!-- 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">

Mejores prácticas en HTML

1. Usa HTML semántico

<!-- ❌ 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. Estructura tu contenido correctamente

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

3. Optimiza para SEO

<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. Haz tu sitio accesible

<!-- 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">

Errores comunes que debes evitar

1. Etiquetas no cerradas

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

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

2. Anidación incorrecta

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

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

3. Uso incorrecto 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>

Herramientas útiles para HTML

Editores de código recomendados:

Visual Studio Code: Gratis, con extensiones útiles
Sublime Text: Rápido y ligero
Atom: Open source y personalizable

Validadores HTML:

W3C Markup Validator: Verifica si tu HTML es válido
HTML5 Validator: Específico para HTML5

Extensiones útiles para VS Code:

Live Server: Servidor local para desarrollo
Auto Rename Tag: Renombra etiquetas automáticamente
HTML Snippets: Atajos para código HTML

HTML en el mundo real

Ejemplo de una página web completa:

<!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>

El futuro de HTML

HTML sigue evolucionando. Algunas tendencias y características nuevas:

Web Components

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

Nuevos elementos multimedia

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

APIs modernas

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

Conclusión

HTML es el fundamento de la web y, aunque puede parecer simple al principio, dominarlo completamente requiere práctica y atención a los detalles.

Puntos clave para recordar:

HTML es estructura: Se enfoca en organizar el contenido
Semántica importa: Usa las etiquetas correctas para cada propósito
Accesibilidad es fundamental: Piensa en todos los usuarios
Valida tu código: Usa herramientas para verificar errores

Mi consejo personal:

Practica creando pequeños proyectos. Empieza con una página personal simple y ve añadiendo complejidad gradualmente. No te preocupes si no memoriza todas las etiquetas al principio; con la práctica, se volverá natural.

¿Estás listo para empezar a crear tu primera página web? HTML es solo el comienzo de un viaje increíble en el desarrollo web.

¡Ahora es tu turno! Abre tu editor de código favorito y empieza a experimentar. La mejor manera de aprender HTML es practicando.

¿Tienes alguna pregunta sobre HTML o quieres que profundice en algún tema específico? ¡Déjame saber en los comentarios!