Etiquetas HTML
Las etiquetas HTML (HyperText Markup Language) son el componente básico de los documentos web. Son palabras clave encerradas entre corchetes angulares (< y >) que indican a un navegador cómo estructurar y mostrar el contenido.
La mayoría de las etiquetas vienen en pares: una etiqueta de apertura (<etiqueta>) y una etiqueta de cierre (</etiqueta>), y el contenido se coloca entre ellas.
Aquí tienes una clasificación de las etiquetas HTML más esenciales, organizadas por su función dentro del documento.
1. Etiquetas de Estructura Básica
Estas etiquetas definen la estructura fundamental de un documento HTML:
| Etiqueta | Función | Ejemplo |
<!DOCTYPE html> | Declaración del tipo de documento (debe ser la primera línea). | <!DOCTYPE html> |
<html> | El elemento raíz que envuelve todo el contenido de la página. | <html lang="es">...</html> |
<head> | Contiene metadatos (información sobre el documento, no visible en la página). | <head>...</head> |
<title> | Define el título que aparece en la pestaña del navegador. | <title>Mi Página Web</title> |
<body> | Contiene todo el contenido visible para el usuario. | <body>...</body> |
2. Etiquetas de Texto y Semántica
Se utilizan para organizar y dar significado (semántica) al texto:
| Etiqueta | Función | Ejemplo |
<h1> a <h6> | Encabezados o títulos. <h1> es el más importante, <h6> el menos. | <h1>Título Principal</h1> |
<p> | Párrafo de texto. | <p>Este es un párrafo.</p> |
<strong> | Define texto importante (se suele mostrar en negrita). | <strong>Importante</strong> |
<em> | Define énfasis (se suele mostrar en cursiva). | <em>Énfasis</em> |
<br> | Un salto de línea (etiqueta de cierre opcional). | Línea 1<br>Línea 2 |
<hr> | Una regla horizontal (línea divisoria temática). | <hr> |
3. Etiquetas de Enlaces e Imágenes
Estas etiquetas conectan tu página con otros recursos:
| Etiqueta | Función | Ejemplo |
<a> | Hipervínculo o enlace. El atributo href es crucial. | <a href="https://google.com">Ir a Google</a> |
<img> | Inserta una imagen. Etiqueta de cierre opcional. | <img src="ruta/imagen.jpg" alt="Descripción"> |
4. Etiquetas de Listas
Se usan para estructurar información como series o enumeraciones:
| Etiqueta | Función | Ejemplo |
<ul> | Lista desordenada (con viñetas). | <ul>...</ul> |
<ol> | Lista ordenada (con números o letras). | <ol>...</ol> |
<li> | Elemento de lista (debe ir dentro de <ul> o ol). | <li>Elemento</li> |
5. Etiquetas de Estructura y Contenedores
Se utilizan para agrupar y organizar grandes secciones del contenido (muy usadas con CSS):
| Etiqueta | Función | Ejemplo |
<div> | Contenedor de bloque genérico. Se usa para agrupar elementos y aplicar estilos. | <div>Contenido</div> |
<span> | Contenedor de línea genérico. Se usa para aplicar estilos a una porción de texto. | El <span style="color: red;">texto</span> es rojo. |
<nav> | Sección que contiene enlaces de navegación. | <nav>...</nav> |
<main> | Contenido principal y único del documento. | <main>...</main> |
<footer> | Información de pie de página (derechos de autor, enlaces de contacto). | <footer>...</footer> |
<section> | Agrupa contenido relacionado, generalmente con un encabezado. | <section>...</section> |