? Listado de Etiquetas HTML - (ACTUALIZADO 2020)
? Listado de Etiquetas HTML - (ACTUALIZADO 2020)
m/)
estudio.co
ront
(ht tps://ca
om/)
testudio.c
caron
/) (https://
.com
ontestudio
://car
(https
(https://carontestudio.com/blog/listado-de-etiquetas-html/#comments)
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!
https://carontestudio.com/blog/listado-de-etiquetas-html/ 1/16
23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]
Índice de contenidos
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
https://carontestudio.com/blog/listado-de-etiquetas-html/ 2/16
23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]
Etiquetas HTML 5
https://carontestudio.com/blog/listado-de-etiquetas-html/ 3/16
23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]
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.
¿Sabías que también puedes añadir un video de fondo HTML a tu página web
(https://carontestudio.com/blog/como-poner-un-video-de-fondo-en-html/)?
https://carontestudio.com/blog/listado-de-etiquetas-html/ 4/16
23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]
<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>
<dd> </dd> 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.
https://carontestudio.com/blog/listado-de-etiquetas-html/ 6/16
23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]
<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 (https://www.w3c.es/). 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
(https://carontestudio.com/formacion/cursos-web-vitoria), son la referencia donde consultar
primero cualquier duda sobre HTML y CSS.
https://carontestudio.com/blog/listado-de-etiquetas-html/ 7/16
23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]
(https://carontestudio.com/blog/como-poner-un-video-de-fondo-en-html/)
(https://carontestudio.com/blog/que-son-los-selectores-css-y-que-tipos-existen/)
https://carontestudio.com/blog/listado-de-etiquetas-html/ 8/16