Skip to content
Logo de la documentación HoneyCode

1. Introducción a HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Define la estructura y el contenido de las páginas.

🌐 ¿Qué es HTML y para qué sirve?

Section titled “🌐 ¿Qué es HTML y para qué sirve?”

Definición

Section titled “Definición”

HTML significa:

  • 📄 HyperText: Texto con enlaces
  • 🏷️ Markup: Sistema de etiquetas
  • 💬 Language: Lenguaje con sintaxis

Usos principales

Section titled “Usos principales”

✅ Estructurar contenido web
✅ Crear hipertexto y navegación
✅ Insertar multimedia
✅ Crear formularios interactivos

🎨 Primer documento HTML 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primera Página</title>
</head>
<body>
<h1>¡Hola Mundo! 👋</h1>
<p>Esta es mi primera página web.</p>
<ul>
  <li>Crear títulos</li>
  <li>Insertar imágenes</li>
  <li>Hacer listas</li>
</ul>
</body>
</html>
body { font-family: Arial; padding: 20px; }
h1 { color: #2c3e50; }

📜 Historia Breve

Section titled “📜 Historia Breve”

  1. 1991 - HTML 1.0 🎂
    Creado por Tim Berners-Lee, 18 etiquetas básicas

  2. 1995 - HTML 2.0 📝
    Primera versión estandarizada, formularios y tablas

  3. 1997 - HTML 3.2 🎨
    Tablas complejas, scripts básicos

  4. 1999 - HTML 4.01 🚀
    Separación contenido/presentación, mejor CSS

  5. 2014 - HTML5 ⭐ (Actual)
    Etiquetas semánticas, multimedia nativa, APIs JavaScript

🏗️ Estructura Básica

Section titled “🏗️ Estructura Básica”
<!DOCTYPE html>           <!-- Tipo de documento -->
<html lang="es">          <!-- Elemento raíz -->
<head>                    <!-- Metadatos -->
  <meta charset="UTF-8">
  <title>Título</title>
</head>
<body>                    <!-- Contenido visible -->
  <h1>Título</h1>
  <p>Párrafo</p>
</body>
</html>

🔗 Relación con CSS y JavaScript

Section titled “🔗 Relación con CSS y JavaScript”

El trío fundamental de la web

Section titled “El trío fundamental de la web”

HTML 🏗️ - Estructura
CSS 🎨 - Presentación
JavaScript ⚡ - Interactividad

🎨 HTML + CSS + JavaScript 
<div class="card">
<h2>Card Interactiva</h2>
<p>Pasa el mouse sobre mí</p>
<button onclick="cambiarColor()">Cambiar Color</button>
</div>
.card {
background: #3498db;
color: white;
padding: 20px;
border-radius: 8px;
transition: all 0.3s;
}
.card:hover {
transform: scale(1.05);
}
function cambiarColor() {
const card = document.querySelector('.card');
const colores = ['#3498db', '#2ecc71', '#e74c3c', '#f39c12'];
const random = colores[Math.floor(Math.random() * colores.length)];
card.style.background = random;
}

📌 Versiones de HTML

Section titled “📌 Versiones de HTML”

HTML5 - Versión Actual ⭐

Section titled “HTML5 - Versión Actual ⭐”

HTML5 es la quinta y actual versión de HTML, publicada en 2014. Representa una evolución significativa que moderniza la web.

Novedades principales de HTML5

Section titled “Novedades principales de HTML5”

1. Etiquetas Semánticas 📝

  • <header> - Encabezado de página o sección
  • <nav> - Navegación principal
  • <main> - Contenido principal único
  • <article> - Contenido independiente
  • <section> - Sección temática
  • <aside> - Contenido complementario
  • <footer> - Pie de página
  • <figure> y <figcaption> - Imágenes con leyenda

2. Multimedia Nativa 🎬

  • <video> - Videos sin Flash
  • <audio> - Audio sin plugins
  • <source> - Múltiples formatos
  • Controles nativos del navegador

3. Gráficos y Visualización 🎨

  • <canvas> - Dibujo 2D con JavaScript
  • <svg> - Gráficos vectoriales
  • Animaciones CSS3

4. Formularios Mejorados 📋

  • Nuevos tipos: email, url, date, number, range, color
  • Validación nativa con required, pattern, min, max
  • Atributos: placeholder, autofocus, autocomplete

5. APIs de JavaScript ⚡

  • Geolocalización
  • Almacenamiento local (localStorage, sessionStorage)
  • Drag and Drop
  • Web Workers
  • WebSockets
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Estructura HTML5 Semántica</title>
</head>
<body>


  <!-- Encabezado principal del sitio -->
  <header>
    <h1>Mi Sitio Web</h1>
    <p>Subtítulo o descripción</p>


    <!-- Navegación principal -->
    <nav>
      <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>


  <!-- Contenido principal (único por página) -->
  <main>


    <!-- Sección de introducción -->
    <section id="inicio">
      <h2>Bienvenido</h2>
      <p>Contenido de la sección de inicio...</p>
    </section>


    <!-- Sección de servicios -->
    <section id="servicios">
      <h2>Nuestros Servicios</h2>


      <!-- Artículo independiente -->
      <article>
        <header>
          <h3>Desarrollo Web</h3>
          <p><time datetime="2024-01-15">15 de Enero, 2024</time></p>
        </header>
        <p>Descripción del servicio de desarrollo web...</p>


        <!-- Figura con imagen -->
        <figure>
          <img src="desarrollo.jpg" alt="Desarrollo Web">
          <figcaption>Proceso de desarrollo web moderno</figcaption>
        </figure>


        <footer>
          <p>Autor: Juan Pérez</p>
        </footer>
      </article>


      <article>
        <header>
          <h3>Diseño UX/UI</h3>
          <p><time datetime="2024-01-20">20 de Enero, 2024</time></p>
        </header>
        <p>Descripción del servicio de diseño...</p>
      </article>


    </section>


    <!-- Sección de blog -->
    <section id="blog">
      <h2>Blog</h2>


      <article>
        <h3>Título del Post</h3>
        <p>Contenido del artículo del blog...</p>
        <a href="post.html">Leer más</a>
      </article>


    </section>


  </main>


  <!-- Contenido complementario (sidebar) -->
  <aside>
    <h2>Información Adicional</h2>


    <section>
      <h3>Categorías</h3>
      <ul>
        <li><a href="#web">Desarrollo Web</a></li>
        <li><a href="#mobile">Apps Móviles</a></li>
        <li><a href="#design">Diseño</a></li>
      </ul>
    </section>


    <section>
      <h3>Últimas Noticias</h3>
      <p>Contenido de noticias recientes...</p>
    </section>
  </aside>


  <!-- Pie de página -->
  <footer>
    <section>
      <h3>Contacto</h3>
      <address>
        Email: <a href="mailto:info@ejemplo.com">info@ejemplo.com</a><br>
        Teléfono: <a href="tel:+123456789">+1 234 567 89</a>
      </address>
    </section>


    <section>
      <h3>Redes Sociales</h3>
      <nav>
        <a href="#">Facebook</a>
        <a href="#">Twitter</a>
        <a href="#">LinkedIn</a>
      </nav>
    </section>


    <p>&copy; 2024 Mi Sitio Web. Todos los derechos reservados.</p>
  </footer>


</body>
</html>

Elementos clave explicados:

📌 <header> - Encabezado del sitio o sección
📌 <nav> - Menú de navegación principal
📌 <main> - Contenido principal (solo uno por página)
📌 <section> - Agrupa contenido temático
📌 <article> - Contenido independiente y reutilizable
📌 <aside> - Contenido complementario (sidebar)
📌 <footer> - Pie de página
📌 <figure> y <figcaption> - Imágenes con descripción
📌 <time> - Fechas y horas semánticas
📌 <address> - Información de contacto

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que conoces HTML, aprenderás:

  • ✅ Elementos básicos y etiquetas
  • ✅ Estructura del documento
  • ✅ Contenido y formato
  • ✅ Enlaces e imágenes
🐝