? Listado de Etiquetas HTML - (ACTUALIZADO 2020)

23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]
m/)
estudio.co
ront
(ht tps://ca
om/)
testudio.c
caron
/) (https://
.com
ontestudio
://car
(https
Listado de etiquetas HTML

Publicado el 31 julio, 2020 por Víctor Sánchez (https://carontestudio.com/blog/author/victor/). / 32 Comentarios
(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
Índice de contenidos
1 ¿Qué es una etiqueta HTML?

2 Listado etiquetas HTML
2.1 Etiquetas iniciales o de raíz
2.2 Metadatos del documento
2.3 Etiquetas de secciones o para estructurar el HTML
2.4 Etiquetas para la agrupación de contenido
2.5 Etiquetas semánticas para texto
2.6 Etiquetas para incrustar contenido
2.7 Etiquetas para la creación de tablas
2.8 Etiquetas para la creación de formularios
3 Conclusión
¿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. Estas etiquetas
cuentan además con atributos que podemos añadir y que en sí, pueden determinar como será
el comportamiento específico que tendrá la etiqueta. Te dejo por aquí un listado de atributos
HTML (https://carontestudio.com/blog/atributos-html/) para complementar esta entrada.
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
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.
¿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/)?
¡Descubre cómo hacerlo!
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>
<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.
Complementa este listado de etiquetas con nuestro

listado de todos los atributos HTML
(https://carontestudio.com/blog/atributos-html/) que
existen.
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 (https://carontestudio.com/blog/15-
mitos-del-seo-en-2022/).
<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
(https://carontestudio.com/blog/como-poner-un-video-de-fondo-en-html/) junto a sus
archivos de audio y capciones asociadas.
<audio> </audio> Usada para cargar en una web un archivo de audio
(https://carontestudio.com/blog/como-anadir-un-reproductor-de-audio-html/) 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 (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.
¡Nos vemos en la próxima!
(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/)
32 COMENTARIOS EN «LISTADO DE ETIQUETAS

? Listado de Etiquetas HTML - (ACTUALIZADO 2020)

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

? Listado de Etiquetas HTML - (ACTUALIZADO 2020)

Cargado por

Copyright:

Formatos disponibles

23/1/23, 14:06 🥇 Listado de etiquetas HTML | [ACTUALIZADO 2020]

Listado de etiquetas HTML

1 ¿Qué es una etiqueta HTML?

¿QUÉ ES UNA ETIQUETA HTML?

LISTADO ETIQUETAS HTML

ETIQUETAS INICIALES O DE RAÍZ

METADATOS DEL DOCUMENTO

ETIQUETAS DE SECCIONES O PARA ESTRUCTURAR EL HTML

¡Descubre cómo hacerlo!

ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO

Complementa este listado de etiquetas con nuestro

ETIQUETAS SEMÁNTICAS PARA TEXTO

ETIQUETAS PARA INCRUSTAR CONTENIDO

ETIQUETAS PARA LA CREACIÓN DE TABLAS

ETIQUETAS PARA LA CREACIÓN DE FORMULARIOS

¡Nos vemos en la próxima!

32 COMENTARIOS EN «LISTADO DE ETIQUETAS

También podría gustarte