Conoce las principales etiquetas de HTML para la creación de páginas web.
Define el inicio de un documento HTML.
<html>Contiene los metadatos y la información necesaria para configurar la página.
<head>Define el título de la página que aparece en la pestaña del navegador.
<title>Contiene el contenido visible de la página web.
<body>Define un enlace (hipervínculo) hacia otra página.
<a href="url">Enlace</a>Define una lista no ordenada, y cada ítem dentro de esa lista.
<ul><li>Elemento 1</li><li>Elemento 2</li></ul>Define una imagen en la página.
<img src="imagen.jpg" alt="Descripción de la imagen">Define el pie de página del documento.
<footer>Para crear un bloque de contenido que pueda expandirse o colapsarse.
<details>
<summary>Más información</summary>
<p>Aquí tienes más detalles sobre el tema.</p>
</details>Resalta el texto que es relevante o que coincide con una búsqueda.
<p>Encontré un <mark>error</mark> en el sistema.</p>Representa valores numéricos dentro de un rango conocido.
<meter value="60" min="0" max="100">60%</meter>Para mostrar el progreso de una tarea en curso.
<progress value="70" max="100">70%</progress>Proporciona una forma flexible de mostrar imágenes en diferentes tamaños o formatos dependiendo de las condiciones.
<picture>
<source srcset="imagen-grande.jpg" media="(min-width: 600px)">
<source srcset="imagen-pequena.jpg" media="(max-width: 599px)">
<img src="imagen-default.jpg" alt="Una imagen adaptable">
</picture>Para mostrar el resultado de una acción del usuario.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">+
<input type="number" id="b" value="50">
=<output name="result">100</output>
</form>Para mostrar anotaciones fonéticas, especialmente en idiomas como japonés o árabe.
<ruby>
漢<rp>(</rp><rt>kan</rt><rp>)</rp>
字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>Se utiliza para agrupar contenido relacionado y estructurar la página en secciones.
<section>
<h2>Título de la sección</h2>
<p>Contenido de la sección.</p>
</section>Representa un contenido autónomo e independiente dentro del documento, como una noticia o una publicación de blog.
<article>
<h2>Título del artículo</h2>
<p>Contenido del artículo.</p>
</article>Se utiliza para definir una sección de navegación, por ejemplo, un menú de enlaces.
<nav>
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>Define un encabezado para una sección o página, generalmente con el título o el logo.
<header>
<h1>Mi página web</h1>
<p>Bienvenido a nuestra página de inicio</p>
</header>Define el pie de página, generalmente con información de copyright o enlaces relacionados.
<footer>
<p>© 2025 Mi Página Web</p>
</footer>Se utilizan para asociar una imagen o gráfico con una leyenda.
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Descripción de la imagen</figcaption>
</figure>Se usa para crear formularios interactivos, como para enviar datos al servidor.
<form action="/submit" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<button type="submit">Enviar</button>
</form>Define un campo de entrada interactivo, como una caja de texto o un botón.
<input type="text" placeholder="Escribe tu nombre">Estas etiquetas se utilizan para crear tablas en HTML.
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>Se utiliza para definir una cita larga o una sección de texto tomada de otro documento.
<blockquote>
<p>"El único modo de hacer un gran trabajo es amar lo que haces." - Steve Jobs</p>
</blockquote>Se usa para incrustar otro documento HTML dentro del documento actual, como un mapa o un video.
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>Se usa para incluir contenido de audio.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Tu navegador no soporta el elemento de audio.
</audio>Se usa para incluir contenido de video.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>Permite renderizar gráficos dinámicos y otras imágenes visuales con JavaScript.
<canvas id="myCanvas" width="200" height="200"></canvas>Se utilizan para resaltar texto, donde <b> indica negrita sin importar el contexto, y <strong> indica énfasis semántico.
<p>Esto es <b>negrita</b> y esto es <strong>fuerte</strong>.</p>Se usan para mostrar texto en cursiva, donde <i> simplemente estiliza, y <em> da énfasis semántico.
<p>Esto es <i>cursiva</i> y esto es <em>énfasis</em>.</p>