Ejemplos de etiquetas HTML: Guía práctica con código y explicación

Índice

1. Ejemplos de etiquetas de estructura y jerarquía de texto
2. Ejemplos de enlaces e imágenes multimedia
3. Ejemplos de listas (Ordenadas y No Ordenadas)
4. Ejemplo de tablas de datos estructuradas
5. Ejemplo de formulario interactivo de captura
6. Ejemplo de estructura semántica completa (HTML5)

En el desarrollo web moderno, comprender la teoría del lenguaje de marcado resulta mucho más sencillo cuando se observa el código en funcionamiento. Las etiquetas HTML son las directivas que indican al navegador cómo debe interpretar y renderizar cada componente visual o estructural de una página.

A continuación, se presentan ejemplos prácticos, categorizados y listos para usar, que abarcan desde el formateo de texto elemental hasta la construcción de formularios e integraciones multimedia en HTML5.

1. Ejemplos de etiquetas de estructura y jerarquía de texto

Estas etiquetas definen la organización y relevancia semántica del contenido textual:

<h1>Título Principal de la Página</h1>
<h2>Subtítulo de Sección</h2>
<h3>Subtema Específico</h3>

<p>Este es un párrafo de texto normal que explica un concepto técnico.</p>
<p>Podemos resaltar términos en <strong>negrita semántica</strong> o en <em>cursiva enfática</em>.</p>
<p>Para saltar de línea sin abrir otro párrafo usamos la etiqueta <br>.</p>

<h1> a <h6>: Indican la jerarquía del contenido tanto al usuario como a los motores de búsqueda (SEO).
<p>: Delimita bloques de texto independientes.
<strong> y <em>: Añaden relevancia y énfasis tonal al contenido.

2. Ejemplos de enlaces e imágenes multimedia

Son los elementos encargados de interconectar la web e insertar contenido visual:

<a href="https://ejemplo.com" target="_blank" rel="noopener noreferrer">Visitar Ejemplo.com</a>

<a href="#contacto">Ir al formulario de contacto</a>

<img src="ruta/a/la/imagen.jpg" alt="Ilustración de un servidor en la nube" width="600" height="400">

<a>: Utiliza el atributo href para definir la URL o ancla de destino.
<img>: Etiqueta vacía (autocontenida) que requiere src (origen del archivo) y alt (descripción accesible).

3. Ejemplos de listas (Ordenadas y No Ordenadas)

Permiten catalogar datos o características de forma limpia:

<ul>
<li>HTML5 (Estructura)</li>
<li>CSS3 (Diseño visual)</li>
<li>JavaScript (Lógica interactiva)</li>
</ul>

<ol>
<li>Descargar un editor de código</li>
<li>Crear el archivo index.html</li>
<li>Abrir el documento en el navegador</li>
</ol>

4. Ejemplo de tablas de datos estructuradas

Las tablas permiten organizar comparativas numéricas o descriptivas mediante filas y columnas:

<table border="1">

<thead>

<tr>

<th>Tecnología</th>

<th>Tipo</th>

<th>Función Principal</th>

</tr>

</thead>

<tbody>

<tr>

<td>HTML</td>

<td>Marcado</td>

<td>Estructurar contenidos</td>

</tr>

<tr>

<td>CSS</td>

<td>Estilos</td>

<td>Diseño y apariencia</td>

</tr>

</tbody>

</table>

<table>: Contenedor maestro de la tabla.
<thead> y <tbody>: Separan el encabezado del cuerpo de datos.
<tr>: Define una fila (table row).
<th> y <td>: Representan celdas de encabezado (table header) y celdas de datos (table data).

5. Ejemplo de formulario interactivo de captura

Los formularios facilitan la recopilación de datos de contacto o registro de usuarios:

<form action="/enviar-datos" method="POST">

<label for="nombre">Nombre completo:</label>
<input type="text" id="nombre" name="nombre_usuario" placeholder="Ej. Juan Pérez" required>

<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="email_usuario" placeholder="usuario@correo.com" required>

<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje_usuario" rows="4" placeholder="Escribe tu consulta aquí..."></textarea>

<button type="submit">Enviar Formulario</button>
</form>

6. Ejemplo de estructura semántica completa (HTML5)

La combinación de estas etiquetas da vida a un documento web moderno y optimizado para motores de búsqueda:

<header>
<nav>
<a href="#inicio">Inicio</a> | <a href="#articulos">Artículos</a>
</nav>
</header>

<main>
<article id="articulos">
<h2>Guía de Marcado Web</h2>
<p>Aprender la sintaxis de las etiquetas es el primer paso en frontend.</p>
</article>

<aside>
<h3>Temas Relacionados</h3>
<ul>
<li><a href="#">Introducción a CSS</a></li>
</ul>
</aside>
</main>

¿Cuál de estos ejemplos de etiquetas utilizas con mayor frecuencia o cuál te gustaría profundizar con atributos avanzados? Comparte tus inquietudes en la sección de comentarios y participa en la conversación de nuestra comunidad.