¡Chuleta rápida de HTML5 con ejemplos
Estructura básica:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>Mi encabezado</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<section>
<h2>Sección principal</h2>
<p>Aquí va el contenido principal de la página.</p>
</section>
<section>
<h2>Otra sección</h2>
<img src="imagen.jpg" alt="Descripción de la imagen">
<p>Más contenido.</p>
</section>
</main>
<aside>
<p>Barra lateral con información adicional.</p>
</aside>
<footer>
<p>© 2024 Mi sitio web</p>
</footer>
</body>
</html>
Explicación:
- Se han incluido ejemplos de contenido dentro de las etiquetas para que tengas una mejor idea de cómo se usan.
- Se ha añadido un enlace en la sección de navegación (
<nav>). - Se ha incluido una imagen en una sección (
<section>).
Etiquetas de sección:
<header>Encabezado de la página.<nav>Menú de navegación.<main>Contenido principal de la página.<section>Secciones de contenido.<article>Artículos independientes.<aside>Contenido lateral.<footer>Pie de página.
Etiquetas de texto:
<h1>a<h6>Títulos de diferentes niveles.<p>Párrafo de texto.<br>Salto de línea.<b>Texto en negrita.<i>Texto en cursiva.<u>Texto subrayado.<mark>Texto resaltado.<del>Texto tachado.<code>Código fuente.<pre>Texto preformateado.
Etiquetas de enlaces:
<a href="URL">Texto del enlace</a>Hipervínculo a otra página o recurso.
Etiquetas de listas:
<ul>Lista no ordenada.<ol>Lista ordenada.<li>Elemento de lista.
Etiquetas de imágenes:
<img src="URL_imagen" alt="Texto alternativo">Insertar una imagen.
Etiquetas de tablas:
<table>Tabla.<tr>Fila de la tabla.<th>Encabezado de columna.<td>Celda de la tabla.
Etiquetas de formularios:
<form action="URL_destino" method="POST/GET">Formulario.<input type="text" id="nombre" name="nombre">Campo de entrada de texto.<label for="nombre">Nombre:</label>Etiqueta para un campo de entrada.<select id="pais" name="pais">Lista desplegable.<option value="ES">España</option>Opción para una lista desplegable.<textarea id="mensaje" name="mensaje"></textarea>Área de texto.<button type="submit">Enviar</button>Botón.
Etiquetas multimedia:
<audio src="URL_audio" controls>Insertar audio.<video src="URL_video" controls>Insertar video.
Recuerda:
- Esta chuleta sigue siendo un resumen básico. HTML5 ofrece muchas más posibilidades.
- Para más información, consulta la documentación oficial: https://dev.w3.org/html5/spec-LC/
- Practica y experimenta para crear tus propias páginas web.
¡Espero que esta chuleta te sea aún más útil y práctica!
Email sent via EmailJS.com
No hay comentarios:
Publicar un comentario