Las Etiquetas HTML Esenciales que Todo Principiante Debe Conocer
Mike Codeur
¿Estás comenzando con HTML y quieres dominar los conceptos básicos rápidamente?
¡No te preocupes! En este artículo, descubre las etiquetas HTML esenciales para estructurar una página web. Con estos elementos fundamentales, podrás crear sitios web simples y funcionales en un abrir y cerrar de ojos.
¿Qué es una etiqueta HTML?
Una etiqueta HTML es un elemento utilizado para estructurar y organizar el contenido de una página web. Las etiquetas funcionan en pareja: una etiqueta de apertura y una etiqueta de cierre, como esta:
<p>Este es un párrafo.</p>Algunas etiquetas, como las utilizadas para insertar una imagen, son "autocontenidas":
<img src="image.jpg" alt="Una imagen">Etiquetas esenciales para principiantes
1. <html>: La raíz del documento
Todo documento HTML comienza y termina con esta etiqueta. Envuelve todo el contenido de la página.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<!-- Contenido aquí -->
</html>2. <head>: Información de la página
El <head> contiene metadatos, como el título de la página, los estilos o los scripts.
Ejemplo:
<head>
<meta charset="UTF-8">
<title>Mi primer sitio web</title>
</head>3. <body>: Contenido visible
Todo lo que el usuario ve en la página debe estar dentro de esta etiqueta.
Ejemplo:
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un texto visible para el usuario.</p>
</body>4. <h1> a <h6>: Encabezados
Estas etiquetas definen los encabezados, desde el más importante (<h1>) hasta el menos importante (<h6>).
Ejemplo:
<h1>Título principal</h1>
<h2>Subtítulo</h2>5. <p>: Párrafos
Usa esta etiqueta para agregar bloques de texto.
Ejemplo:
<p>Este es un párrafo que contiene texto.</p>6. <a>: Enlaces
Los enlaces permiten redirigir al usuario a otra página o sitio web.
Ejemplo:
<a href="https://www.google.com" target="_blank">Visita Google</a>**7. `<img>`: Imágenes**Para insertar una imagen, utiliza la etiqueta <img>. Requiere dos atributos: src (fuente de la imagen) y alt (descripción de la imagen).
Ejemplo:
<img src="image.jpg" alt="Descripción de la imagen">8. <ul> y <ol>: Listas
<ul>: Lista no ordenada (con viñetas).<ol>: Lista ordenada (con números).
Ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<ol>
<li>Primero</li>
<li>Segundo</li>
</ol>9. <table>: Tablas
Para mostrar datos de manera tabular.
Ejemplo:
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
</tr>
</table>10. <div> y <span>: Estructura
<div>: Usado para agrupar bloques de elementos.<span>: Usado para estilizar texto en línea.
Ejemplo:
<div>
<p>Este es un bloque de contenido.</p>
</div>
<span style="color: red;">Texto en rojo</span>Ejemplo práctico: Crea una mini página HTML
Combina todas estas etiquetas para crear una página funcional:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página de demostración</title>
</head>
<body>
<h1>Bienvenido a mi página</h1>
<p>Este es un párrafo.</p>
<a href="https://www.example.com">Enlace a un sitio</a>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo">
</body>
</html>Conclusión
Las etiquetas HTML presentadas aquí forman la base de cualquier sitio web. Una vez que las domines, tendrás todo lo necesario para comenzar a estructurar tus páginas. ¡Entonces, ¿qué esperas? ¡Lánzate ahora y explora el emocionante mundo del desarrollo web! 🚀