Mi Sitio Web

Bienvenido a Mi Sitio Web

¿Quieres Aprender las diferentes etiquetas del lenguaje HTML?

Guía de Etiquetas HTML

A continuación encontrarás una referencia completa de las etiquetas HTML más utilizadas, organizadas por categorías.

Índice de Contenidos

Estructura Básica

Etiqueta Descripción Ejemplo
<!DOCTYPE> Define el tipo de documento HTML <!DOCTYPE html>
<html> Elemento raíz de una página HTML <html>...</html>
<head> Contiene metadatos/información para el documento <head>...</head>
<title> Define el título del documento <title>Mi Página Web</title>
<body> Define el cuerpo del documento <body>...</body>

Encabezados y Texto

Etiqueta Descripción Ejemplo
<h1> a <h6> Define encabezados (h1 es el más importante) <h1>Título Principal</h1>
<p> Define un párrafo <p>Este es un párrafo de texto.</p>
<br> Inserta un salto de línea Línea 1<br>Línea 2
<hr> Crea una línea horizontal <hr>
<pre> Texto preformateado (respeta espacios y saltos) <pre> Texto con formato </pre>

Formato de Texto

Etiqueta Descripción Ejemplo
<strong> Define texto importante (negrita) <strong>Texto importante</strong>
<em> Define texto enfatizado (cursiva) <em>Texto enfatizado</em>
<mark> Define texto resaltado <mark>Texto resaltado</mark>
<del> Define texto tachado <del>Texto eliminado</del>
<ins> Define texto insertado <ins>Texto insertado</ins>
<sub> Define texto subíndice H<sub>2</sub>O
<sup> Define texto superíndice x<sup>2</sup>
<code> Define código de computadora <code>var x = 5;</code>

Enlaces e Imágenes

Etiqueta Descripción Ejemplo
<a> Define un hipervínculo <a href="https://ejemplo.com">Enlace</a>
<img> Define una imagen <img src="imagen.jpg" alt="Descripción">
<figure> Agrupa contenido multimedia <figure><img src="img.jpg"><figcaption>Título</figcaption></figure>
<figcaption> Define un título para la figura Ver ejemplo anterior

Listas

Etiqueta Descripción Ejemplo
<ul> Define una lista desordenada <ul><li>Item 1</li><li>Item 2</li></ul>
<ol> Define una lista ordenada <ol><li>Primero</li><li>Segundo</li></ol>
<li> Define un elemento de la lista Ver ejemplos anteriores
<dl> Define una lista de definición <dl><dt>Término</dt><dd>Definición</dd></dl>
<dt> Define un término en lista de definición Ver ejemplo anterior
<dd> Define la descripción del término Ver ejemplo anterior

Tablas

Etiqueta Descripción Ejemplo
<table> Define una tabla <table>...</table>
<tr> Define una fila en la tabla <tr>...</tr>
<th> Define una celda de encabezado <th>Encabezado</th>
<td> Define una celda de datos <td>Datos</td>
<caption> Define el título de la tabla <caption>Título de tabla</caption>
<thead> Agrupa el contenido del encabezado <thead><tr><th>Nombre</th></tr></thead>
<tbody> Agrupa el contenido del cuerpo <tbody><tr><td>Juan</td></tr></tbody>
<tfoot> Agrupa el contenido del pie <tfoot><tr><td>Total</td></tr></tfoot>

Formularios

Etiqueta Descripción Ejemplo
<form> Define un formulario <form action="/enviar" method="post">...</form>
<input> Define un campo de entrada <input type="text" name="nombre">
<textarea> Define un área de texto <textarea rows="4" cols="50">...</textarea>
<label> Define una etiqueta para un elemento <label for="nombre">Nombre:</label>
<select> Define una lista desplegable <select><option>Opción 1</option></select>
<option> Define una opción en la lista Ver ejemplo anterior
<button> Define un botón <button type="submit">Enviar</button>
<fieldset> Agrupa elementos del formulario <fieldset><legend>Datos</legend>...</fieldset>
<legend> Define un título para el fieldset Ver ejemplo anterior

División y Semántica

Etiqueta Descripción Ejemplo
<div> Define una división/sección (bloque) <div class="contenedor">...</div>
<span> Define una sección (en línea) <p>Texto con <span style="color:red">color</span>.</p>
<header> Define un encabezado para el documento <header>...</header>
<nav> Define una sección de navegación <nav><a href="/">Inicio</a></nav>
<main> Define el contenido principal <main>...</main>
<section> Define una sección en un documento <section>...</section>
<article> Define un artículo independiente <article>...</article>
<aside> Define contenido relacionado indirectamente <aside>...</aside>
<footer> Define un pie de página <footer>...</footer>

Multimedia

Etiqueta Descripción Ejemplo
<audio> Define contenido de audio <audio src="audio.mp3" controls></audio>
<video> Define contenido de video <video src="video.mp4" controls></video>
<source> Define recursos para media <video><source src="video.mp4" type="video/mp4"></video>
<track> Define texto de pista para media <video><track src="subtitles.vtt" kind="subtitles"></video>
<iframe> Define un marco en línea <iframe src="https://ejemplo.com"></iframe>
<canvas> Define gráficos dibujables <canvas id="miCanvas" width="200" height="100"></canvas>

Meta Información

Etiqueta Descripción Ejemplo
<meta> Define metadatos <meta charset="UTF-8">
<link> Define relación con recurso externo <link rel="stylesheet" href="styles.css">
<style> Define información de estilo <style>body {background-color: lightblue;}</style>
<script> Define un script de cliente <script src="script.js"></script>
<noscript> Define contenido alternativo sin script <noscript>JavaScript desactivado</noscript>

Ejemplo de Página Completa


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primera Página</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Sitio</h1>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#acerca">Acerca de</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="inicio">
            <h2>Inicio</h2>
            <p>Bienvenido a mi primera página web creada con HTML.</p>
            <img src="imagen.jpg" alt="Imagen de bienvenida">
        </section>
        
        <section id="acerca">
            <h2>Acerca de</h2>
            <p>Esta página es un ejemplo para aprender HTML.</p>
        </section>
        
        <section id="contacto">
            <h2>Contacto</h2>
            <form action="/enviar" method="post">
                <div>
                    <label for="nombre">Nombre:</label>
                    <input type="text" id="nombre" name="nombre" required>
                </div>
                <div>
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div>
                    <label for="mensaje">Mensaje:</label>
                    <textarea id="mensaje" name="mensaje" rows="4" required></textarea>
                </div>
                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 Mi Sitio Web. Todos los derechos reservados.</p>
    </footer>
</body>
</html>