HTML5
GUÍA DE REFERENCIA RÁPIDA
Referencia práctica de las etiquetas más
usadas Para consulta rápida y fácil
HTML5 · Guía de Página 1 de
Referencia 14
ÍNDICE
1. Estructura Básica del HTML
2. Head - Meta Tags
3. Textos y Títulos
4. Enlaces
5. Imágenes
6. Listas
7. Tablas
8. Formularios
9. Tipos de Input
10. Videos y Audio
11. Divs y Estructura
HTML5 · Guía de Página 2 de
Referencia 14
1. ESTRUCTURA BÁSICA DEL HTML
Todo documento HTML debe tener esta estructura:
<!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>
<!-- Aquí va todo el contenido visible -->
</body>
</html>
<!DOCTYPE html> - Siempre va en la primera línea
<html lang='es'> - Indica el idioma (es=español, en=inglés)
<head> - Información no visible (configuración)
<body> - Todo el contenido visible de la página
HTML5 · Guía de Página 3 de
Referencia 14
2. HEAD - META TAGS
Lo que siempre va dentro del <head>:
<head>
<!-- Obligatorio - Codificación de caracteres -->
<meta charset="UTF-8">
<!-- Obligatorio - Para móviles (responsive) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Título que aparece en la pestaña -->
<title>Mi Sitio Web</title>
<!-- Descripción para Google -->
<meta name="description" content="Descripción de mi sitio">
<!-- Ícono de la pestaña (favicon) -->
<link rel="icon" href="[Link]">
<!-- Enlace a CSS -->
<link rel="stylesheet" href="[Link]">
</head>
HTML5 · Guía de Página 4 de
Referencia 14
3. TEXTOS Y TÍTULOS
Títulos (de más importante a menos importante):
<h1>Título Principal</h1> <!-- Solo uno por página -->
<h2>Título Secundario</h2>
<h3>Subtítulo</h3>
<h4>Título Pequeño</h4>
<h5>Título Más Pequeño</h5>
<h6>Título Muy Pequeño</h6>
Párrafos y formato de texto:
<p>Esto es un párrafo normal.</p>
<strong>Texto en negrita</strong>
<b>También negrita</b>
<em>Texto en cursiva</em>
<i>También cursiva</i>
<u>Texto subrayado</u>
<br> <!-- Salto de línea -->
<hr> <!-- Línea horizontal separadora -->
HTML5 · Guía de Página 5 de
Referencia 14
4. ENLACES
Cómo crear enlaces:
<!-- Enlace a otra página -->
<a href="[Link]">Ir a otra página</a>
<!-- Enlace a otro sitio web -->
<a href="[Link] a Google</a>
<!-- Enlace que abre en nueva pestaña -->
<a href="[Link] target="_blank">Abrir en nueva pestaña</a>
<!-- Enlace de email -->
<a href="[Link] email</a>
<!-- Enlace de teléfono -->
<a href="[Link]
<!-- Enlace a una sección de la misma página -->
<a href="#seccion">Ir a sección</a>
<div id="seccion">Esta es la sección</div>
Importante: Para enlaces externos, usa target='_blank' para abrir en nueva pestaña
HTML5 · Guía de Página 6 de
Referencia 14
5. IMÁGENES
Cómo insertar imágenes:
<!-- Imagen básica -->
<img src="[Link]" alt="Descripción de la imagen">
<!-- Imagen con tamaño específico -->
<img src="[Link]" alt="Foto" width="500" height="300">
<!-- Imagen que es un enlace -->
<a href="[Link]">
<img src="[Link]" alt="Descripción">
</a>
Atributos importantes:
Atributo Descripción Ejemplo
src Ruta de la imagen src="[Link]"
alt Texto alternativo (obligatorio) alt="Logo de la empresa"
width Ancho en píxeles width="500"
height Alto en píxeles height="300"
Consejo: Siempre usa el atributo 'alt' para describir la imagen
HTML5 · Guía de Página 7 de
Referencia 14
6. LISTAS
Lista con viñetas (desordenada):
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
Lista numerada (ordenada):
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
<li>Tercer paso</li>
</ol>
Listas anidadas (una dentro de otra):
<ul>
<li>Frutas
<ul>
<li>Manzana</li>
<li>Naranja</li>
</ul>
</li>
<li>Verduras</li>
</ul>
HTML5 · Guía de Página 8 de
Referencia 14
7. TABLAS
Tabla básica:
<table>
<tr> <!-- Fila 1 (encabezados) -->
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr> <!-- Fila 2 -->
<td>Juan</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr> <!-- Fila 3 -->
<td>María</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</table>
Elementos de una tabla:
Etiqueta Descripción
<table> Inicia la tabla
<tr> Fila de la tabla
<th> Celda de encabezado (negrita y centrada)
<td> Celda normal con datos
HTML5 · Guía de Página 9 de
Referencia 14
8. FORMULARIOS
Formulario básico:
<form action="[Link]" method="post">
<!-- Campo de texto -->
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<!-- Campo de email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Área de texto grande -->
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="5"></textarea>
<!-- Botón de envío -->
<button type="submit">Enviar</button>
</form>
Otros elementos de formulario:
<!-- Lista desplegable -->
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="es">España</option>
<option value="mx">México</option>
<option value="ar">Argentina</option>
</select>
<!-- Checkbox (casilla de verificación) -->
<input type="checkbox" id="acepto" name="acepto">
<label for="acepto">Acepto los términos</label>
<!-- Radio buttons (opción única) -->
<input type="radio" id="hombre" name="genero" value="hombre">
<label for="hombre">Hombre</label>
<input type="radio" id="mujer" name="genero" value="mujer">
<label for="mujer">Mujer</label>
HTML5 · Guía de Página 10 de
Referencia 14
9. TIPOS DE INPUT
Los tipos de input más comunes:
Tipo Uso Ejemplo
text Texto normal <input type="text">
password Contraseña (oculta) <input type="password">
email Email <input type="email">
number Números <input type="number">
tel Teléfono <input type="tel">
date Fecha <input type="date">
color Selector de color <input type="color">
file Subir archivo <input type="file">
checkbox Casilla de verificación <input type="checkbox">
radio Opción única <input type="radio">
submit Botón de envío <input type="submit">
Atributos útiles para inputs:
Atributo Descripción Ejemplo
name Nombre del campo name="email"
placeholder Texto de ayuda placeholder="tu@[Link]"
required Campo obligatorio required
disabled Campo deshabilitado disabled
readonly Solo lectura readonly
maxlength Caracteres máximos maxlength="100"
HTML5 · Guía de Página 11 de
Referencia 14
10. VIDEOS Y AUDIO
Insertar video:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta video.
</video>
Atributos del video:
Atributo Descripción
controls Muestra los controles (play, pausa, volumen)
autoplay Reproduce automáticamente
loop Repite el video infinitamente
muted Sin sonido
poster Imagen que se muestra antes de reproducir
Insertar audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio.
</audio>
HTML5 · Guía de Página 12 de
Referencia 14
11. DIVS Y ESTRUCTURA
Contenedores y secciones:
<!-- Div genérico (contenedor) -->
<div class="contenedor">
Contenido aquí
</div>
<!-- Estructura semántica moderna -->
<header>
<!-- Cabecera del sitio -->
<h1>Mi Sitio Web</h1>
<nav>
<!-- Menú de navegación -->
</nav>
</header>
<main>
<!-- Contenido principal -->
<article>
<h2>Artículo</h2>
<p>Texto del artículo...</p>
</article>
<aside>
<!-- Barra lateral -->
</aside>
</main>
<footer>
<!-- Pie de página -->
<p>© 2024 Mi Sitio</p>
</footer>
Etiquetas de estructura:
Etiqueta Uso
<div> Contenedor genérico (el más usado)
<span> Contenedor en línea (para texto)
<header> Cabecera de la página
<nav> Menú de navegación
<main> Contenido principal (solo uno por página)
<article> Artículo o entrada de blog
<section> Sección de contenido
<aside> Contenido lateral/secundario
<footer> Pie de página
HTML5 · Guía de Página 13 de
Referencia 14
CONSEJOS FINALES
Buenas prácticas:
✓ Siempre cierra las etiquetas que abriste
✓ Usa nombres descriptivos en id y class
✓ Indenta (sangría) tu código para que sea más legible
✓ Siempre usa comillas en los atributos
✓ Pon el atributo 'alt' en todas las imágenes
✓ Un solo <h1> por página
✓ Usa <label> para todos los inputs de formulario
Atributos universales (se pueden usar en casi cualquier etiqueta):
Atributo Descripción Ejemplo
id Identificador único id="menu"
class Clase CSS class="destacado"
style Estilos CSS directos style="color: red;"
title Texto al pasar el mouse title="Ver más"
Caracteres especiales comunes:
Caracter Código Uso
< &lt; Menor que
> &gt; Mayor que
& &amp; Ampersand
© &copy; Copyright
Espacio &nbsp; Espacio que no se rompe
FIN DE LA GUÍA
Guía rápida de referencia HTML5
Para consulta fácil y práctica
HTML5 · Guía de Página 14 de
Referencia 14