Listado de etiquetas HTML

Listado de etiquetas HTML

Si eres un recién llegado al mundo del desarrollo web, y quieres tener el listado de las etiquetas HTML más comunes, este post te gustará. Guarda esta página en favoritos porque a continuación tendrás el listado de etiquetas HTML definitivo. ¡Comenzamos!

¬ŅQu√© es una etiqueta HTML?

Antes de entrar en materia, conviene explicar de que vamos a hablar. Las etiquetas HTML son peque√Īos bloques de c√≥digo, que indican al navegador como debe interpretar el contenido recogido entre dichas etiquetas. Por ejemplo, si queremos “pintar” un p√°rrafo de texto, hay una etiqueta especifica para que el navegador interprete ese texto como un p√°rrafo.

Las etiquetas HTML comienzan siempre con el s√≠mbolo “<” y finalizan con el s√≠mbolo “>”. Entre medias de estos dos s√≠mbolos ir√° el nombre de la etiqueta que queremos que el navegador interprete.

Todas las etiquetas HTML están compuestas por una etiqueta de apertura, y una etiqueta de cierre. Aunque hay excepciones, como por ejemplo la etiqueta para cargar una imagen que son llamadas etiquetas huérfanas, ya que solo tienen etiqueta de apertura.

Las etiquetas de cierre se construyen con una barra “/” justo antes de la propia etiqueta y los s√≠mbolos “<” y “>”. Resumiendo, si queremos “pintar” un p√°rrafo en la p√°gina web, abriremos con la etiqueta de apertura de p√°rrafo “<p>”, y cerrar√≠amos con la etiqueta de cierre “</p>”.

<p>Esto es un p√°rrafo</p>

Una vez que conocemos que son las etiquetas y como implementarlas en nuestro código web, pasemos a ver un listado de las etiquetas HTML más comunes

Listado etiquetas HTML
Etiquetas HTML 5

Listado etiquetas HTML

A continuación voy a indicarte cuales son las etiquetas HTML más usadas y también te indicaré su finalidad. Voy a centrarme en las principales etiquetas y sobre todo las que están soportadas en HTML 5. Ahí van:

Etiquetas iniciales o de raíz

  • <!DOCTYPE html> Indica al navegador que el documento est√° basado en el est√°ndar HTML5
  • <html> </html> Representa la ra√≠z de un documento HTML. Todos los dem√°s elementos de la estructura HTML deben ser recogidos dentro de estas etiquetas.

Metadatos del documento

  • <head> </head> Representa una colecci√≥n de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. El resto de etiquetas de metadatos, ir√°n recogidas dentro de las etiquetas de apertura y cierre del head. Importante explicar que estos metadatos del documento, es informaci√≥n para el navegador y no contenido que ser√° visible en la p√°gina web. A excepci√≥n de la etiqueta <title> que veremos a continuaci√≥n.
  • <title> </title> Etiqueta usada para definir el t√≠tulo de la p√°gina web.
  • <link> Se usa para enlazar recursos externos al documento HTML. El ejemplo m√°s com√ļn son las hojas de estilos CSS.
  • <meta> Etiqueta usada para definir otros metadatos que no se pueden definir con una etiqueta HTML especifica. Por ejemplo para definir el autor del sitio, o la descripci√≥n del mismo.
  • <style> </style> Etiquetas usadas para introducir c√≥digo CSS en l√≠nea, es decir, en el propio documento HTML.

Etiquetas de secciones o para estructurar el HTML

  • <body> </body> Al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en la p√°gina web debe ir recogido dentro de las etiquetas de apertura y cierre de <body>. Este contenido ser√° el que se muestre en la web.
  • <nav> </nav> Usadas para definir el contenido que ser√° la secci√≥n de navegaci√≥n de la web.
  • <main> </main> Se usa para definir el contenido principal del documento. Solamente puede existir uno por documento.
  • <section> </section> Define una secci√≥n del documento
  • <article> </article> Define contenido independiente de la web.
  • <aside> </aside> Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele ser contenido relacionado con la web pero de poca importancia
  • <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las etiquetas se usan para explicar brevemente el contenido que ir√° a continuaci√≥n.
  • <header> </header> Se usan para definir la cabecera la p√°gina web. Suele contener el logotipo, men√ļ de navegaci√≥n, etc.
  • <footer> </footer> Usadas para definir el pie de p√°gina.

