- 🗺️ Índice de la Guía Completa de HTML
- 🔰 Nivel 0 - Fundamentos
- 🧱 Nivel 1 - Estructura y Organización
- 🧰 Nivel 2 - Formatos y Multimedia
- 🧪 Nivel 3 - Formularios
HTML (HyperText Markup Language) es el lenguaje de marcado estándar de la web. Su función principal es dar forma y estructura al contenido que aparece en la web, como textos, imágenes, enlaces, formularios, etc.
HTML funciona a través de etiquetas (tags) que el navegador interpreta para mostrar el contenido de manera estructurada. Estas etiquetas están encerradas entre signos de menor y mayor que (< >), y suelen tener una etiqueta de apertura (<p>) y una etiqueta de cierre (</p>), aunque algunas etiquetas son autocontenidas (como <img>).
Cuando escribes código HTML, estás diciendo al navegador:
“Esto es un párrafo”, “esto es un título”, “esto es una imagen”, etc.
El navegador entonces interpreta y renderiza ese contenido en pantalla.
En este tema introductorio, hay dos etiquetas clave que debes conocer:
-
<html>-
Uso: Es la raíz de todo documento HTML. Contiene todo el contenido visible e invisible (metadatos).
-
Atributos principales:
lang: Define el idioma del contenido (ej.lang="es"para español).
-
-
<!DOCTYPE html>-
Uso: No es una etiqueta HTML como tal, sino una declaración obligatoria que le dice al navegador que estamos usando HTML5, la versión moderna.
-
Atributos: No tiene atributos. Siempre se escribe como:
<!DOCTYPE html>
-
-
Nunca olvides
<!DOCTYPE html>, ya que si no está, el navegador podría usar un "modo de compatibilidad" que no sigue las reglas modernas. -
Aunque el contenido visible no cambia sin
lang, este atributo es fundamental para la accesibilidad y el SEO. -
Todo documento HTML debe comenzar con
<!DOCTYPE html>seguido por una etiqueta<html>.
La estructura básica de un archivo HTML sigue un orden estricto que define qué se muestra y cómo debe interpretarse la información. Esta estructura está compuesta por etiquetas clave, que organizan el contenido y los metadatos del sitio.
A continuación, se muestra la estructura mínima recomendada en HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Bienvenido a tu primera página web.</p>
</body>
</html>Esta estructura tiene tres grandes bloques:
<!DOCTYPE html>→ Declaración del tipo de documento (HTML5).<html>→ Raíz del documento.<head>→ Contiene metadatos (no visibles por el usuario).<body>→ Contiene todo el contenido visible de la página.
-
<html>-
Uso: Raíz de todo el documento.
-
Atributos comunes:
lang: idioma principal del contenido ("es","en", etc.).
-
-
<head>-
Uso: Contiene metadatos, enlaces a scripts y estilos, y configuraciones importantes del sitio.
-
No tiene atributos comunes, pero puede contener varias etiquetas importantes.
-
-
<meta>-
Uso: Define metadatos como codificación de caracteres, descripción, palabras clave, etc.
-
Atributos comunes:
charset: define la codificación de caracteres (UTF-8es la más usada).name: tipo de información (ej."description","keywords").content: valor del metadato.
-
-
<title>-
Uso: Define el título de la pestaña del navegador.
-
Atributos: no tiene atributos comunes.
-
-
<body>-
Uso: Contiene el contenido visible del sitio (texto, imágenes, botones, etc.).
-
Atributos comunes:
class,id,style.
-
-
Nunca pongas contenido visible dentro del
<head>: todo contenido visible debe ir en<body>. -
Usa siempre
<meta charset="UTF-8">para evitar errores con acentos o caracteres especiales. -
La etiqueta
<title>es fundamental para SEO y usabilidad: no la omitas. -
El orden correcto de etiquetas importa, especialmente en el
<head>.
HTML proporciona un conjunto de etiquetas fundamentales para estructurar el contenido textual de una página. Estas etiquetas permiten dividir el contenido en títulos jerárquicos, párrafos, líneas separadas y comentarios. Esta estructura es esencial para la legibilidad, accesibilidad y SEO.
A continuación, se detallan todas las etiquetas clave para estructurar texto:
- Títulos (
<h1>a<h6>)
-
Uso: Representan títulos jerárquicos.
<h1>es el más importante (solo debe usarse una vez por página), y<h6>el menos importante. -
Jerarquía:
<h1>Título principal</h1> <h2>Subtítulo</h2> <h3>Subsección</h3> ... <h6>Detalle mínimo</h6>
-
Atributos comunes
id: para navegación o estilos específicos.class: para aplicar estilos CSS.style: estilos en línea (no recomendado).
- Párrafo (
<p>)
-
Uso: Contiene bloques de texto. Representa ideas completas.
<p>Este es un párrafo de ejemplo.</p>
-
Atributos comunes
id: para navegación o estilos específicos.class: para aplicar estilos CSS.style: estilos en línea (no recomendado).
- Salto de línea (
<br>)
- Uso: Inserta un salto de línea. No debe usarse para separar párrafos enteros.
Línea 1<br>
Línea 2-
Ojo: Es una etiqueta autocontenida (no lleva cierre).
-
Atributos comunes
id: para navegación o estilos específicos.class: para aplicar estilos CSS.style: estilos en línea (no recomendado).
- Línea horizontal (
<hr>)
- Uso: Representa una separación temática (no visual decorativa).
<p>Primera sección</p>
<hr>
<p>Segunda sección</p>- Atributos comunes
id: para navegación o estilos específicos.class: para aplicar estilos CSS.style: estilos en línea (no recomendado).
- Comentarios (
<!-- comentario -->)
- Uso: No visible al usuario. Sirve para dejar notas en el código.
<!-- Este es un comentario -->- No uses múltiples
<h1>en una sola página. Debe haber solo uno, representando el título principal. - Usa
<br>solo cuando realmente necesites un salto puntual. Para separar bloques usa<p>o CSS. - No uses títulos solo para agrandar texto. Usa CSS para estilos y HTML para significado.
- Los comentarios no deben estar dentro de otras etiquetas (excepto en
<head>o<body>).
En HTML, los comentarios y el espaciado no afectan directamente lo que se muestra en el navegador, pero son esenciales para la organización, legibilidad y mantenimiento del código.
-
Los comentarios sirven para documentar partes del código que no deseas que se vean en la página.
-
El espaciado en blanco (saltos de línea, sangrías y tabulaciones) no altera el resultado visual, pero hace que el código sea mucho más fácil de leer.
- Comentarios en HTML (
<!-- comentario -->)
- Uso: Insertar anotaciones o descripciones invisibles al navegador y al usuario final.
<!-- Este es un comentario -->
<p>Hola mundo</p>-
Atributos: No tiene atributos.
-
Advertencia: Nunca uses
//o/* */como en otros lenguajes. En HTML solo se usa<!-- -->.
- Espaciado en blanco (espacios, tabulaciones, saltos de línea)
- HTML ignora múltiples espacios, saltos de línea y tabulaciones. Es decir:
<p>Hola mundo</p>Se verá igual que:
<p>Hola mundo</p>-
Para insertar espacios adicionales intencionales, se usa la entidad HTML:
→ espacio no separable (non-breaking space)
Hola mundo- Para mostrar texto tal como fue escrito (con espacios y saltos de línea respetados), se puede usar la etiqueta
<pre>:
<pre>
Línea 1
Línea 2 con espacio
</pre>- Nunca pongas código HTML dentro de los comentarios. Aunque algunos navegadores lo ignoren, puede causar errores inesperados.
- No confíes en los comentarios para ocultar información confidencial. El código fuente puede ser inspeccionado fácilmente por cualquier usuario.
- Evita comentarios innecesarios o excesivos; usa solo los que agregan claridad.
- Para separar visualmente partes del código, usa líneas en comentarios:
<!-- ========= Sección de Contacto ========= -->En HTML, cada etiqueta sigue una estructura general:
<!-- todo esto es llamado elemento -->
<etiqueta atributo="valor">Contenido</etiqueta>Hay atributos que son específicos de una etiqueta, pero también existen atributos globales que pueden usarse en casi todas las etiquetas HTML. Estos atributos permiten dar identidad, estilo, contexto, accesibilidad y funcionalidad al contenido.
<p class="intro" id="parrafo1" style="color:red;">Hola</p>-
<p>→ Etiqueta de apertura (indica que comienza un párrafo) -
class="intro"→ Atributo global (clase CSS asociada) -
id="parrafo1"→ Atributo global (identificador único) -
style="color:red;"→ Atributo global (estilo en línea) -
Hola→ Contenido del elemento -
</p>→ Etiqueta de cierre
Estos atributos pueden aplicarse a casi cualquier etiqueta en HTML5:
| Atributo | Uso |
|---|---|
id |
Identificador único del elemento en el documento. |
class |
Permite agrupar elementos con un nombre común. Se usa con CSS y JS. |
style |
Define estilos en línea (color, tamaño, márgenes). |
title |
Muestra un texto emergente al pasar el mouse. |
lang |
Idioma del contenido del elemento (ej. es, en). |
hidden |
Oculta el elemento visualmente. |
tabindex |
Controla el orden de navegación con el teclado. |
draggable |
Define si el elemento puede ser arrastrado. |
contenteditable |
Permite editar el contenido directamente desde el navegador. |
data-* |
Define atributos personalizados para JS. Ej: data-user="juan" |
- Nunca repitas un mismo
iden diferentes elementos del mismo documento. - Evita abusar de
style. Se recomienda usar CSS externo o interno. - Usa
classpara agrupar estilos comunes; no pongas estilos directos si puedes evitarlo. - Los atributos
data-*no tienen efecto visual por sí solos, pero son útiles en JavaScript. hiddensolo oculta visualmente, pero sigue existiendo en el DOM.
Las listas en HTML permiten organizar contenido relacionado de forma estructurada. Existen tres tipos principales:
- Listas ordenadas (
<ol>): enumeran los ítems con números o letras. - Listas desordenadas (
<ul>): enumeran los ítems con viñetas. - Listas de definición (
<dl>): muestran pares de términos y descripciones.
- Lista desordenada (
<ul>)
-
Uso: Lista de ítems sin orden específico (usualmente con viñetas).
-
Atributos comunes:
type(obsoleto): define el tipo de viñeta (circle, square, disc). Mejor usar CSS.class,id,style.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>- Lista ordenada (
<ol>)
-
Uso: Lista con ítems numerados (1, 2, 3...) o con letras.
-
Atributos comunes:
type: tipo de marcador (1,a,A,i,I).start: número inicial.reversed: invierte el orden (de mayor a menor).
<ol type="A" start="3">
<li>Inicio</li>
<li>Medio</li>
<li>Fin</li>
</ol>- Elemento de lista (
<li>)
-
Uso: Representa cada ítem dentro de
<ul>o<ol>. -
Atributos comunes:
value(sólo en<ol>, permite personalizar el número).
<ol>
<li value="10">Diez</li>
<li>Once</li>
</ol>- Lista de definición (
<dl>)
-
Uso: Lista de términos y definiciones ( pares término-descripción/pregunta-respuesta ).
-
Elementos relacionados:
<dt>: término a definir.<dd>: definición del término.
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado para la web.</dd>
<dt>CSS</dt>
<dd>Lenguaje de estilo para la web.</dd>
</dl>- Nunca pongas texto suelto directamente dentro de
<ul>o<ol>. Siempre debe estar dentro de<li>. - Evita abusar de listas solo por sangrar contenido. Usa listas solo si los elementos realmente son ítems.
- Para listas complejas (ej. con imágenes o botones dentro), sigue usando
<li>para mantener la estructura semántica. <ul>y<ol>no deben mezclarse dentro de la misma jerarquía sin cerrar correctamente las etiquetas.- Si solo tienes una lista de ítems sin una relación directa de término-descripción, usa
<ul>(lista no ordenada) o<ol>(lista ordenada). - siempre que tengas contenido que se organice naturalmente en pares donde un elemento define, describe o da valor a otro, la etiqueta
<dl>junto con<dt>y<dd>es la elección semánticamente correcta
HTML5 introdujo etiquetas semánticas que permiten describir claramente las distintas secciones de una página web. Estas etiquetas no solo organizan mejor el contenido, sino que también mejoran el SEO, la accesibilidad y la legibilidad del código.
En lugar de usar
<header>
-
Uso: Representa el encabezado de una página o sección. Puede contener logos, menús, títulos, etc.
-
Atributos comunes:
class,id,style
<header>
<h1>Mi sitio web</h1>
<nav>...</nav>
</header><nav>
-
Uso: Define una sección de navegación principal o interna como un menu de navegacion (dentro del
<header>) o un indice (dentro del<main>). -
Atributos comunes:
class,id,style
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#nosotros">Nosotros</a></li>
</ul>
</nav><main>
-
Uso: Contiene el contenido principal del documento. Solo debe haber un
<main>por página. -
Atributos comunes:
class,id,style
<main>
<h2>Contenido principal</h2>
<p>Aquí va lo más importante del sitio.</p>
</main><section>
-
Uso: Agrupa contenido temáticamente relacionado. Generalmente, cada
<section>debe tener un encabezado (un elemento<h1>-<h6>) que identifique el tema de esa sección. -
Atributos comunes:
class,id,style
<section>
<h3>Servicios</h3>
<p>Descripción de servicios.</p>
</section><article>
-
Uso: Representa contenido independiente y reutilizable como un post, noticia o comentario.
-
Atributos comunes:
class,id,style
<article>
<h2>Título de una Entrada de Blog Principal</h2>
<p>Contenido de la entrada...</p>
<section>
<h3>Comentarios</h3>
<article class="comment">
<h4>Usuario1 dice:</h4>
<p>¡Gran artículo!</p>
</article>
<article class="comment">
<h4>Usuario2 dice:</h4>
<p>No estoy de acuerdo...</p>
</article>
</section>
</article><aside>
-
Uso: Contenido complementario o relacionado, como una barra lateral, anuncios, widgets.
-
Atributos comunes:
class,id,style
<aside>
<h2>Artículos Relacionados</h2>
<ul>
<li><a href="#">Otro artículo interesante</a></li>
<li><a href="#">Tema similar</a></li>
</ul>
<h2>Publicidad</h2>
<img src="anuncio.jpg" alt="Anuncio">
</aside><footer>
-
Uso: Se utiliza para marcar el contenido que funciona como el pie de página de un documento o de una sección particular.
-
Atributos comunes:
class,id,style
<body>
<header>
<h1>Mi Blog Increíble</h1>
</header>
<main>
<article>
<h2>Un Artículo Interesante</h2>
<p>Contenido del artículo...</p>
<footer>
<p>Publicado por: Juan Pérez el 5 de mayo de 2025</p>
<p>Categorías: <a href="#">Tecnología</a>, <a href="#">Novedades</a></p>
</footer>
</article>
</main>
<footer>
<p>© 2025 Mi Blog Increíble. Todos los derechos reservados.</p>
<address>
Contacto: <a href="mailto:info@miblogincreible.com">info@miblogincreible.com</a>
</address>
<ul>
<li><a href="/privacidad">Política de Privacidad</a></li>
<li><a href="/terminos">Términos de Servicio</a></li>
</ul>
</footer>
</body>- Usa una sola etiqueta
<main>por página. - No uses
<section>sin encabezado (<h2>,<h3>, etc.). - Evita usar
<div>si una etiqueta semántica puede expresar mejor la intención. <article>es para contenido que tiene sentido por sí solo y podría distribuirse de forma independiente.
Los enlaces o hipervínculos permiten conectar una página con otra, o con un recurso externo. Son una parte esencial de la navegación en la web.
Se crean con la etiqueta <a>, que significa anchor (ancla). Esta etiqueta puede enlazar:
- A otras páginas del mismo sitio.
- A secciones específicas de la misma página.
- A sitios externos.
- A archivos descargables.
- A correos electrónicos o números telefónicos.
<a href="https://example.com">Texto del enlace</a>| Atributo | Descripción |
|---|---|
href |
Define la URL o destino del enlace. |
target |
Especifica dónde abrir el enlace: _self (por defecto), _blank (nueva pestaña), _parent, _top. |
title |
Texto emergente al pasar el mouse. |
download |
Indica que el archivo se debe descargar. |
rel |
Define la relación con el recurso (nofollow, noopener, noreferrer, etc.). Importante para seguridad y SEO. |
Los enlaces pueden envolver imágenes, íconos, etc.:
<a href="https://twitter.com">
<img src="logo-twitter.png" alt="Twitter">
</a>- Usa siempre
target="_blank"conrel="noopener noreferrer"para enlaces externos por seguridad:
<a href="https://externo.com" target="_blank" rel="noopener noreferrer">Sitio externo</a>- No uses
href="#"sin propósito. Puede causar problemas si no está controlado con JavaScript. - Asegúrate de usar
alten imágenes dentro de enlaces para accesibilidad. - No pongas enlaces vacíos: siempre debe haber contenido visible o accesible.
La etiqueta <img> permite insertar imágenes en una página web. Las imágenes hacen que el contenido sea más visual y atractivo, y también pueden ser utilizadas para transmitir información clave. A diferencia de otras etiquetas, <img> es autocontenida, lo que significa que no necesita etiqueta de cierre.
<img src="ruta/imagen.jpg" alt="Descripción de la imagen">| Atributo | Descripción |
|---|---|
src |
Ruta de la imagen (relativa o absoluta). Obligatorio. |
alt |
Texto alternativo si la imagen no carga o para lectores de pantalla. Obligatorio por accesibilidad. |
title |
Texto emergente al pasar el cursor sobre la imagen. |
width |
Ancho de la imagen (en px o %). |
height |
Alto de la imagen. |
loading |
Optimización de carga (lazy, eager, auto). |
decoding |
Método de decodificación (sync, async, auto). |
referrerpolicy |
Política de referencia de seguridad (no-referrer, etc.). |
class, id, style |
Atributos globales para personalización. |
<img src="img/logo.png" alt="Logo de la empresa"><img src="https://example.com/logo.png" alt="Logo externo">- Usa imágenes optimizadas y de tamaño adecuado para evitar demoras de carga.
- Siempre incluye un texto
altdescriptivo pero conciso. - No pongas imágenes de fondo usando
<img>. Usa CSS para eso. - Utiliza
loading="lazy"para sitios con muchas imágenes (como catálogos o blogs). - Usa nombres de archivo claros y en minúsculas (
producto-verde.jpg, noIMG1234.JPG).
-
Nunca dejes el atributo
altvacío sin motivo. Si la imagen es decorativa, entonces se justifica:<img src="decorativa.png" alt="">
-
No establezcas solo
widtho soloheightsin mantener la proporción; puedes deformar la imagen. -
Asegúrate de que las rutas de las imágenes sean correctas y estén bien organizadas.
-
Evita imágenes enormes si van a mostrarse pequeñas.
Las tablas en HTML permiten organizar información en filas y columnas, como en una hoja de cálculo. Son útiles para mostrar datos estructurados como horarios, comparativas, inventarios, entre otros.
Una tabla se construye con varias etiquetas que definen su estructura.
<table>
-
Uso: Define el inicio y fin de una tabla.
-
Atributos comunes:
border(obsoleto): crea borde simple. Mejor usar CSS.class,id,style.
<table>...</table><tr>— Table Row
- Uso: Representa una fila de la tabla.
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr><td>— Table Data
-
Uso: Representa una celda de datos.
-
Atributos comunes:
colspan: para que una celda ocupe varias columnas.rowspan: para que una celda ocupe varias filas.
<td colspan="2">Celda que ocupa dos columnas</td><th>— Table Header
-
Uso: Crea una celda de encabezado (se ve en negrita y centrado por defecto).
-
Atributos comunes: igual que
<td>.
<th>Nombre</th><thead>,<tbody>,<tfoot>
- Uso: Agrupan secciones de la tabla para mejorar la estructura y accesibilidad.
<table>
<thead> <!-- encabezado -->
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
</thead>
<tbody> <!-- contenido -->
<tr>
<td>Manzana</td>
<td>S/ 2.50</td>
</tr>
</tbody>
<tfoot> <!-- pie -->
<tr>
<td>Total</td>
<td>S/ 2.50</td>
</tr>
</tfoot>
</table>HTML incluye varias etiquetas para formatear y resaltar partes del texto con distintos significados semánticos. No solo cambian el estilo visual (negrita, cursiva, subrayado), sino que también indican su propósito o importancia, lo que es fundamental para accesibilidad y SEO.
Estas etiquetas no deben usarse para dar estilo por apariencia visual solamente — para eso está el CSS — sino para señalar el significado del contenido.
<strong>
-
Uso: Resalta texto con énfasis fuerte o importancia. Generalmente se muestra en negrita.
-
Equivalente semántico a decir "esto es muy importante".
<p><strong>Atención:</strong> Este producto es inflamable.</p><em>
-
Uso: Añade énfasis a una palabra o frase. Generalmente se muestra en cursiva.
-
Equivalente a leer algo con entonación o énfasis emocional.
<p>Este producto es <em>realmente</em> útil.</p><mark>
-
Uso: Resalta un fragmento de texto como si lo hubieras marcado con resaltador.
-
Muy útil en resultados de búsqueda o para destacar información.
<p>Busca la palabra <mark>clave</mark> en este texto.</p><small>
-
Uso: Representa texto en tamaño más pequeño (nota al pie, aclaraciones).
-
Tiene valor semántico para cosas menos importantes.
<p>© 2025 Mi Empresa <small>Todos los derechos reservados</small></p><del>y<ins>
<del>: Texto eliminado (tachado).<ins>: Texto insertado (subrayado por defecto).- Útil en ediciones de contenido o historial de cambios.
<p>Precio anterior: <del>S/ 50</del> <ins>S/ 40</ins></p><sub>y<sup>
<sub>: Subíndice (ej. fórmulas químicas: H2O).<sup>: Superíndice (ej. potencias: x2).
<p>La fórmula es H<sub>2</sub>O y E = mc<sup>2</sup></p><abbr>
- Uso: Abreviaturas con significado. Al pasar el cursor, se muestra el texto completo.
- Importante para accesibilidad.
<p>Estudio en la <abbr title="Universidad Peruana de Ciencias Aplicadas">UPC</abbr></p><cite>
- Uso: Cita el nombre de una obra, libro, película o publicación.
- Generalmente se muestra en cursiva.
<p>Leí <cite>El Principito</cite> el año pasado.</p><q>
- Uso: Citas textuales breves. Agrega comillas automáticamente.
<p>Ella dijo: <q>No tengo tiempo para eso.</q></p><blockquote>
-
Uso: Representa una cita larga o en bloque proveniente de otra fuente.
A diferencia de<q>, que se usa para citas cortas en línea,
<blockquote>se usa para fragmentos extensos y por defecto se muestra con sangría. -
Atributos comunes:
cite: permite incluir la URL de la fuente original (opcional, no se muestra visualmente).class,id,style: para aplicar estilos CSS.
<blockquote cite="https://www.nelsonmandela.org/">
La educación es el arma más poderosa que puedes usar para cambiar el mundo.
</blockquote>Aunque el atributo
citeno se muestra directamente, proporciona valor semántico y puede ser utilizado por herramientas de accesibilidad o motores de búsqueda.
- No uses
<b>ni<i>solo para dar formato. Usa<strong>y<em>que tienen significado semántico. - Evita abusar de
<mark>o<del>sin contexto real. - Usa
alt+ etiquetas semánticas juntas cuando involucren imágenes o íconos. <sub>y<sup>no cambian el valor semántico por sí mismos. Solo son visuales.- Usa
<blockquote>para textos de más de una oración o párrafos completos. - Usa
<q>solo para frases breves dentro de una oración. - El atributo
citees opcional pero recomendable si se conoce la fuente.
HTML5 permite incluir contenido multimedia de forma nativa, sin necesidad de plugins como Flash. Puedes insertar videos y audios directamente en tu página usando las etiquetas <video> y <audio>. Estas etiquetas son altamente configurables y compatibles con la mayoría de navegadores modernos.
<video>
- Uso: Insertar archivos de vídeo.
- Atributos comunes:
| Atributo | Descripción |
|---|---|
src |
Ruta del archivo de video (alternativamente se puede usar <source>). |
controls |
Muestra los controles del reproductor. |
autoplay |
Reproduce automáticamente (requiere muted para funcionar sin interacción). |
muted |
Silencia el audio. |
loop |
Reproduce el video en bucle. |
poster |
Imagen que se muestra antes de que se reproduzca el video. |
width, height |
Define el tamaño del reproductor. |
preload |
Indica si se debe cargar el video con antelación (auto, metadata, none). |
<video src="video.mp4" width="400" controls></video><audio>
- Uso: Insertar archivos de audio (como música, efectos, podcasts).
- Atributos: similares a
<video>.
<audio src="audio.mp3" controls></audio>- Siempre incluye controles si quieres que el usuario tenga el control sobre el contenido.
- Algunos navegadores bloquean autoplay si no está silenciado (
muted). - Incluye varios formatos (
mp4,webm,ogg) para mayor compatibilidad. - No insertes contenido multimedia sin propósito claro: puede afectar la accesibilidad y el rendimiento.
Un iframe (inline frame) permite insertar otro documento HTML o contenido externo dentro de una página.
Es muy usado para mostrar videos de YouTube, mapas de Google, formularios, documentos PDF o incluso sitios web completos sin redirigir al usuario.
<iframe src="https://ejemplo.com" width="600" height="400"></iframe>| Atributo | Descripción |
|---|---|
src |
URL del contenido que se quiere incrustar. |
width / height |
Dimensiones del iframe. |
title |
Descripción del contenido (accesibilidad). Muy importante para accesibilidad. |
loading |
Control de carga: lazy o eager. |
allowfullscreen |
Permite que el contenido (como videos) se vea en pantalla completa. |
referrerpolicy |
Controla el envío del encabezado Referer. |
sandbox |
Restringe ciertas funciones del contenido embebido (seguridad). |
- YouTube (video embebido)
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Video de YouTube"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>Puedes obtener este código desde el botón "Compartir > Insertar" en cualquier video de YouTube.
- Google Maps
<iframe
src="https://www.google.com/maps/embed?pb=!1m18..."
width="600"
height="450"
style="border:0;"
allowfullscreen
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>Puedes obtener este iframe desde la opción "Compartir mapa > Insertar un mapa" en Google Maps.
- Mostrar un archivo PDF
<iframe
src="documento.pdf"
width="100%"
height="500"
title="Documento PDF">
</iframe>- No uses
<iframe>para maquetar contenido del mismo sitio; solo para contenido externo o específico. - Algunos sitios como Instagram, Facebook o TikTok pueden bloquear iframes por políticas de seguridad (CORS).
- Siempre proporciona un atributo
titlepara accesibilidad. - Usa
loading="lazy"para mejorar la velocidad de carga en páginas con varios iframes. - Agrega
allowfullscreensolo si se necesita esa funcionalidad (por ejemplo, para videos).
HTML utiliza ciertos caracteres para su propia sintaxis, como <, >, & y ". Para poder mostrar estos caracteres literalmente en la página, debes usar entidades HTML, que son combinaciones especiales que el navegador interpreta y reemplaza por el símbolo correspondiente.
También puedes usar entidades para insertar símbolos especiales, como signos de copyright, flechas, letras griegas, y más.
&nombreEntidad;O también:
&#códigoDecimal;O :
ódigoHexadecimal;| Símbolo | Entidad | Descripción |
|---|---|---|
| < | < |
Menor que |
| > | > |
Mayor que |
| & | & |
Ampersand |
| " | " |
Comillas dobles |
| ' | ' |
Comilla simple (no soportada en todos los navegadores antiguos) |
| © | © |
Copyright |
| ® | ® |
Marca registrada |
| € | € |
Euro |
| ¥ | ¥ |
Yen japonés |
| → | → |
Flecha derecha |
| ← | ← |
Flecha izquierda |
| ↑ | ↑ |
Flecha arriba |
| ↓ | ↓ |
Flecha abajo |
| ± | ± |
Más/menos |
| ∞ | ∞ |
Infinito |
| ✔ | ✓ |
Check |
| × | × |
Multiplicación |
| ÷ | ÷ |
División |
- No escribas directamente los símbolos
<,>,&en tu contenido si no están dentro de etiquetas: usa entidades para evitar errores de interpretación. - No abuses de entidades decorativas que no aportan significado.
- Las entidades no deben usarse para estilos visuales: usa CSS si solo quieres apariencia.
- Algunas entidades solo funcionan con determinados conjuntos de caracteres. Asegúrate de tener
<meta charset="UTF-8">en tu<head>.
Los formularios en HTML permiten recopilar datos del usuario (como nombre, email, contraseña, selección de opciones, archivos, etc.). Son esenciales en sitios como tiendas, registros, encuestas o páginas de contacto.
Todo formulario comienza con la etiqueta <form>, que actúa como un contenedor de todos los campos interactivos y botones de envío.
<form>
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" required>
<label for="email">Correo:</label>
<input id="email" type="email" name="correo" required>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="4" cols="40"></textarea>
<button type="submit">Enviar</button>
</form>| Atributo | Descripción |
|---|---|
action |
URL a la que se enviarán los datos (puede ser un archivo o endpoint). |
method |
Método de envío: get (datos visibles en la URL) o post (más seguro). |
target |
Dónde abrir la respuesta (_self, _blank, etc.). |
autocomplete |
Activa/desactiva sugerencias del navegador (on, off). |
novalidate |
Desactiva validaciones automáticas del navegador. |
- El usuario rellena los campos del formulario.
- El navegador envía los datos según el método (
getopost). - El servidor (o script de procesamiento) recibe los datos para procesarlos, almacenarlos o responder.
- Todos los campos que recogen datos van dentro del
<form>. - El atributo
nameen los campos es clave: define el nombre que se usará al enviar los datos. - Puedes enviar formularios incluso sin usar JavaScript. Solo con HTML.
Los campos de entrada permiten a los usuarios interactuar con los formularios introduciendo texto, eligiendo opciones, subiendo archivos, entre otros. Todos deben estar contenidos dentro de una etiqueta <form> para que sus datos sean enviados correctamente.
<label>
-
Uso: Asocia un texto descriptivo con un campo del formulario.
-
Ventajas:
- Mejora la accesibilidad (lectores de pantalla).
- Al hacer clic en el
<label>, el campo asociado se activa.
- Atributos:
| Atributo | Descripción |
|---|---|
for |
ID del campo al que está asociado. |
class, id, style |
Estilos y organización |
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre"><input>
- Uso: Campo versátil que cambia su comportamiento según el atributo
type.
- Tipos más comunes y sus usos:
type |
Descripción |
|---|---|
text |
Texto de una sola línea |
email |
Email con validación básica |
password |
Campo oculto para contraseñas |
number |
Solo números |
date |
Selector de fecha |
checkbox |
Casilla de verificación (sí/no) |
radio |
Botones de opción única |
file |
Selector de archivo |
hidden |
Campo no visible (útil para datos ocultos) |
range |
Selector tipo deslizador |
color |
Selector de color |
search |
Campo de búsqueda |
tel |
Números telefónicos |
url |
Validación de URLs |
submit |
Botón para enviar formulario |
reset |
Botón para limpiar campos |
-
Atributos útiles:
-
name: Nombre del dato (obligatorio para enviar). -
value: Valor por defecto o actual. -
required: Hace obligatorio el campo. -
placeholder: Texto guía. -
min,max,step: Rango de valores paranumber,date, etc. -
checked: Paracheckboxyradio.
<input type="text" name="nombre" placeholder="Escribe tu nombre" required><textarea>
- Uso: Campo de texto multilínea (comentarios, descripciones, etc.).
- Se debe cerrar con
</textarea>y el contenido por defecto se coloca dentro.
-
Atributos:
-
name: Nombre del campo (clave al enviar). -
rows: Número de filas visibles. -
cols: Número de columnas visibles. -
placeholder: Texto guía dentro del campo. -
maxlength: Límite de caracteres permitidos. -
required: Hace obligatorio completar el campo.
<textarea name="mensaje" rows="5" cols="40" placeholder="Escribe tu mensaje aquí"></textarea><select>y<option>
- Uso: Menú desplegable con una o varias opciones.
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="pe">Perú</option>
<option value="mx">México</option>
<option value="ar">Argentina</option>
</select>-
Atributos útiles para
<select>y<option>: -
multiple: permite seleccionar varias opciones. -
selected: define el valor preseleccionado dentro de una etiqueta<option>. -
disabled: indica que la opción está deshabilitada y no puede seleccionarse.
<button>
- Uso: Botón que puede enviar formularios, ejecutar scripts, o actuar como botón genérico.
<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>
<button type="button">Solo botón</button>- No olvides el atributo
namesi vas a enviar los datos del campo. - Usa
labelcorrectamente: mejora la accesibilidad y la experiencia de usuario. - No uses
buttonsintypesi está dentro de un formulario: por defecto essubmit. - Usa
required,min,max,patternpara validaciones sin JavaScript. - Para campos multiselección (
select multiple) recuerda que necesitas manejar los datos como una lista del lado del servidor.
HTML5 proporciona validación automática y accesible directamente desde el navegador, sin necesidad de usar JavaScript. Esto permite asegurarse de que los usuarios ingresen información válida antes de enviar el formulario.
Las validaciones se definen a través de atributos en las etiquetas de formulario como <input>, <select>, <textarea>, etc.
| Atributo | Aplicación | Función |
|---|---|---|
required |
Todos | Campo obligatorio |
min, max |
number, date, range |
Establece valores mínimo/máximo |
maxlength, minlength |
text, email, password, etc. |
Longitud mínima/máxima |
pattern |
text, tel, etc. |
Expresión regular (regex) para validar formato |
step |
number, date, range |
Incremento permitido |
type |
email, url, etc. |
Valida automáticamente el formato correspondiente |
<form action="procesar.html" method="post">
<!-- NOMBRE -->
<label for="nombre">Nombre completo:</label><br>
<input type="text" id="nombre" name="nombre" required minlength="3" maxlength="50" placeholder="Ej. Juan Pérez"><br><br>
<!-- CORREO -->
<label for="correo">Correo electrónico:</label><br>
<input type="email" id="correo" name="correo" required placeholder="Ej. correo@ejemplo.com"><br><br>
<!-- TELÉFONO -->
<label for="telefono">Teléfono (9 dígitos):</label><br>
<input type="tel" id="telefono" name="telefono" pattern="[0-9]{9}" required placeholder="Ej. 987654321" title="Debe contener exactamente 9 dígitos"><br><br>
<!-- EDAD -->
<label for="edad">Edad (18 a 99):</label><br>
<input type="number" id="edad" name="edad" min="18" max="99" required><br><br>
<!-- CONTRASEÑA -->
<label for="clave">Contraseña (mínimo 8 caracteres, con letra y número):</label><br>
<input type="password" id="clave" name="clave"
pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}"
title="Debe tener al menos 8 caracteres, una letra y un número"
required><br><br>
<!-- COLOR -->
<label for="color">Color favorito:</label><br>
<input type="color" id="color" name="color"><br><br>
<!-- FECHA DE NACIMIENTO -->
<label for="fecha">Fecha de nacimiento:</label><br>
<input type="date" id="fecha" name="fecha" required><br><br>
<!-- SELECCIÓN DE PAÍS -->
<label for="pais">País:</label><br>
<select id="pais" name="pais" required>
<option value="">-- Selecciona tu país --</option>
<option value="pe">Perú</option>
<option value="mx">México</option>
<option value="ar">Argentina</option>
</select><br><br>
<!-- GÉNERO -->
<p>Género:</p>
<input type="radio" id="masculino" name="genero" value="M" required>
<label for="masculino">Masculino</label>
<input type="radio" id="femenino" name="genero" value="F">
<label for="femenino">Femenino</label><br><br>
<!-- INTERESES -->
<p>Intereses:</p>
<input type="checkbox" id="html" name="intereses" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="intereses" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="intereses" value="js">
<label for="js">JavaScript</label><br><br>
<!-- MENSAJE -->
<label for="mensaje">Mensaje (opcional, máx. 300 caracteres):</label><br>
<textarea id="mensaje" name="mensaje" maxlength="300" placeholder="Escribe algo..."></textarea><br><br>
<!-- ARCHIVO -->
<label for="cv">Sube tu CV (opcional):</label><br>
<input type="file" id="cv" name="cv"><br><br>
<!-- BOTONES -->
<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>
</form>-
Estas validaciones funcionan antes de enviar el formulario, pero no reemplazan la validación del lado del servidor (por seguridad).
-
patternusa expresiones regulares, que son potentes pero pueden ser complejas. Valida bien su sintaxis. -
Si el navegador no soporta un tipo de validación, puede comportarse como un campo de texto común
(aunque todos los navegadores modernos las soportan). -
Usa
placeholdercomo ayuda visual, pero no como reemplazo dellabel.