¿QUÉ ES HTML?
HTML significa HyperText Markup Language o Lenguaje de Marcado de Hipertexto.
Es el lenguaje que se usa para crear la estructura o el esqueleto de una página web.
Con HTML decides qué elementos aparecen: títulos, párrafos, imágenes, enlaces, tablas,
formularios, etc.
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Aquí tienes el código base de toda página web:
<!DOCTYPE html>
<html lang="es">
<head>
<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>
<h1>¡Hola Mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
EXPLICACIÓN DE CADA PARTE
<!DOCTYPE html>
• Indica al navegador que el documento está hecho con HTML5 (la versión más
actual).
• No es una etiqueta, sino una declaración.
• Sirve para que el navegador interprete correctamente la página.
<html lang="es"> ... </html>
• Es la etiqueta raíz: todo el contenido de la web va dentro de ella.
• El atributo lang="es" indica que el contenido está en español.
• Dentro de <html> hay dos secciones importantes:
o <head> → configuración e información del sitio.
o <body> → contenido visible.
<head> ... </head>
• Contiene información sobre la página que no se ve directamente.
• Ejemplos:
o <meta charset="UTF-8"> → permite usar tildes, eñes y símbolos.
o <meta name="viewport" content="width=device-width, initial-
scale=1.0"> → hace que la página se adapte a móviles.
o <title> → define el título que aparece en la pestaña del navegador.
o Aquí también se enlazan hojas de estilo (CSS) o scripts (JavaScript).
<body> ... </body>
• Es la parte visible de la página web.
• Aquí se colocan todos los elementos que verá el usuario:
o Títulos: <h1>, <h2>, <h3>...
o Párrafos: <p>
o Imágenes: <img>
o Enlaces: <a>
o Listas: <ul>, <ol>
o Tablas, formularios, botones, etc.
EJEMPLO COMPLETO EXPLICADO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"> <!-- Permite usar caracteres especiales -->
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <!-- Se adapta a móviles -->
<title>Mi primera página web</title> <!-- Título en la pestaña del
navegador -->
</head>
<body>
<h1>Bienvenidos a mi página</h1> <!-- Encabezado principal -->
<p>Esta página fue creada con HTML básico.</p> <!-- Párrafo -->
<a href="[Link] a Google</a> <!-- Enlace -->
</body>
</html>
RESUMEN RÁPIDO
Elemento Función principal Visible
<!DOCTYPE html> Indica que es un documento HTML5 ❌ No
<html> Contenedor de todo el código ❌ No
<head> Información técnica del documento ❌ No
<title> Título en la pestaña del navegador ✅ Parcial (en pestaña)
<body> Contenido visible al usuario ✅ Sí
ELEMENTOS DE UNA ESTRUCTURA BASICA HTML:
PAGINA DE EJEMPLO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estructura básica HTML5</title>
<style>
/* Estilos básicos para visualizar la estructura */
body {
font-family: Arial, sans-serif;
margin: 0;
header {
background-color: #b0b0b0;
color: white;
text-align: center;
padding: 20px;
nav {
background-color: #ff0099;
color: white;
text-align: center;
padding: 15px;
main {
display: flex;
aside {
background-color: #357c7c;
color: white;
width: 25%;
padding: 15px;
}
section {
background-color: #c8e6c9;
width: 75%;
padding: 15px;
article {
background-color: #1e88e5;
color: white;
margin-bottom: 15px;
padding: 10px;
footer {
background-color: #ff5722;
color: white;
text-align: center;
padding: 20px;
</style>
</head>
<body>
<header>
<h1>HEADER</h1>
<p>Encabezado principal del sitio</p>
</header>
<nav>
<h2>NAVIGATION</h2>
<p>Menú o barra de navegación</p>
</nav>
<main>
<aside>
<h3>SIDEBAR</h3>
<p>Contenido lateral o complementario</p>
</aside>
<section>
<h2>MAIN CONTENT</h2>
<article>
<h3>ARTICLE 1</h3>
<p>Contenido del primer artículo.</p>
</article>
<article>
<h3>ARTICLE 2</h3>
<p>Contenido del segundo artículo.</p>
</article>
</section>
</main>
<footer>
<p>FOOTER - Pie de página del sitio</p>
</footer>
</body>
</html>
EXPLICACIÓN RÁPIDA:
• <header> → Encabezado del sitio (logo, título, etc.)
• <nav> → Contiene el menú de navegación.
• <main> → Contenedor del contenido principal.
• <aside> → Barra lateral (información complementaria).
• <section> → Agrupa el contenido principal del sitio.
• <article> → Representa artículos o bloques de contenido independientes.
• <footer> → Pie de página con información final (contacto, derechos, etc.).
LAS TRES TECNOLOGIAS FUNDAMENTALES DEL DESARROLLO WEB
A HTML, CSS y JavaScript se les conoce en conjunto como:
Las tres tecnologías fundamentales del desarrollo web
o también
La tríada del desarrollo front-end.
EXPLICACIÓN:
Estas tres herramientas trabajan juntas para construir cualquier página o aplicación web
moderna:
1. HTML → Estructura el contenido (la base o el esqueleto).
2. CSS → Le da estilo, color y diseño visual (la apariencia).
3. JavaScript → Agrega dinamismo e interactividad (el movimiento o la lógica).
HTML (HYPERTEXT MARKUP LANGUAGE)
Definición:
HTML es el lenguaje de marcado que se utiliza para estructurar y organizar el
contenido de una página web.
Con HTML se definen los elementos básicos como títulos, párrafos, imágenes, enlaces,
tablas, formularios y más.
En otras palabras, HTML es el esqueleto o la base de toda página web.
Ejemplo:
<h1>Bienvenido a mi página</h1>
<p>Este es un párrafo creado con HTML.</p>
CSS (CASCADING STYLE SHEETS)
Definición:
CSS es el lenguaje que se usa para dar estilo y diseño visual a las páginas web creadas con
HTML.
Permite cambiar colores, tamaños de letra, márgenes, fondos, animaciones y la disposición
de los elementos.
En resumen, CSS es la piel y la apariencia de la página.
Ejemplo:
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}
JAVASCRIPT
Definición:
JavaScript es un lenguaje de programación que permite agregar interactividad y
dinamismo a las páginas web.
Con él, una página puede responder a las acciones del usuario (como clics, formularios o
animaciones).
En resumen, JavaScript es el cerebro y el movimiento de la web.
Ejemplo:
alert("¡Bienvenido a mi página web!");
🧠 RESUMEN GENERAL:
Lenguaje Función principal Ejemplo visual
HTML Estructura el contenido Esqueleto
Lenguaje Función principal Ejemplo visual
CSS Da estilo y diseño Apariencia
JavaScript Añade interactividad Movimiento
EN RESUMEN:
HTML, CSS y JavaScript forman el Front-End de una página web,
es decir, la parte que el usuario ve y con la que interactúa.
GLOSARIO DE ETIQUETAS:
¡Por supuesto amiga!
Aquí tienes un glosario completo de etiquetas HTML, con su nombre, función y
ejemplo, ideal para estudiar o incluir en tus apuntes
GLOSARIO DE ETIQUETAS HTML BÁSICAS
Descripción /
Etiqueta Nombre / Uso Ejemplo
Función
Declaración de Indica al navegador
<!DOCTYPE
tipo de que el documento <!DOCTYPE html>
html>
documento usa HTML5.
Contiene todo el
<html> Etiqueta raíz código HTML de la <html lang="es"> ... </html>
página.
Incluye metadatos,
Encabezado
<head> título y enlaces a <head> ... </head>
del documento
estilos o scripts.
Muestra el nombre
Título del de la página en la
<title> <title>Mi página web</title>
documento pestaña del
navegador.
Descripción /
Etiqueta Nombre / Uso Ejemplo
Función
Define información
<meta> Metadatos como el charset o la <meta charset="UTF-8">
vista móvil.
Contiene todo el
Cuerpo del
<body> contenido visible de <body> ... </body>
documento
la página.
Títulos jerárquicos;
<h1> a <h6> Encabezados h1 es el más <h1>Título principal</h1>
importante.
Define un bloque de
<p> Párrafo <p>Este es un párrafo.</p>
texto.
Inserta un salto de
<br> Salto de línea Hola<br>Adiós
línea.
Línea Inserta una línea
<hr> <hr>
horizontal divisoria.
Crea un hipervínculo <a href="[Link]
<a> Enlace
a otra página o sitio. a Google</a>
Inserta una imagen <img src="[Link]"
<img> Imagen
en la página. alt="Descripción">
Lista Crea una lista con
<ul> <ul><li>Elemento</li></ul>
desordenada viñetas.
Crea una lista
<ol> Lista ordenada <ol><li>Elemento</li></ol>
numerada.
Define cada
Elemento de
<li> elemento dentro de <li>Elemento 1</li>
lista
una lista.
Descripción /
Etiqueta Nombre / Uso Ejemplo
Función
Agrupa contenido
División o
<div> para organizarlo o <div>Contenido</div>
contenedor
aplicar estilos.
Sirve para aplicar
<span> Texto en línea estilo a una parte <span style="color:red;">rojo</span>
específica del texto.
Encabezado de Contiene títulos,
<header> página o logos o menús <header>...</header>
sección principales.
Agrupa enlaces de
<nav> Navegación <nav><a href="#">Inicio</a></nav>
navegación (menú).
Divide el contenido
<section> Sección en secciones <section><h2>Tema</h2></section>
temáticas.
Representa un
contenido
<article> Artículo <article><h3>Noticia</h3></article>
independiente
(noticia, post, etc.).
Contenido
<aside> Barra lateral complementario o <aside>Publicidad</aside>
secundario.
Información final,
<footer> Pie de página <footer>© 2025 Mi web</footer>
derechos o contacto.
<table> Tabla Crea una tabla. <table>...</table>
Define una fila en
<tr> Fila de tabla <tr>...</tr>
una tabla.
Descripción /
Etiqueta Nombre / Uso Ejemplo
Función
Celda de
Encabezado de
<th> encabezado <th>Nombre</th>
tabla
(negrita).
Contiene datos
<td> Celda de tabla <td>Oscar</td>
dentro de la tabla.
Agrupa campos para
<form> Formulario <form>...</form>
enviar información.
Campo para escribir
Campo de <input type="text"
<input> texto, contraseñas,
entrada placeholder="Nombre">
etc.
Crea un botón
<button> Botón <button>Enviar</button>
clickeable.
Asocia texto a un
Etiqueta de
<label> campo de <label>Nombre:</label>
campo
formulario.
Campo de texto más
grande
<textarea> Área de texto <textarea></textarea>
(comentarios,
mensajes).
Lista Crea un menú de <select><option>Opción
<select>
desplegable selección. 1</option></select>
Inserta otra página
<iframe> Marco en línea <iframe src="[Link]"></iframe>
dentro de la actual.
Texto en Resalta texto con
<strong> <strong>Importante</strong>
negrita importancia.
Texto en Enfatiza una parte
<em> <em>Palabra</em>
cursiva del texto.
Descripción /
Etiqueta Nombre / Uso Ejemplo
Función
<video src="video.mp4"
<video> Video Inserta un video.
controls></video>
Inserta un archivo de <audio src="audio.mp3"
<audio> Audio
sonido. controls></audio>