Html 5 – Capítulo 02 – Etiquetas de encabezados y enlaces
2 minutos de lectura
HTML5 es la base de la web moderna, permitiendo la estructuración y presentación de contenidos en línea. Las etiquetas son fundamentales para definir los elementos de una página web. En este manual, exploraremos etiquetas de texto esenciales como <h1>
, <p>
, <a>
, <strong>
y <em>
. Además, reforzaremos estos conceptos con ejercicios resueltos para una comprensión práctica.
Etiqueta <h1>
– Encabezados
Los encabezados se utilizan para estructurar el contenido de una página y proporcionar jerarquía visual.
<h1>Este es un encabezado de nivel 1</h1>
- Los encabezados van desde
<h1>
(más importante) hasta<h6>
(menos importante). - Se utiliza para títulos, subtítulos y secciones destacadas.
Etiqueta <p>
– Párrafos
La etiqueta <p>
se utiliza para crear párrafos de texto.
<p>Este es un párrafo de ejemplo.</p>
- Se utiliza para separar y estructurar el contenido en bloques de texto.
- Ayuda a mejorar la legibilidad y organización del contenido.
Etiqueta <a>
– Enlaces
La etiqueta <a>
se utiliza para crear enlaces a otras páginas o recursos en línea.
<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>
href
define la URL a la que enlaza el elemento.- Puede usarse para enlazar a otras páginas, archivos, correos electrónicos, etc.
Etiqueta <strong>
– Texto Fuerte
La etiqueta <strong>
se utiliza para resaltar texto importante y hacerlo visualmente más fuerte.
<p>Este es un <strong>texto importante</strong> en un párrafo.</p>
- Se utiliza para enfatizar el significado y la importancia del texto.
- Por defecto, el texto fuerte suele mostrarse en negrita.
Etiqueta <em>
– Énfasis
La etiqueta <em>
se utiliza para aplicar énfasis o énfasis leve a un texto.
<p>Este es un <em>texto enfatizado</em> en un párrafo.</p>
- Similar al
<strong>
, pero con un énfasis más sutil. - Por defecto, el texto enfatizado suele mostrarse en cursiva.
Ejercicios Resueltos
Ejercicio 1: Crear una Página de Introducción
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Página de Introducción</title>
</head>
<body>
<h1>Bienvenidos a mi sitio web</h1>
<p>Este es un espacio para explorar diversos temas.</p>
<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>
<p>Recuerda que <strong>aprender es divertido</strong>.</p>
</body>
</html>
Ejercicio 2: Cita Enlazada
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cita Enlazada</title>
</head>
<body>
<p>La <em>sabiduría</em> es el camino hacia el éxito.</p>
<p>Leer más en <a href="https://www.citas.com">Citas Inspiradoras</a>.</p>
</body>
</html>
Conclusión
Las etiquetas de texto en HTML5 permiten definir la estructura y el significado del contenido. Mediante la comprensión de etiquetas como <h1>
, <p>
, <a>
, <strong>
y <em>
, puedes comunicar información de manera efectiva en tus páginas web. Los ejercicios resueltos te han proporcionado experiencia práctica en la aplicación de estas etiquetas.