Si estás comenzando en el mundo del desarrollo web, entender las etiquetas HTML es el primer paso fundamental. HTML (HyperText Markup Language) es el lenguaje base de todas las páginas web y conocer sus etiquetas esenciales te permitirá estructurar correctamente el contenido. En este artículo, te explicaremos las etiquetas HTML5 más importantes, cómo usarlas y te daremos ejemplos prácticos para que puedas aplicarlas en tus propios proyectos.
Índice
- ¿Qué es HTML y por qué es importante?
- Estructura básica de una página HTML
- Etiquetas HTML imprescindibles
- Ejemplo práctico de código HTML
- Vídeo recomendado
- Conclusión
1. ¿Qué es HTML y por qué es importante?
HTML (HyperText Markup Language) es el lenguaje estándar utilizado para la creación de páginas web. Es la base sobre la que se estructura cualquier sitio web, permitiendo organizar el contenido mediante etiquetas HTML5. Aprender a utilizar estas etiquetas es esencial para cualquier persona que quiera iniciarse en el diseño y desarrollo web.
2. Estructura básica de una página HTML
Antes de profundizar en las etiquetas, es importante conocer la estructura fundamental de un documento HTML:
<!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 HTML</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>Cada etiqueta HTML tiene una función específica dentro de la estructura de la página. A continuación, veremos las más importantes.
3. Etiquetas HTML imprescindibles
3.1. Etiquetas HTML de estructura
Estas etiquetas permiten organizar el contenido de la página:
<html>: Contenedor principal del documento.<head>: Contiene información sobre la página (metaetiquetas, título, enlaces a CSS, scripts, etc.).<body>: Todo el contenido visible de la página.<header>: Define la cabecera de la página o una sección.<nav>: Agrupa enlaces de navegación.<main>: Representa el contenido principal.<section>: Define secciones dentro de la página.<article>: Contenido independiente, como artículos o blogs.<footer>: Pie de página con información adicional.
3.2. Etiquetas HTML de texto
Estas etiquetas ayudan a dar formato y significado al contenido textual:
<h1>a<h6>: Encabezados de mayor a menor importancia.<p>: Párrafos de texto.<strong>: Texto en negrita con importancia semántica.<em>: Texto en cursiva.<br>: Salto de línea.<hr>: Línea horizontal para separar secciones.<blockquote>: Cita de otro texto.<ul>y<ol>: Listas desordenadas y ordenadas, respectivamente.<li>: Elemento de lista.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Etiquetas de Estructura</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Mi Página Web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<section>
<h2>Bienvenidos</h2>
<p>Esta es la sección principal de nuestra página web.</p>
</section>
<article>
<h2>Artículo Destacado</h2>
<p>Este es un artículo independiente con información relevante.</p>
</article>
</main>
<footer>
<p>© 2025 Mi Página Web - Todos los derechos reservados.</p>
</footer>
</body>
</html>3.3. Etiquetas HTML para enlaces
Los enlaces permiten conectar páginas entre sí:
<a href="https://www.w3schools.com/html/">Aprende más sobre HTML aquí</a><a>: Define un enlace.href: Especifica la URL de destino.target="_blank": Abre el enlace en una nueva pestaña.
3.4. Etiquetas HTML para imágenes y multimedia
Añadir imágenes y videos es clave en el desarrollo web:
<img src="imagen.jpg" alt="Descripción de la imagen"><img>: Inserta una imagen.src: Ruta de la imagen.alt: Texto alternativo para accesibilidad.
Para videos, usamos <video> y <iframe>:
<video controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el video.
</video><iframe width="560" height="315" src="https://www.youtube.com/embed/codigo_video" allowfullscreen></iframe>3.5. Etiquetas de formularios
Los formularios permiten recopilar información de los usuarios:
<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<button type="submit">Enviar</button>
</form><form>: Define un formulario.<input>: Campo de entrada de datos.<button>: Botón de envío.method: Define cómo se envían los datos (GEToPOST).
4. Ejemplo práctico de código con HTML
A continuación, un ejemplo de una página web simple con varias etiquetas HTML en acción:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Web</title>
</head>
<body>
<header>
<h1>Bienvenido a Mi Página Web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<section>
<p>Aprender HTML es el primer paso en el desarrollo web.</p>
<img src="imagen.jpg" alt="Ejemplo de HTML">
</section>
<footer>
<p>© 2024 Mi Web</p>
</footer>
</body>
</html>5. Video recomendado
Aquí tienes un video en español que explica las etiquetas HTML básicas:
6. Conclusión
Dominar las etiquetas HTML5 es esencial para cualquier principiante que quiera crear sitios web bien estructurados y funcionales. Con estas etiquetas y ejemplos, tienes las bases para seguir explorando y desarrollando proyectos más avanzados.
Para aprender más sobre HTML, te recomiendo:
Y visitar la documentación de W3 Schools
Especialista en Diseño y Desarrollo Web para Startups, PYMEs y Proyectos Personales | Experto en WordPress & Optimización SEO | Ayudo a autónomos y PYMEs a crecer su negocio.
