HTML Básico

Aprendé la estructura fundamental de HTML. Es el lenguaje de marcado que estructura todo el contenido web.

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. No es un lenguaje de programación — es un lenguaje de marcado que define la estructura del contenido. 

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primera Página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Este es mi primer párrafo.</p>
</body>
</html>
Importante

HTML usa etiquetas para marcar diferentes tipos de contenido. La mayoría tienen apertura <tag> y cierre </tag>.

Probá el Ejemplo 1: Hola Mundo

Estructura Básica

Todo documento HTML sigue esta estructura:

<!DOCTYPE html>        <!-- Declara que es HTML5 -->
<html lang="es">       <!-- Elemento raíz -->

<head>                 <!-- Metadatos, no visible en la página -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la Página</title>
</head>

<body>                 <!-- Contenido visible -->
    <h1>Contenido aquí</h1>
</body>

</html>

<!DOCTYPE html>

Declara HTML5

<html>

Elemento raíz

<head>

Metadatos

<body>

Contenido visible

Etiquetas de Texto

Encabezados

<h1>Encabezado principal</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
Jerarquía

Usá solo un <h1> por página. Los demás van en orden descendente.

Párrafos y Formato

<p>Esto es un párrafo de texto.</p>

<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>

<br>   <!-- Salto de línea -->
<hr>   <!-- Línea horizontal -->
Probá el Ejemplo 2: Texto y formato

Listas y Enlaces

Lista desordenada (bullets)

<ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ul>

Lista ordenada (números)

<ol>
    <li>Paso 1</li>
    <li>Paso 2</li>
    <li>Paso 3</li>
</ol>

Enlaces

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

<!-- Abrir en nueva pestaña -->
<a href="https://google.com" target="_blank">Google</a>
Probá el Ejemplo 3: Listas y enlaces

Contenedores y Semántica

HTML5 introdujo etiquetas con significado específico — mejoran la accesibilidad y el SEO.

<!-- Semánticas HTML5 -->
<header>Encabezado del sitio</header>
<nav>Menú de navegación</nav>
<main>Contenido principal</main>
<section>Sección de contenido</section>
<article>Artículo independiente</article>
<footer>Pie de página</footer>

<!-- Genéricas -->
<div>Bloque genérico</div>
<span>Línea genérica</span>
¿div o semántica?

Usá las etiquetas semánticas cuando tengan sentido. <div> queda para contenedores sin significado propio.

Atributos Comunes

Las etiquetas pueden tener atributos que agregan información o comportamiento:

Atributo Uso Ejemplo
id Identificador único <div id="menu">
class Clasificación para CSS <p class="destacado">
href URL del enlace <a href="page.html">
src Fuente de imagen/script <img src="foto.jpg">
alt Texto alternativo imagen <img alt="Logo">
target Dónde abrir el enlace <a target="_blank">

Ejemplo Completo

Una página HTML completa con estructura semántica:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Blog</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        header { background: #333; color: white; padding: 20px; }
        article { background: #f5f5f5; padding: 20px; margin: 20px 0; }
    </style>
</head>
<body>
    <header>
        <h1>Mi Blog</h1>
        <nav>
            <a href="#">Inicio</a>
            <a href="#">Artículos</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>Mi Primer Artículo</h2>
            <p>Contenido del artículo aquí.</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2026 Mi Blog</p>
    </footer>
</body>
</html>
Probá el Ejemplo 4: Blog completo

Buenas Prácticas

  • Siempre cerrá las etiquetas: <p>...</p>
  • Usá minúsculas: <div> en vez de <DIV>
  • Indentá el código: facilita la lectura
  • Un <h1> por página: para SEO
  • Siempre incluí alt en imágenes: accesibilidad
  • Usá etiquetas semánticas: <header>, <nav>, etc. en vez de <div> para todo