Introducción a HTML5 y la Web
Aprende los conceptos clave de HTML5: qué es, cómo los navegadores interpretan el código y la anatomía esencial de un elemento web.
¿Qué es HTML?
HTML corresponde a las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el estándar universal que define la estructura y el significado del contenido en la World Wide Web.
- Hipertexto (HyperText): Hace referencia a los enlaces que conectan páginas web entre sí, formando una red navegable e interactiva.
- Marcado (Markup): Es el sistema de etiquetas (como
<h1>,<p>,<button>) utilizadas para etiquetar texto, imágenes y otros elementos para que el navegador sepa cómo presentarlos. - HTML5 es el estándar moderno: Publicado por el W3C y el WHATWG, incluye soporte nativo para audio, video, gráficos vectoriales, almacenamiento local y etiquetas semánticas avanzadas sin necesidad de complementos externos.
¿Cómo funciona una Página Web?
Cuando escribes una dirección web (URL) en tu navegador, este realiza una petición HTTP/HTTPS a un servidor web. El servidor responde enviando un archivo de texto con extensión .html. El motor de renderizado del navegador (como Blink en Chrome o Gecko en Firefox) lee ese código de arriba a abajo y construye el DOM (Document Object Model), que es la representación visual interactiva que ves en pantalla.
Anatomía de un Elemento HTML
La inmensa mayoría de los elementos HTML siguen una estructura canónica de cuatro partes:
<etiqueta atributo="valor">Contenido visible para el usuario</etiqueta>| Componente | Ejemplo | Propósito |
|---|---|---|
| Etiqueta de apertura | <p>, <h1> |
Declara el inicio del elemento y el tipo de contenido que contiene. |
| Atributos | class="destacado" |
Proporcionan información adicional, configuración o identificadores al elemento. |
| Contenido | Hola Mundo |
El texto, imagen u otros elementos anidados que se mostrarán al usuario. |
| Etiqueta de cierre | </p>, </h1> |
Indica dónde termina el elemento mediante una barra diagonal (/). |
Elementos Anidados
Los elementos en HTML pueden colocarse unos dentro de otros. Esto se conoce como anidamiento. Por regla estricta de sintaxis, el elemento que se abre de último debe cerrarse de primero:
<!-- Correcto: se abre p, luego strong; se cierra strong, luego p -->
<p>Este es un texto con una palabra <strong>muy importante</strong> en negrita.</p>⚡ Ejemplo Básico de HTML5
Observa cómo el navegador interpreta las etiquetas para crear un encabezado principal, párrafos informativos y un botón con interacción:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primer Documento HTML5</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: #f1f5f9;
padding: 30px;
line-height: 1.6;
}
.tarjeta {
background: #ffffff;
border-radius: 12px;
padding: 24px;
max-width: 520px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border-left: 5px solid #e34f26;
}
.badge {
background: #fee2e2;
color: #991b1b;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 700;
}
.btn {
background: #e34f26;
color: #ffffff;
border: none;
padding: 10px 18px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.btn:hover {
background: #c83d16;
}
</style>
</head>
<body>
<div class="tarjeta">
<span class="badge">LECCIÓN 1</span>
<h1>¡Hola desde HTML5!</h1>
<p>
Estás ejecutando código HTML en vivo en <strong>Kilopolis Academia</strong>. Cada elemento que ves en esta caja está estructurado con etiquetas HTML.
</p>
<p>
Prueba a modificar el título o el texto en el editor de la izquierda y presiona <em>Ejecutar Código</em>.
</p>
<button class="btn" onclick="alert('¡Felicitaciones! Has probado tu primer código HTML5.')">
Probar Interacción »
</button>
</div>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.