📑 Tabla de contenidos
Si estás empezando a trabajar con HTML, aquí te traemos los 10 códigos HTML básicos para páginas web con varios ejemplos. Son fundamentales para cualquier programador. Si aprendes cómo funcionan estas 10 etiquetas, tendrás los conocimientos suficientes para crear un sitio web básico.
Al final del artículo encontrarás un código de ejemplo completo que incluye las 10 etiquetas, para que puedas ver cómo usarlas juntas.
¿Qué es una etiqueta HTML?
Una etiqueta HTML es una palabra o letra especial rodeada de corchetes angulares < >.
Estas etiquetas se utilizan para crear elementos HTML, como párrafos o enlaces.
Muchos elementos tienen una etiqueta de apertura y una de cierre; por ejemplo, el elemento
p (párrafo) tiene la etiqueta <p>, seguida del texto, y luego
la etiqueta de cierre </p>.
Algunos elementos no tienen etiqueta de cierre: se llaman elementos vacíos.
Por ejemplo, <br> inserta un salto de línea. Si trabajás con XHTML,
podés escribirlos con cierre automático: <br />.
1. <html> — El elemento raíz
Todos los sitios web comienzan con el elemento html, también llamado
elemento raíz porque está en la base del árbol de elementos de la página.
Todo el contenido de tu sitio va entre <html> y </html>.
<html>
Todos los demás elementos van aquí.
</html>2. <head> — El encabezado del documento
El elemento head contiene información sobre la página, no el contenido visible.
Dentro podés poner el título, hojas de estilo con <link>,
metadatos con <meta> y scripts con <script>.
<head>
<title>Las aventuras de mi gato Lucky</title>
<meta charset="utf-8">
<meta name="description" content="Las aventuras de mi gato favorito Lucky">
<meta name="keywords" content="gato, Lucky, mascota, animal">
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/favicon.ico">
</head>3. <title> — El título de la página
El título aparece en la pestaña del navegador, en marcadores y en los resultados de búsqueda. Debe describir el contenido con precisión y ser único en cada página del sitio.
<title>Las aventuras de mi gato Lucky</title>4. <body> — El contenido de la página
La etiqueta body contiene todo lo que el visitante ve: texto, imágenes, enlaces, etc.
Aparece después del <head> y engloba todo el contenido visible del sitio.
<body>
(Todo el contenido visible de la página va aquí)
</body>5. <h1> — Encabezados de sección
Los encabezados dividen el contenido en secciones legibles, como títulos y subtítulos de un libro.
HTML soporta 6 niveles: h1 (el más importante) hasta h6.
En la mayoría de los casos alcanza con h1, h2 y h3.
<h1>Las aventuras de mi gato Lucky</h1>
<h2>Capítulo 1: El ratón</h2>
<h3>El primer día de caza</h3>6. <p> — Un párrafo
El elemento p crea párrafos de texto con espacio vertical automático entre ellos.
Es preferible usarlo en lugar de <br> para separar bloques, ya que estructura
mejor el documento para navegadores y motores de búsqueda.
<p>Mi gato Lucky tiene muchas aventuras. ¡Ayer atrapó un ratón, y esta mañana atrapó dos!</p>7. <a> — Un enlace
El elemento a (anchor) permite crear enlaces a otro contenido, en tu mismo sitio
o en cualquier otro. La URL de destino se indica en el atributo href.
<a href="http://www.ejemplo.com/">¡Visitá este excelente sitio web!</a>8. <img> — Una imagen
El elemento img inserta imágenes en la página. La ruta del archivo va en
el atributo src. El atributo alt es obligatorio: describe la imagen
para lectores de pantalla y para cuando la imagen no carga.
<img src="mifoto.jpg" >9. <div> — Contenedor de bloque
El elemento div es un contenedor genérico para agrupar otros elementos.
Es un elemento de nivel de bloque: siempre ocupa su propia línea. Se usa para
encabezados, pies de página, columnas y barras laterales. Combinado con class
e id, permite crear layouts completos con CSS.
<div >
<h2>Encabezado de la barra lateral</h2>
<p>Contenido de la barra lateral.</p>
</div>10. <span> — Contenedor en línea
El elemento span es similar al div, pero es en línea:
vive dentro del flujo del texto sin generar una nueva línea. Se usa para aplicar estilos
o marcar semánticamente palabras dentro de un párrafo.
Diferencia clave: div es de bloque (nueva línea), span es en línea
(dentro del texto). Los elementos en línea no pueden contener elementos de bloque.
<p>Nuestros productos incluyen
<span >SuperWidgets</span>,
<span >MegaWidgets</span> y
<span >WonderWidgets</span>.
</p>Ejemplo completo con las 10 etiquetas
Ahora que conocés estas 10 etiquetas, veamos cómo se combinan en una página web real:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Las aventuras de mi gato Lucky</title>
<meta charset="utf-8">
<meta name="description" content="Las aventuras de mi gato favorito Lucky">
<meta name="keywords" content="gato, Lucky, mascota, animal">
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/favicon.ico">
</head>
<body>
<h1>Las aventuras de mi gato Lucky</h1>
<div >
<p>
Mi gato Lucky tiene muchas aventuras.
Ayer <a href="raton.html">atrapó un ratón</a>, ¡y esta mañana atrapó dos!
</p>
<p>Aquí hay una foto de Lucky:</p>
<img src="lucky.jpg" >
</div>
<div >
<h2>¡Conocé nuestros productos!</h2>
<p>
Algunos de nuestros productos incluyen
<span >SuperWidgets</span>,
<span >MegaWidgets</span> y
<span >WonderWidgets</span>.
</p>
</div>
</body>
</html>Como podés ver, es posible crear un sitio web funcional usando solo estas 10 etiquetas HTML. El siguiente paso natural es aprender CSS para darle estilo, y luego JavaScript para agregar interactividad. ¡Buena suerte!
¿Querés tener tu propia web?
