DROPCODING BLOG

¿Qué es la Etiqueta Caption en HTML y Cómo se usa? (con Ejemplos)

Si te pregunto para qué crees que sirve la etiqueta caption en HTML, estoy seguro de que, con ese nombre tan guapo, piensas que sirve para hacer algo muy interesante, algo que mola mucho.

Y la verdad es que… bueno, eso ya lo vas a juzgar tú mismo al final de este artículo.

En este artículo, veremos qué es y para qué sirve esta etiqueta Caption.

Luego ya decidiremos si es interesante o no lo es.

Como siempre, recordarte que este artículo forma parte de la serie del diccionario HTML donde vemos cada una de las etiquetas de este lenguaje.

Y no te voy a mentir, esto requiere un curro de la…

Así que agradezco mucho que me dejes cualquier comentario más abajo.

¿Qué es la etiqueta caption en HTML?

La etiqueta caption se utiliza para colocar un título en una tabla y se coloca inmediatamente después de la etiqueta de la apertura de la tabla.

Ya te he dicho que el nombre de esta etiqueta molaba mucho.

Pero, en cambio su función… digamos que es algo… bastante simple, por decirlo de alguna manera.

Y bueno, por si no ha quedado muy claro, vamos a ver un ejemplo en el editor.

Ejemplo de uso etiqueta Caption

Como siempre, tenemos la estructura o el estándar HTML y, fijaros que, dentro del body, tenemos una etiqueta main y, dentro de la etiqueta main, tenemos una etiqueta table para crear una tabla.

Entonces, ¿qué hemos hecho en esta tabla?

Pues, además de poner las diferentes casillas, hemos creado la etiqueta caption para crear un título propio de la tabla.

<body>

  <main>

    <table>
      <caption>Tabla de Precios</caption>
      <thead>
        <tr>
          <th>Producto</th>
          <th>Precio</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Manzana</td>
          <td>$0.50</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>$0.40</td>
        </tr>
      </tbody>
    </table>


  </main>

</body>

Si os fijáis, ya aparece nuestra tabla y, antes de esta tabla, aparece su título.

Esto, a simple vista, podría ser un h2, un h3, podría aparecer incluso cualquier subtítulo en HTML.

Pero la verdad es que esto es un caption y esto tiene su importancia a nivel semántico. Cuando estemos en el navegador, no vamos a distinguir muy bien si se trata de una etiqueta u otra.

caption_table

Estamos hablando de que tiene su importancia a nivel semántico. O sea, esto sería el título de la tabla.

Así que ya sabes para qué se utiliza la etiqueta caption.

En fin, no sé si te ha parecido interesante o no.

Pero oye, aquí tienes la etiqueta caption por si la necesitas algún día

Si alguna vez quieres ponerle un título a una tabla en HTML, pues ya sabes cómo hacerlo.

Y recuerda que, si te has quedado con alguna duda o tienes alguna sugerencia, puedes dejármelo en los comentarios.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *