W3docs
es
Iniciar sesión

Etiquetas HTML básicas

Aprende las etiquetas HTML que toda página necesita: encabezados, párrafos, imágenes, enlaces, botones, listas y reglas horizontales, con ejemplos ejecutables.

HTML es un lenguaje de marcado: envuelves tu contenido en etiquetas (elementos) que le indican al navegador qué significa cada pieza de contenido — esto es un encabezado, aquello es un párrafo, esto es un enlace. Sin marcado, el navegador simplemente vería un bloque de texto sin ninguna estructura. Comprender las etiquetas básicas es la base de todo lo demás en HTML.

Aquí están los elementos que usarás con más frecuencia en casi todas las páginas:

  • las etiquetas de encabezado <h1>-<h6>,
  • la etiqueta <p> (párrafo),
  • la etiqueta <img> (imagen),
  • la etiqueta <a> (ancla/enlace),
  • la etiqueta <button>,
  • las etiquetas de lista <ul>, <ol> y <li>,
  • la etiqueta <hr> (regla horizontal).

Esta página presenta cada uno de ellos, explica por qué los necesitas y ofrece un ejemplo ejecutable que puedes editar.

Documentos HTML

Todas las páginas HTML comparten el mismo esqueleto de código base. Los elementos que se muestran a continuación aparecen en todos los ejemplos de esta página, por lo que vale la pena saber qué hace cada uno:

  • <!DOCTYPE html> debe ser la primera línea de todo. No es una etiqueta sino una declaración que le indica al navegador que use el modo de estándares moderno (HTML5). Si la omites, los navegadores vuelven al antiguo "modo peculiar" que renderiza las páginas de forma inconsistente.
  • Todo el documento está envuelto en el elemento <html>: comienza con <html> y termina con </html>. Este es el elemento raíz.
  • La sección <head> contiene información sobre la página que no se muestra en el cuerpo de la página — por ejemplo, el <title>, que establece el texto mostrado en la pestaña del navegador y utilizado por los motores de búsqueda.
  • El contenido visible de la página se encuentra entre <body> y </body>. Todo lo que el usuario ve — encabezados, párrafos, imágenes, enlaces — va aquí.

Ejemplo de un documento HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>
Pruébalo tú mismo »

Encabezados HTML

Los encabezados dan a una página su esquema. Hay seis niveles de encabezados HTML, desde <h1> (el más importante) hasta <h6> (el menos importante). Usa <h1> para el título principal de la página, <h2> para las secciones principales, <h3> para las subsecciones, y así sucesivamente — como una tabla de contenidos.

Los encabezados no son solo texto más grande y en negrita. Sus niveles tienen un significado que importa para la accesibilidad y el SEO: los usuarios de lectores de pantalla navegan por una página saltando entre encabezados, y los motores de búsqueda usan la estructura de encabezados para entender de qué trata la página. Por esa razón, elige un nivel de encabezado por su significado, no por su tamaño — nunca saltes niveles solo para hacer que el texto parezca más pequeño.

Ejemplo de los encabezados HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>
Pruébalo tú mismo »

Párrafos HTML

El elemento <p> agrupa el texto en párrafos. Los navegadores añaden espacio encima y debajo de cada párrafo automáticamente, por lo que no tienes que agregar líneas en blanco tú mismo — de hecho, los espacios y saltos de línea adicionales en tu código fuente se contraen en un único espacio. Envolver el texto en <p> es la forma de indicarle al navegador "este es un bloque de texto continuo."

Ejemplo de los párrafos HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>
Pruébalo tú mismo »

Imágenes HTML

La etiqueta <img> incrusta una imagen en la página. Es un elemento vacío (sin etiqueta de cierre) y se controla enteramente mediante sus atributos:

  • src — la ruta o URL del archivo de imagen que se mostrará. Sin él, no se muestra nada.
  • alt — el texto alternativo (véase más adelante).
  • width / height — el tamaño de la imagen en píxeles. Establecerlos reserva espacio para que el diseño no salte mientras la imagen se carga.

