1.
Estructura básica de una página HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
</head>
<body>
<!-- Contenido visible -->
</body>
</html>
Elementos clave:
- <!DOCTYPE html>: Declara HTML5.
- <html>: Raíz del documento.
- <head>: Metadatos (título, codificación, estilos).
- <meta charset="UTF-8">: Soporta caracteres especiales.
- <title>: Título del navegador.
- <body>: Contenido visible (texto, imágenes, enlaces, etc.).
2. Etiquetas semánticas:
- <header>: Encabezado de una sección o página.
- <nav>: Menú de navegación.
- <main>: Contenido principal. Solo debe haber uno por página.
- <section>: Sección temática del contenido.
- <article>: Contenido independiente (blogs, noticias).
- <aside>: Contenido secundario (barras laterales, info adicional).
- <footer>: Pie de página o sección.
Ventajas: Mejoran accesibilidad, SEO y organización del código.
3. Formularios y validaciones básicas:
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo:</label>
<input type="email" id="email" name="email" required>
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" min="1" max="120">
<input type="submit" value="Enviar">
</form>
Validaciones básicas:
- required: Campo obligatorio.
- type="email": Valida formato de correo.
- min, max: Rango numérico.
- pattern: Expresión regular personalizada.
- maxlength: Límite de caracteres.
4. Multimedia (audio, video, imágenes):
Imagen:
<img src="[Link]" alt="Descripción" width="300">
Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio.
</audio>
Video:
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta video.
</video>
Atributos clave:
- controls: Muestra botones de reproducción.
- autoplay: Reproduce al cargar (sin interacción).
- loop: Repite al terminar.
- muted: Comienza sin sonido.
- alt: Texto alternativo para imágenes.
5. Enlaces y navegación:
Enlace básico:
<a href="[Link] al sitio</a>
Enlace interno (misma página):
<a href="#seccion1">Ir a Sección 1</a>
...
<h2 id="seccion1">Sección 1</h2>
Abrir en nueva pestaña:
<a href="[Link] target="_blank">Abrir en nueva pestaña</a>
Menú de navegación:
<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]">Servicios</a></li>
<li><a href="[Link]">Contacto</a></li>
</ul>
</nav>
Atributos clave:
- href: Dirección del enlace.
- target="_blank": Abre en nueva pestaña.
- id: Punto de anclaje para navegación interna.
6. Tablas:
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>28</td>
</tr>
<tr>
<td>Luis</td>
<td>35</td>
</tr>
</tbody>
</table>
Etiquetas clave:
- <table>: Crea la tabla.
- <thead>: Encabezado de la tabla.
- <tbody>: Cuerpo de la tabla.
- <tr>: Fila.
- <th>: Celda de encabezado.
- <td>: Celda normal.
Extras útiles:
- colspan: Une columnas.
- rowspan: Une filas.
7. Listas (ordenadas y desordenadas):
Lista desordenada:
<ul>
<li>Manzana</li>
<li>Banano</li>
<li>Uva</li>
</ul>
Lista ordenada:
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
<li>Tercer paso</li>
</ol>
Etiquetas clave:
- <ul>: Lista desordenada (con viñetas).
- <ol>: Lista ordenada (números).
- <li>: Elemento de la lista.
8. Inputs y tipos de inputs:
<input type="text"> <!-- Texto -->
<input type="email"> <!-- Correo electrónico -->
<input type="password"> <!-- Contraseña -->
<input type="number"> <!-- Números -->
<input type="date"> <!-- Fecha -->
<input type="checkbox"> <!-- Casilla de verificación -->
<input type="radio"> <!-- Botón de opción -->
<input type="file"> <!-- Subir archivo -->
<input type="range"> <!-- Selector de rango -->
<input type="color"> <!-- Selector de color -->
<input type="submit"> <!-- Botón enviar -->
<input type="reset"> <!-- Botón reset -->
<input type="button"> <!-- Botón personalizado -->
Atributos útiles:
- name, value, placeholder, required, disabled, readonly, checked (para checkbox o radio).
9. Atributos globales (id, class, style, data-*):
- id: Identificador único.
<div id="seccion1"></div>
- class: Define una o más clases CSS.
<p class="destacado"></p>
- style: Estilo en línea (CSS directo).
<h1 style="color: red;"></h1>
- data-*: Atributos personalizados para guardar datos.
<div data-user="admin"></div>
Uso típico: facilitar selección con CSS/JS y agregar información adicional.
10. Accesibilidad básica (etiquetas ARIA):
Atributos ARIA más comunes:
- role: Define el tipo de elemento para lectores de pantalla.
<div role="button">Haz clic aquí</div>
- aria-label: Proporciona una etiqueta accesible para elementos sin texto visible.
<button aria-label="Cerrar">X</button>
- aria-hidden: Indica que un elemento debe ser ignorado por lectores de pantalla.
<div aria-hidden="true">Contenido invisible</div>
- aria-live: Especifica la actualización de contenido dinámico.
<div aria-live="polite">Mensaje de actualización</div>
- aria-expanded: Indica si un elemento (como un menú) está expandido o colapsado.
<button aria-expanded="false">Abrir menú</button>
Beneficios: Mejora la experiencia de usuarios con discapacidades visuales o auditivas, facilitando la
navegación.