Etiquetas para la agrupación de contenido

  • <p> </p> Etiqueta usada para escribir p√°rrafos de texto.
  • <hr> Etiqueta utilizada para “romper” entre dos secciones de una web. Usada com√ļnmente como separador.
  • <pre> </pre> Usada para pegar texto manteniendo el pre formato propio del texto.
  • <blockquote> </blockquote> Se usan para indicar que el contenido es texto citado.
  • <ol> </ol> Etiquetas para crear una lista ordenada
  • <ul> </ul> Etiquetas para crear una lista des-ordenada
  • <li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
  • <dl> </dl> Usada para crear una lista de definiciones.
  • <dt> </dt> Representa un t√©rmino definido por la siguiente etiqueta <dd>
  • <dl> </dl> Se usa para definir los t√©rminos listados antes que √©l.
  • <figure> </figure> Indica una figura ilustrada como parte del documento HTML5.
  • <figcaption> </figcaption> Utilizada para definir la leyenda de una figura.
  • <div>¬†</div> Etiqueta com√ļn utilizada para crear un contenedor gen√©rico.

Etiquetas sem√°nticas para texto

  • <a> </a> Etiqueta utilizada para crear hiperenlaces en el documento HTML
  • <strong> </strong> Etiqueta para definir una palabra o conjunto de ellas como importantes. Tiene una fuerte importancia en el SEO de la p√°gina.
  • <small> </small> Utilizada para dejar un comentario aparte, del tipo una nota de derechos de autor√≠a, u otros textos que no son esenciales para la comprensi√≥n del documento.
  • <cite> </cite> Para indicar el t√≠tulo de una obra
  • <sub> </sub> y <sup> </sup> Etiquetas utilizadas para representar un sub√≠ndice o super√≠ndice.
  • <mark> </mark> Usada para resaltar texto
  • <span> </span> Etiqueta HTML sin ning√ļn significado espec√≠fico. Se usa conjuntamente con los atributos “class” o “id” para atribuirle ciertas caracter√≠sticas.
  • <br> Etiqueta utilizada para crear un salto de l√≠nea

Etiquetas para incrustar contenido

  • <img> Etiqueta para “pintar” una imagen en la p√°gina web.
  • <iframe> </iframe> Es una etiqueta que sirve para anidar otro documento HTML dentro del documento principal.
  • <embed> Usada para integrar una aplicaci√≥n o contenido interactivo externo que no suele ser HTML.
  • <object> </object> Utilizada llamar a un recurso externo de la web. Este recurso ser√° tratado como una imagen, o un recurso externo para ser procesado por un plugin.
  • <video> </video> Se usa para reproducir video en la p√°gina web junto a sus archivos de audio y capciones asociadas.
  • <audio> </audio> Usada para cargar un archivo de audio o stream de audio.
  • <source> Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o <audio>
  • <svg> </svg> Se usa para llamar a una imagen vectorizada.

Etiquetas para la creación de tablas

  • <table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
  • <caption> </caption> Usada para indicar el t√≠tulo de la tabla.
  • <colgroup> </colgroup> Etiqueta utilizada para agrupar dos o m√°s columnas de una tabla.
  • <tbody> </tbody> Usada para describir los datos concretos de una tabla.
  • <thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
  • <tfoot> </tfoot> Indica los bloques de filas que describen los res√ļmenes, o datos totales de una columna de una tabla.
  • <tr> </tr> Se usa para indicar una fila de celdas de una tabla.
  • <td> </td> Usada para definir una celda de una tabla.
  • <th> </th> Etiqueta que se usa para definir el encabezado de una celda

Etiquetas para la creación de formularios

  • <form> </form> Etiqueta de apertura y cierre de un formulario de una p√°gina web. El resto de etiquetas de formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de formulario.
  • <fieldset> </fieldset> Etiqueta que representa un conjunto o agrupaci√≥n de elementos de un formulario. “Pinta” un recuadro alrededor de las etiquetas que est√©n contenidas dentro del <fieldset>
  • <legend> </legend> Etiqueta ligada a <fieldset>. Indica el t√≠tulo del <fieldset>
  • <label> </label> Se usa para definir el nombre o t√≠tulo de un control del formulario.
  • <input> Pinta un campo de introducci√≥n de datos para el usuario. Es de las principales etiquetas de un formulario.
  • <button> </button> Etiqueta utilizada para representar un bot√≥n en el formulario.
  • <select> </select> Input que permite una selecci√≥n entre un conjunto de opciones.
  • <option> </option> Etiqueta ligada a <select>. Permite a√Īadir diferentes opciones al <select>
  • <textarea> </textarea> A√Īade un campo al usuario para que pueda introducir texto en unas l√≠neas m√°ximas de texto que el desarrollador puede definir.

Conclusión

Adem√°s de las etiquetas HTML que aqu√≠ te he mostrado, existen muchas m√°s. Pero sinceramente, creo que con este listado podr√°s hacer el 99% de las p√°ginas web. Y si tienes dudas con alguna etiqueta, o bien has encontrado alguna de la que no te he hablado aqu√≠ y quieres saber m√°s, consulta el siguiente enlace. Iras a la p√°gina del World Wide Web Consortium o W3C, que como le digo a mis alumnos del curso de dise√Īo web, son la referencia donde consultar primero cualquier duda sobre HTML y CSS.

¡Nos vemos en la próxima!

Deja una respuesta

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

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Volver al blog