Guía Completa de HTML5
1. Estructura Básica de un Documento HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página HTML</title>
</head>
<body>
<h1>Hola mundo</h1>
<p>Esta es mi primera página web</p>
</body>
</html>
2. Etiquetas de Texto
Las etiquetas de texto permiten estructurar y dar formato al contenido textual de
una página. Se utilizan para establecer jerarquías de títulos, enfatizar palabras,
mostrar citas, entre otros.
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Párrafo de texto</p>
<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>
<mark>Texto resaltado</mark>
<small>Texto pequeño</small>
<blockquote>Cita en bloque</blockquote>
3. Hipervínculos
<a href="https://www.ejemplo.com" target="_blank">Ir a Ejemplo</a>
Atributos comunes:
• href: destino del enlace.
• target: si se abre en la misma ventana (_self) o nueva (_blank).
4. Imágenes
<img src="imagen.jpg" alt="Descripción de la imagen" width="300">
Atributos comunes:
• src: ruta de la imagen.
• alt: texto alternativo para accesibilidad.
• width y height: dimensiones.
5. Listas
Lista no ordenada:
<ul>
<li>Manzana</li>
<li>Banana</li>
</ul>
Lista ordenada:
<ol>
<li>Inicio</li>
<li>Desarrollo</li>
<li>Conclusión</li>
</ol>
Lista de definición:
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado utilizado para crear páginas web</dd>
<dt>CSS</dt>
<dd>Lenguaje para definir el estilo de los documentos HTML</dd>
</dl>
6. Tablas
Tabla Simple:
<table border="1">
<tr><th>Nombre</th><th>Edad</th></tr>
<tr><td>Juan</td><td>25</td></tr>
</table>
Tabla Avanzada:
<table border="1">
<thead>
<tr><th>Producto</th><th>Precio</th></tr>
</thead>
<tbody>
<tr><td>Libro</td><td>$10</td></tr>
<tr><td>Lápiz</td><td>$2</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>$12</td></tr>
</tfoot>
</table>
Atributos comunes:
• border: grosor del borde.
• colspan y rowspan: fusionar columnas o filas.
7. Formularios Básicos
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<input type="submit" value="Enviar">
</form>
8. Formularios Avanzados
Los formularios permiten a los usuarios introducir y enviar datos.
Atributos comunes en formularios:
• action: URL donde se enviarán los datos.
• method: método de envío (get o post).
• type: tipo de entrada (text, email, number, etc.).
• name: nombre del campo, necesario para el envío.
• id: identificador único que asocia la etiqueta <label> con el campo.
• required: hace obligatorio el campo.
• min, max: valores mínimos o máximos para entradas numéricas.
<form>
<fieldset>
<legend>Registro</legend>
<label for="email">Correo:</label>
<input type="email" id="email" name="email" required><br>
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" min="18"><br>
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="ec">Ecuador</option>
<option value="co">Colombia</option>
</select><br>
<label>Género:</label>
<input type="radio" name="genero" value="M"> Masculino
<input type="radio" name="genero" value="F"> Femenino<br>
<label>Aficiones:</label>
<input type="checkbox" name="deporte"> Deporte
<input type="checkbox" name="lectura"> Lectura<br>
<textarea name="comentarios" rows="4" cols="30">Escribe aquí...
</textarea><br>
<input type="submit" value="Registrar">
</fieldset>
</form>
9. Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio.
</audio>
10. Video
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta video.
</video>
11. Elementos Semánticos
<header>Encabezado principal</header>
<nav>Barra de navegación</nav>
<main>Contenido principal</main>
<article>Artículo individual</article>
<aside>Contenido relacionado</aside>
<footer>Pie de página</footer>
<section>Sección temática</section>
Descripción:
• <header>: Cabecera o logo del sitio.
• <nav>: Navegación o menú.
• <main>: Contenido central de la página.
• <section>: Agrupación de contenido relacionado.
• <article>: Contenido independiente (blogs, noticias).
• <aside>: Información secundaria o complementaria.
• <footer>: Pie de página con datos de contacto o derechos.
12. Buenas Prácticas en HTML5
• Usa etiquetas semánticas.
• Indenta y organiza el código.
• Siempre usa atributos alt en imágenes.
• Valida formularios usando required, type, etc.
• Usa comentarios para documentar tu código.
• Evita poner estilos directamente en las etiquetas; utiliza CSS.
¡Esta guía te proporciona una base sólida para empezar a crear páginas web modernas!
