HTML Básico: El Esqueleto de la Web

HTML es el **esqueleto** de cualquier página web; sin él, simplemente no hay contenido.

Piensa en HTML como los planos de una casa: define dónde va cada pared, puerta y ventana. No se encarga de la pintura (eso es CSS) ni de la electricidad (eso es JavaScript), solo de la estructura.

—

1. ¿Qué es HTML?

HTML significa **H**yper**T**ext **M**arkup **L**anguage (Lenguaje de Marcado de Hipertexto). No es un lenguaje de programación, es un **lenguaje de marcado**. Su función principal es **estructurar el contenido** de una página web, indicando qué es un título, un párrafo, una imagen, un enlace, una lista, etc.

—

2. Etiquetas, Elementos y Atributos

Estos son los bloques de construcción básicos de HTML.

a. Etiquetas (Tags)

Las **etiquetas** son palabras clave encerradas entre corchetes angulares (`< >`). La mayoría de las etiquetas vienen en pares: una **etiqueta de apertura** y una **etiqueta de cierre**.

<p>Esta es la etiqueta de apertura para un párrafo.</p> <!-- Esta es la etiqueta de cierre -->

Algunas etiquetas son **autocerradas** o **vacías**, no tienen contenido y no necesitan una etiqueta de cierre separada.

<img src="imagen.jpg"> <!-- Para imágenes -->
<br> <!-- Para saltos de línea -->
<input type="text"> <!-- Para campos de formulario -->

b. Elementos

Un **elemento HTML** se compone de una etiqueta de apertura, el contenido (si lo hay) y una etiqueta de cierre.

<p>Este es el contenido de un elemento párrafo.</p> <!-- Todo esto es un elemento `p` -->

c. Atributos

Los **atributos** proporcionan información adicional sobre un elemento HTML. Siempre se especifican en la **etiqueta de apertura** y constan de un **nombre** y un **valor**.

<a href="https://www.google.com" target="_blank">Ir a Google</a>
<!-- 'href' y 'target' son atributos que dan información extra al enlace -->

—

3. Estructura Básica de un Documento HTML

Todo documento HTML sigue una estructura fundamental. Es el esqueleto principal de tu página.

<!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>
    <!-- Aquí también se enlazarían archivos CSS o JS externos -->
</head>
<body>
    <!-- Todo el contenido visible de tu página va aquí -->
    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera página web sencilla.</p>
</body>
</html>

<!DOCTYPE html>: Indica al navegador que es un documento HTML5.
<html lang="es">: La etiqueta raíz, encierra todo el contenido. El atributo lang es importante para la accesibilidad y SEO.
<head>: Contiene **metadatos** (información sobre la página) que no son visibles directamente.

<meta charset="UTF-8">: Define la codificación de caracteres.
<meta name="viewport" ...>: Clave para el **diseño responsivo**.
<title>...</title>: El título que aparece en la pestaña del navegador.

<body>: Contiene **todo el contenido visible** de tu página web.

—

4. Etiquetas HTML Comunes y Fundamentales

Estas son las etiquetas que usarás a diario para dar forma a tu contenido.

a. Encabezados (Headings)

De <h1> (más importante) a <h6> (menos importante). Se usan para títulos y subtítulos, organizando la jerarquía del contenido.

<h1>Título Principal</h1>
<h2>Subtítulo de Sección</h2>
<h3>Subtítulo de Contenido</h3>

b. Párrafos

La etiqueta <p> se usa para bloques de texto regulares.

<p>Este es un párrafo de texto.</p>
<p>Aquí hay otro párrafo.</p>

c. Enlaces (Links)

La etiqueta <a> (de «anchor») crea hipervínculos.

href: Obligatorio, la URL de destino.
target="_blank": Abre el enlace en una nueva pestaña.

<a href="https://eatryl.com" target="_blank">Visita MDN Web Docs</a>

d. Imágenes

La etiqueta <img> incrusta imágenes. Es una etiqueta autocerrada.

src: Obligatorio, la ruta al archivo de imagen.
alt: **Esencial para la accesibilidad y SEO.** Texto alternativo descriptivo.

<img src="https://via.placeholder.com/200" alt="Un cuadrado de 200 píxeles">