Por qué importa el atributo alt

El atributo alt contiene una breve descripción de texto de la imagen. Es obligatorio porque cumple varios propósitos importantes:

  • Los lectores de pantalla leen el texto alt en voz alta, de modo que las personas que no pueden ver la imagen sigan entendiéndola — esto es esencial para la accesibilidad.
  • Si la imagen no se carga, el navegador muestra el texto alt en su lugar.
  • Los motores de búsqueda lo usan para entender qué representa la imagen.

Un buen texto alt describe el contenido o propósito de la imagen en pocas palabras, como si la describieras a alguien por teléfono. Por ejemplo, en lugar de alt="Aleq" (que no tiene significado para quien no sabe qué es "Aleq"), es preferible algo como alt="Portrait of a smiling man wearing glasses". Si una imagen es puramente decorativa y no aporta información, usa alt="" vacío para que los lectores de pantalla la omitan.

Ejemplo de las imágenes HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>
Pruébalo tú mismo »

Enlaces HTML

Los enlaces son lo que convierte páginas separadas en una web conectada — permiten a los usuarios hacer clic para pasar de una página a otra. Se crea un enlace con la etiqueta <a> (ancla) y se envuelve alrededor del texto o imagen que debe ser clicable.

El destino se establece con el atributo href (abreviatura de hypertext reference). Es la dirección a la que el navegador navega cuando se hace clic en el enlace — una URL absoluta como https://www.w3docs.com/, o una ruta en tu propio sitio como /learn-html/html-links. Sin un href, un elemento <a> es solo texto y no hace nada.

Ejemplo de los enlaces HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Pruébalo tú mismo »

Botones HTML

La etiqueta <button> crea un botón clicable que los usuarios pueden presionar para activar una acción — enviar un formulario, abrir un menú o ejecutar algún JavaScript.

Un botón tiene un atributo type. Establecer type="button" es un buen hábito cuando el botón no está destinado a enviar un formulario: por defecto, un <button> dentro de un <form> tiene type="submit", por lo que omitir el tipo puede provocar que el formulario se envíe (y la página se recargue) de forma inesperada. Usar type="button" hace que el botón no haga nada por sí solo hasta que le asocies un comportamiento, lo que evita ese envío accidental.

Ejemplo de la etiqueta HTML <button>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>
Pruébalo tú mismo »

Listas HTML

Las listas agrupan elementos relacionados. Usa la etiqueta <ul> para una lista desordenada (elementos con viñetas, donde el orden no importa) o la etiqueta <ol> para una lista ordenada (elementos numerados, donde la secuencia importa, como los pasos de una receta). Dentro de cualquiera de ellas, cada elemento se envuelve en una etiqueta <li> (elemento de lista).

Ejemplo de las listas HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>
Pruébalo tú mismo »

Líneas horizontales en HTML

La etiqueta HTML <hr> representa una ruptura temática entre contenido a nivel de párrafo — por ejemplo, un cambio a un nuevo tema dentro de una sección, o un cambio de escena en una historia. En HTML5 es un elemento semántico, no solo una línea decorativa: comunica que el contenido anterior y posterior tratan de cosas diferentes. Los navegadores habitualmente la renderizan como una línea horizontal, pero esa es solo su apariencia predeterminada. Es una etiqueta vacía, por lo que no tiene etiqueta de cierre.

Ejemplo de la etiqueta HTML <hr>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>
Pruébalo tú mismo »

Práctica

Práctica
¿Cuáles afirmaciones sobre los elementos HTML básicos son verdaderas?
¿Cuáles afirmaciones sobre los elementos HTML básicos son verdaderas?

Resumen

Las etiquetas HTML básicas presentadas aquí son los bloques de construcción de casi todas las páginas web:

Was this page helpful?