HTML - Lenguaje de Marcado de Hipertexto

La estructura fundamental de la web

150+ Etiquetas
Estructura Web
Interactivo

🌐 ¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Describe la estructura de una página web mediante el uso de elementos y etiquetas.

Código HTML

<!DOCTYPE html>
<html>
<head>
    <title>Mi Página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Mi primera página web</p>
</body>
</html>
→

Resultado en el Navegador

mi-pagina.html

Hola Mundo

Mi primera página web

🏗️ Estructura Básica

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Mi Página
</title>
</head>
<body>
<h1>
Bienvenido
</h1>
</body>
</html>

<!DOCTYPE html>

Declaración del tipo de documento

<html>

Elemento raíz que contiene todo el documento

<head>

Metadatos e información de la página

<body>

Contenido visible de la página

🔧 Tipos de Elementos

Edita el HTML:

Resultado:

Edita el HTML:

Resultado:

Edita el HTML:

Resultado:

Edita el HTML:

Resultado:

Edita el HTML:

Resultado:

Edita el HTML:

Resultado:

🎯 Atributos HTML

Atributos Globales

  • class - Especifica clases CSS
  • id - Identificador único
  • style - Estilos en línea
  • title - Información emergente

Atributos de Formularios

  • type - Tipo de input
  • placeholder - Texto de ejemplo
  • required - Campo obligatorio
  • disabled - Deshabilitado

Atributos de Enlaces

  • href - URL de destino
  • target - Donde abrir
  • rel - Relación
  • download - Descargar archivo

Atributos de Multimedia

  • src - Fuente del archivo
  • alt - Texto alternativo
  • width/height - Dimensiones
  • controls - Controles de reproducción

Prueba los Atributos:

Resultado:

Este elemento cambiará con los atributos
<div>Este elemento cambiará con los atributos</div>

🏛️ Semántica HTML5

<header>
Cabecera
<nav>
Navegación
<main>
<article>
Artículo
<section>
Sección
<aside>
Contenido Lateral
<footer>
Pie de página

Elementos Semánticos

<header>

Cabecera de la página o sección

<nav>

Navegación principal

<main>

Contenido principal

<article>

Contenido independiente

<section>

Sección temática

<aside>

Contenido relacionado

<footer>

Pie de página

🎬 Multimedia

Código HTML:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Tu navegador no soporta audio HTML5.
</audio>

Resultado:

Código HTML:

<video width="640" height="360" controls poster="miniatura.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Tu navegador no soporta video HTML5.
</video>

Resultado:

Código HTML:

<iframe 
    src="https://www.google.com/maps/embed?..."
    width="600" 
    height="450"
    frameborder="0"
    style="border:0"
    allowfullscreen>
</iframe>

Resultado:

📋 Formularios Avanzados

Constructor de Formularios:

Código Generado:

♿ Validación y Accesibilidad

Validación HTML5

Atributos ARIA

75%

💪 Editor HTML en Vivo

HTML:

Vista Previa:

🛠️ Recursos y Herramientas

Validadores

Referencias

Herramientas

💡 Mejores Prácticas

Semántica Correcta

Usa los elementos HTML apropiados para cada contenido

Accesibilidad

Incluye atributos alt, labels y ARIA donde sea necesario

Validación

Valida tu código HTML regularmente

Mobile First

Diseña primero para dispositivos móviles