e. Listas

**Listas desordenadas** (<ul>): Ítems con viñetas.
**Listas ordenadas** (<ol>): Ítems numerados.
Ambas usan <li> para cada elemento de la lista.

<h3>Mis hobbies:</h3>
<ul>
    <li>Programar</li>
    <li>Leer</li>
</ul>

<h3>Receta rápida:</h3>
<ol>
    <li>Paso uno</li>
    <li>Paso dos</li>
</ol>

f. Divisiones y Secciones Semánticas

<div> es un contenedor genérico. Para dar **significado** a tu estructura, usa etiquetas semánticas como <section> y <article>.

<div>: Contenedor sin significado, usado principalmente para estilizar.
<section>: Agrupa contenido temáticamente relacionado.
<article>: Contenido independiente y auto-contenido (como una publicación de blog).
Otras etiquetas semánticas: <header>, <nav>, <main>, <aside>, <footer>.

<header>
    <h1>Mi Blog Personal</h1>
</header>

<main>
    <article>
        <h2>Última Publicación</h2>
        <p>Contenido de la publicación aquí...</p>
    </article>

    <section>
        <h2>Sobre Mí</h2>
        <p>Un poco de información personal...</p>
    </section>
</main>

<footer>
    <p>&copy; 2024 Mi Nombre</p>
</footer>

g. Comentarios en HTML

Notas que puedes añadir a tu código. Son ignorados por el navegador, útiles para explicar o «desactivar» temporalmente código.

<!-- Este es un comentario visible solo en el código fuente -->
<p>Este párrafo sí es visible.</p>
<!-- <p>Este párrafo está comentado y no se mostrará.</p> -->

—

¡Tu Primera Práctica HTML!

Crea un nuevo archivo llamado mi-primera-pagina.html y pega el siguiente código. Luego, ábrelo en tu navegador y observa cómo se ve. Juega con él: cambia los textos, añade más párrafos, otros enlaces, o imágenes.

Recuerda: las imágenes que empiezan con https://via.placeholder.com/ son «placeholders» que te dan imágenes temporales para practicar sin tener que descargar archivos de imagen reales.

<!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 con lo Básico</title>
</head>
<body>

    <!-- Sección del Encabezado de la Página -->
    <header>
        <h1>Bienvenido a mi Página Web de Prueba</h1>
        <p>Aquí aprenderemos los fundamentos de HTML.</p>
    </header>

    <hr> <!-- Una línea horizontal para separar secciones -->

    <!-- Sección de Contenido Principal -->
    <main>
        <section>
            <h2>Sobre HTML</h2>
            <p>HTML es el lenguaje estándar para crear páginas web. Define la estructura de tu contenido.</p>
            <p>Con HTML, puedes organizar tu información en:</p>
            <ul>
                <li><strong>Encabezados</strong> (como los que ves aquí).</li>
                <li><strong>Párrafos</strong> de texto.</li>
                <li><strong>Listas</strong> (ordenadas o desordenadas).</li>
                <li>Y mucho más.</li>
            </ul>
        </section>

        <section>
            <h2>Un Poco de Imágenes y Enlaces</h2>
            <p>Podemos añadir imágenes para hacer la página más visual:</p>
            <img src="https://via.placeholder.com/300x200?text=Mi+Imagen" alt="Un marcador de posición de imagen" width="300" height="200">
            <p>También podemos enlazar a otros sitios:</p>
            <p><a href="https://developer.mozilla.org/es/docs/Web/HTML" target="_blank">Aprende más sobre HTML en MDN Web Docs</a></p>
        </section>

        <article>
            <h2>Mi Artículo Personal</h2>
            <p>Este es un ejemplo de un artículo, una pieza de contenido independiente. Podría ser una entrada de blog o una noticia.</p>
            <p>A veces, me gusta explorar sitios con información útil. Puedes visitar <a href="https://www.w3schools.com/html/" target="_blank">W3Schools para tutoriales</a>.</p>
        </article>
    </main>

    <hr>

    <!-- Sección del Pie de Página -->
    <footer>
        <p>&copy; 2025 Mi Compañía de Aprendizaje HTML. Todos los derechos reservados.</p>
    </footer>

</body>
</html>