Las etiquetas HTML son el alma de cualquier sitio web, los comandos secretos que transforman texto en experiencias digitales atractivas y bien estructuradas. Más allá de organizar contenido, estas etiquetas son clave para destacar en los motores de búsqueda y brindar una navegación fluida.
En este artículo, revelamos el verdadero poder de las etiquetas HTML: te mostraremos cómo usarlas para mejorar la accesibilidad, impulsar el SEO y llevar la experiencia de tus usuarios a otro nivel. ¡Continúa leyendo!
Guía básica sobre HTML y CSS para marketers
Obtén una introducción básica a HTML y CSS diseñada para profesionales del marketing, que te permitirá comprender y utilizar estos lenguajes para mejorar tus habilidades digitales.
- Conoce qué es el HTML y el CSS.
- Descubre códigos esenciales de HTML.
- Aprende a actualizar el CSS.
- HTML y CSS: aspectos a evitar.
Descargar ahora
Todos los campos son obligatorios.
Qué son las etiquetas HTML
Las etiquetas HTML son fragmentos de código que proporcionan formato, funcionalidad y estructura al contenido en una página web. Funcionan como instrucciones para que el navegador interprete y muestre correctamente el contenido visual y estructural, como encabezados, párrafos, imágenes, enlaces y tablas.
A diferencia de un lenguaje de programación, HTML es un lenguaje de marcado; es decir, no genera funciones dinámicas, sino que define cómo se organiza la información en una página web. Aún así, con el uso de etiquetas HTML, los desarrolladores pueden crear una estructura clara y navegable, desde secciones principales hasta detalles como atributos específicos.
Actualmente existen muchas etiquetas HTML disponibles que pueden ayudarte a crear varios aspectos de tu sitio web. En esta ocasión te hablaremos de las más básicas que debes conocer. Pero antes, ahondemos un poco más en la funcionalidad de estos elementos.
Para qué sirven las etiquetas HTML
Sirven para estructurar y organizar el contenido de una página web, permitiendo que los navegadores interpreten y presenten cada elemento correctamente para el usuario final. Son un estándar universal en el desarrollo web, por lo que cualquier navegador puede leer y mostrar una página, sin importar cuándo o en qué idioma fue creada.
Cada etiqueta HTML cumple una función específica, desde indicar títulos y párrafos hasta incorporar imágenes, enlaces y formularios. Estas etiquetas definen visualmente el contenido (por ejemplo, <h1> para títulos principales o <p> para párrafos) y también especifican funciones internas del documento, como metadatos y enlaces a recursos externos (<meta>, <link>).
Ejemplos de uso de etiquetas HTML
-
Estructura básica de una página: organizan el contenido principal, los metadatos y el cuerpo visible del sitio.
-
Texto y formato: ayudan a estructurar los textos, como destacar palabras importantes en negritas o cursiva.
-
Interactividad: permiten añadir enlaces de navegación y recolectar datos de usuario en formularios.
En otras palabras, las etiquetas HTML determinan cómo se verá un sitio web. Cada una indica y representa un atributo que los navegadores deben interpretar y mostrar al usuario cuando visita cualquier sitio en internet.
Cómo funcionan las etiquetas de HTML
Gracias a las etiquetas de HTML, la construcción de una página puede ser entendida por máquinas y humanos, pues el código se basa en la descripción de los elementos que la componen. Lo mejor de todo es que son accesibles y sencillas de aprender, por lo que no necesitas ser un experto o experta en desarrollo web para insertar imágenes, videos, enlaces, documentos o dar un formato enriquecido a tus contenidos.
Cuando tienes acceso a la estructura de una página web, reconocerás las etiquetas de HTML de inmediato, pues están escritas entre estos signos: <tipo-de-etiqueta>texto</tipo-de-etiqueta>. La primera parte encerrada entre signos es la apertura de la etiqueta, y la segunda, que cuenta con una diagonal, indica el cierre de esa etiqueta. Esto sirve para indicarle al navegador la porción de texto que deberá modificarse por dicha indicación. Si se trata de una imagen, un salto de línea o video no es necesario señalar el cierre, pero eso lo hablaremos adelante.
Por otro lado, todas las páginas web que utilizan este lenguaje lo indican desde la primera etiqueta, al inicio, y luce así: <HTML>. Al pie de esa página, se muestra la de cierre: </HTML>.
Partes básicas de las etiquetas HTML
Para comprender, a grandes rasgos, lo que son las etiquetas HTML te mostramos cuáles son sus partes básicas y para qué sirve cada una:
Elemento
Es el nombre de la etiqueta, generalmente pareada (es decir: con apertura y cierre, como lo acabamos de mencionar), y aparece entre los signos de apertura. Por ejemplo: <title>Partes básicas de etiquetas HTML</title>, que indica que esa frase es un título.
Atributo
Es lo que diferencia a un elemento y que le da ciertas características, como tamaño, color, tipo de fuente. Se escribe antes del signo de igual (=), junto al elemento de la etiqueta, únicamente en la apertura y antes de la variable. Por ejemplo: <font face="Arial">. Este texto aparecerá en tipografía Arial</font>. El atributo es el tipo letra, es decir: face.
Contenido
Es el texto que modifica las etiquetas, lo que aparece entre las etiquetas y atributos.
Variable
Es la característica del atributo de una etiqueta: color, tamaño, tipo de letra, y se escribe generalmente entrecomillado después del signo de igual. En el ejemplo de atributo, la variable es Arial.
Ahora, veamos las etiquetas HTML que debes conocer.
Tipos de etiquetas HTML más comunes y cómo usarlas
- <!doctype>
- <html> </html>
- <head> </head>
- <title> </title>
- <body> </body>
- <h1> ... <h6>
- <p> </p>
- <header>
- <footer>
- <nav>
- <main>
- <form>, <input>, <label>
- <font> </font>
- <strong> </strong>
- <em> </em>
- <u> </u>
- <sub> </sub>
- <sup> </sup>
- <br>
- <nobr>
- <p align="..."> </p>
- <ul> </ul>
- <ol> </ol>
- <li> </li>
- <a> </a>
- <img>
1. <!doctype>
Existen etiquetas HTML para indicar el lenguaje en que está configurado el texto. Estas determinan la manera en que el navegador debe procesar el documento.
Cómo indicar tipo de lenguaje
La etiqueta <!doctype> informa al navegador qué versión se usó de HTML o XML para escribir el documento. Se agrega siempre al inicio del documento y no debe olvidarse nunca, pues es una información clave que necesitan los navegadores o cualquier otra herramienta para procesar el documento.
2. <html> </html>
Este tipo de etiquetas HTML definen el documento entero de una página y el resto de los elementos descenderán de ellas.
Cómo indicar la raíz del documento
Estas son una de las etiquetas HTML más familiares: <html>...</html>; si bien la primera puede ser implícita, es esencial para abrir y cerrar cualquier documento en HTML.
3. <head> </head>
Dentro de estas etiquetas se encuentra la información sobre el documento que no se muestra al usuario. Ahí se puede encontrar el título que tendrá la pestaña de la página web, los metadatos de la autoría o la licencia.
Cómo indicar información general del documento
Las etiquetas HTML <head> y </head> brindan todo tipo de información conocida como metadatos, donde se incluyen títulos, párrafos, enlaces, entre otros. Para incluir metadatos y metatítulos claros en tu código puedes utilizar un generador de metadescripciones; esto hará más sencillo tu proceso de escritura y, además, te ayudará a elevar tu tasa de clickthrough.
4. <title> </title>
Sirve para indicar el título del documento y la forma en que aparecerá en la barra del navegador y en la pestaña en la que esté abierta. No es el título del texto, sino de la página, y se incluye junto a la etiqueta de <head>.
Cómo indicar el título del documento
Las etiquetas HTML <title> y </title> son utilizadas para indicar el título del documento y se componen únicamente por texto.
5. <body> </body>
Las etiquetas HTML que señalan el cuerpo del documento sirven para agregar diversos atributos de color o imagen de fondo de página, color de enlaces, color de texto, entre otros.
Tabla de colores HTML: descarga gratis esta plantilla con 50 gamas cromáticas y elige la correcta para tu sitio web.
Cómo indicar el cuerpo del documento
Una vez que se cierra el contenido con la etiqueta </head>, las etiquetas de <body> y </body> abren y cierran el texto, como si se tratara de los límites del contenido que se muestra en la página web y que puede ver el usuario. Para establecer un símil con un libro, esta etiqueta indica dónde inicia la primera línea y dónde termina la última de una página.
6. <h1> ... <h6>
Con las etiquetas indicas los títulos y subtítulos de un texto, en diferentes tamaños, según su nivel de importancia.
Cómo indicar el título y subtítulo del documento
Las etiquetas pueden ir desde <h1>...</h1> a <h6>...</h6>. El <h1> es el más grande y debería dedicarse al título del texto. En el caso de una de nuestras publicaciones de blog, ese lugar le corresponde al que resaltamos:
Si quieres saber la proporción que hay para cada uno, aquí te dejamos otro ejemplo de cada título, por número:
7. <p> </p>
Con estas etiquetas HTML puedes indicar dónde empieza y termina cada párrafo de texto, para que los bloques de información no aparezcan como una lista larga sin pausas. Es decir, agrega un salto de línea entre párrafos.
Cómo indicar el párrafo del documento
Las etiquetas <p> y </p> sirven para crear los párrafos y dentro de ellas también se indican atributos específicos, como la alineación del texto, ya sea izquierda, derecha, centrada o justificada.
Así lucen las etiquetas de párrafo que inciden en el segundo párrafo. Lo puedes leer en esta nota del diario El País, y es la razón por la que está separado del primero y el tercero:
8. <header>
Se utiliza para definir el encabezado de una página o sección. Normalmente, esta área contiene elementos clave de navegación y marca, como el logotipo, el título del sitio, y un menú de navegación.
Cómo indicar el encabezado
Se coloca al inicio del documento o de una sección específica para que el usuario pueda identificar rápidamente la estructura y propósito de la página. En sitios web modernos, es común que el <header> se mantenga fijo en la parte superior de la pantalla para facilitar el acceso a la navegación desde cualquier parte de la página.
9. <footer>
En una estructura HTML, el <footer> ayuda a organizar la página, proporcionando un cierre claro y estableciendo una ubicación específica para información adicional. Se aplica en la mayoría de las páginas web para brindar un recurso accesible que permita a los usuarios encontrar datos de contacto, enlaces de utilidad o políticas de privacidad de forma rápida.
Cómo indicar el pie de página
Se coloca al final del contenido principal de la página y contiene información relevante pero secundaria, como derechos de autor, enlaces de contacto y redes sociales.
10. <nav>
Agrupa elementos de navegación como enlaces y menús. Usada principalmente para el menú principal de la página, <nav> facilita la organización y accesibilidad de la navegación. Su aplicación es crucial en páginas con múltiples secciones, ya que ayuda a los usuarios a moverse con facilidad. En términos de accesibilidad, también permite a los lectores de pantalla reconocer rápidamente las áreas de navegación y ofrece una estructura clara a los motores de búsqueda, mejorando el SEO.
Cómo agregar el menú principal a una página
La etiqueta <nav> se inserta dentro de <header> o directamente en <body>, dependiendo de la estructura del sitio. Generalmente, contiene una lista de enlaces (<ul><li><a>), que facilita la navegación estructurada en el sitio.
11. <main>
Contiene el contenido principal de la página y se aplica para definir la parte más relevante o única del documento. Este contenido suele incluir artículos, secciones y cualquier elemento específico que refleja el propósito de la página. Su uso es beneficioso tanto para la accesibilidad como para el SEO, ya que permite a los motores de búsqueda y lectores de pantalla identificar rápidamente el contenido central y omitir las áreas de navegación o pie de página en su lectura.
Cómo agregar el menú de navegación en una página
La etiqueta <main> se utiliza solo una vez por página y contiene exclusivamente el contenido principal, excluyendo elementos como encabezados, navegación, formularios de búsqueda y el pie de página.
12. <form>, <input>, <label>
Estas etiquetas se aplican en conjunto para crear formularios interactivos y accesibles:
- <form>: es el contenedor que agrupa todos los elementos del formulario y define cómo y dónde se enviarán los datos. Su aplicación es esencial en sitios que requieren interacción del usuario, como formularios de contacto, registros o encuestas.
- <input>: define campos específicos de entrada, como texto, correos electrónicos o contraseñas. Se usa dentro de <form> para aceptar datos de usuario y se adapta a varios tipos de datos con el atributo type (por ejemplo, text, email, password).
- <label>: mejora la accesibilidad al asociarse con cada campo de <input>. Proporciona una descripción textual que indica al usuario qué información se espera, y también facilita el uso de lectores de pantalla, ya que ayuda a describir claramente cada campo de entrada.
Cómo agregar formularios en una página
13. <font> </font>
Esta etiqueta básica sirve para indicar la fuente que se utilizará en una selección de texto. Por sí sola no funciona, pues necesita atributos y variables que indiquen cuál tipografía será, tamaño y colores.
Cómo indicar la fuente del documento
Las etiquetas de <font> y </font> señalan el tamaño, color o fuente del documento. Por ejemplo, si debes indicar la fuente, la etiqueta se escribe así:
Para que aparezca en otro color, puedes utilizar como variable el código hexadecimal o el RGB, según prefieras. Si te inclinas por uno de los colores básicos, solo escribe su nombre en inglés:
<< Descarga esta plantilla gratuita de códigos de programación para HTML, CSS y JavaScript. >>
Para cambiar el tamaño de la fuente, pero sin marcar que es un título o subtítulo que cambia de tema, puedes elegir entre el 1 y 7. El número base es 3, para que te des una idea:
14. <strong> </strong>
Con estas etiquetas conviertes a negritas el texto señalado para destacar una idea o un concepto.
Cómo indicar texto en negritas del documento
Las etiquetas <strong> y </strong> cumplen esta función, aunque también puedes utilizar: <b> y </b>, que se refieren al término «bold», como lo hacen los creadores de tipografías.
15. <em> </em>
Similar a las etiquetas para indicar negritas en el texto, estas sirven cuando necesitas convertir en cursivas una porción de texto.
Cómo indicar texto en cursiva del documento
Las etiquetas <em> y </em> cumplen esta función. Otra variante es <i>...</i>, pero la primera se utiliza más.
16. <u> </u>
Estas etiquetas HTML sirven para subrayar un texto que no tendrá hipervínculo.
Cómo subrayar texto del documento
Las etiquetas más utilizadas son <u>...</u>.
17. <sub> </sub>
Estas etiquetas son funcionales sobre todo al compartir un texto que tiene llamados de citas a pie de página, ya que el subíndice ayuda a enumerarlas correctamente, o cuando se escribe un artículo científico. Con esta etiqueta podrás alinear el llamado en la parte baja de la línea de texto a la que acompaña.
Cómo agregar un subíndice al documento
Si requieres definir un fragmento de texto haz uso de las etiquetas <sub> y </sub>.
18. <sup> </sup>
Estas etiquetas muestran un fragmento de texto que, por razones tipográficas, debe mostrarse más alto, pero más pequeño que el tramo principal del texto general. A esto se le conoce como superíndice. También se usa para agregar una marca que lleve a una nota a pie de página, como una aclaración o un dato legal de la información que compartes.
Cómo agregar un superíndice al documento
Si necesitas agregar un dato legal o cualquier otro de los elementos destacados arriba, necesitas las etiquetas <sup> y </sup> para que el llamado aparezca, más pequeño que el texto al que acompaña, en la parte superior del renglón.
Por ejemplo, este artículo de Wikipedia sobre el Apollo 11 tiene las citas marcadas como superíndices, y en el código de la página aparece así la etiqueta:
19. <br>
Esta etiqueta es tu aliada para indicar que deseas agregar un salto de línea, ya que no le agrega formato a un texto. No se necesita señalar el cierre, solo la apertura. Es muy útil cuando deseas que la línea se corte en cualquier punto, de manera que, si lo considera necesario, el navegador agregará una barra de deslizado vertical.
Cómo agregar un salto de línea al documento
El periódico argentino Página 12 utiliza la etiqueta <br> en uno de sus artículos, para que el lector pueda visualizar un salto de párrafo más amplio.
20. <nobr>
Si, por el contrario, quieres que el contenido se extienda horizontalmente, sin romper líneas de texto, indícalo con esta etiqueta al inicio. Así, el lector podrá avanzar hacia la derecha gracias al cursor que el navegador agregará de forma horizontal.
Cómo impedir agregar un salto de línea al documento
La etiqueta <nobr> cumple esta función, pero ,debido a que no es tan amigable para la lectura, te recomendamos que no la utilices mucho.
21. <P align="..."> </p>
La combinación de esta esta etiqueta junto con un atributo y variable te permite alinear tu párrafo en la dirección que prefieras. Solo debes cambiar la variable, que está entre comillas, según lo que quieras: left (izquierda), right (derecha), center (al centro) o justify(para justificar el texto).
Cómo alinear párrafo del documento
Las siguientes etiquetas <P align="..."> y </P> te servirán para alinear tu párrafo: solo debes señalar hacia dónde lo quieres. Como puedes intuir, está pensada para párrafos completos. Pero cuando desees hacerlo solo para líneas de texto, de forma independiente, cambia la P por DIV.
22. <ul> </ul>
Si necesitas agregar una lista que solo tendrá viñetas, es decir, que no tiene que enumerarse, utiliza esta etiqueta.
Cómo crear listas en el documento
Las etiquetas <ul> y </ul> harán que lo que escribas entre los elementos (que están entre los signos) se acompañe por un punto a la izquierda.
23. <ol> </ol>
En cambio, si quieres que los elementos de la lista aparezcan enumerados en orden ascendente, esta es la etiqueta correcta.
Cómo crear listas numeradas en el documento
Al igual que el ejemplo anterior, solo haz uso de las etiquetas HTML de <ol> y </ol> y obtendrás listas con numeración.
24. <li> </li>
En contexto con el ejemplo anterior, cada uno de los elementos de una lista debe escribirse con una etiqueta especial, no importa si serán numerados o no.
Cómo listar elementos en el documento
En un artículo de nuestro blog donde se mencionan ideas en lista, hacemos uso de las etiquetas <li> y </li>.
25. <a> </a>
Para agregar hipervínculos que llevan a otros documentos, hay una etiqueta general que indica al navegador que, cuando se haga clic al enlace, este debe abrirse en la misma ventana.
Cómo agregar hipervínculo al documento
La etiqueta <a href="destino"> y su cierre </a> cumplen este objetivo. «Destino» es el enlace a donde llevará a los visitantes, y los puntos suspensivos son el texto que se convertirá en el hipervínculo.
El código de una página de Buzzfeed nos indica dónde agregaron un enlace y sobre cuál texto:
Si quieres que el enlace se abra en una ventana nueva, toma este modelo: <a href="destino" target="_blank">...</a>
Por supuesto, además de las páginas de otros que deseamos vincular, existen otros elementos externos que pueden enlazarse en tus contenidos, como correos y servidores FTP. También están los locales (dentro del mismo directorio) o los que se conocen como ancla. Estos últimos son muy útiles para leer un texto amplio, con diferentes secciones a las que se puede «brincar» haciendo clic en una lista de títulos y subtítulos, en lugar de mover el cursor durante horas.
26. <img>
Hay una etiqueta HTML muy básica que te ayuda a incluir imágenes en tu documento, con la cual también podrás agregar ciertos atributos para una mejor experiencia de usuario.
Cómo agregar imágenes al documento
La etiqueta <img> es la que debes utilizar, pero junto con ella también debes agregar el atributo src («source», u «origen» en español), porque es el que indica la ruta en donde se encuentra la imagen. Esta puede estar en el mismo directorio HTML que tu texto o en una URL. Te recomendamos que sea la primera opción, porque al elegir una que está alojada de manera externa pondrás a tu servidor a buscar el enlace cada vez que alguien abra la página.
Así que, siguiendo el ejemplo de una imagen que está dentro del mismo directorio HTML, tendría que escribirse así:
Si está en un subdirectorio, se indica de esta manera:
Y cuando se trata de una URL:
Este es un ejemplo real que corresponde a dos imágenes que aparecen en otro artículo de HubSpot:
Al igual que la etiqueta HTML <br>, no necesita cierre.
Lista de las etiquetas más usadas en HTML y para qué sirven
|
Etiqueta |
Para qué sirve |
| <!doctype> | Indica el lenguaje del texto |
| <html> </html> | Define el documento entero |
| <head> </head> | Indica información general |
| <title> </title> | Inserta el título del documento |
| <body> </body> | Señala el cuerpo del documento |
| <h1> ... <h6> | Muestra títulos y subtítulos |
| <p> </p> | Indica los párrafos |
| <header> </header> | Define la cabecera |
| <footer> </footer> | Define el pie de página |
| <nav> </nav> | Crea la navegación |
| <main> </main> | Contiene el menú principal |
| <form> <input> <label> | Crea y personaliza formularios |
| <a> </a> | Agrega hipervínculos |
| <button> | Crea un botón interactivo |
| <font> </font> | Refiere la fuente tipográfica |
| <strong> </strong> | Texto en negritas |
| <em> </em> | Texto en cursivas |
| <u> </u> | Subraya el texto |
| <sub> </sub> | Indica un subíndice |
| <sup> </sup> | Agrega un superíndice |
| <br> | Añade un salto de línea |
| <nobr> | Impide el salto de línea |
| <p align="..."> </p> | Alinea el párrafo |
| <ul> </ul> | Crea listas en viñetas |
| <ol> </ol> | Pone listas numeradas |
| <li> </li> | Lista elementos |
Las etiquetas de HTML tienen su lógica, si lo revisas bien. Podría decirse que la base está en aprender un par de atajos y listo: ya puedes editar y mejorar los aspectos más importantes de tus páginas web sin caer en el pánico. Si quieres aprender más sobre este lenguaje, visita «¿Qué es HTML y cómo utilizarlo?».
¿Estás pensando crear tu propio sitio? Anímate y crea tu página web gratis con HubSpot, sin necesidad de conocimientos de programación.
Preguntas frecuentes sobre las etiquetas HTML
A continuación encontrarás algunas de las preguntas más comunes que recibimos en la comunidad de HubSpot sobre este tema:
Cuál es la diferencia entre HTML y otros lenguajes de marcado o programación web
HTML (HyperText Markup Language) es un lenguaje de marcado que se usa para estructurar el contenido de una página web, organizando elementos como texto, imágenes, y enlaces en un documento; mientras que el CSS (Cascading Style Sheets) se encarga del estilo y diseño visual de esos elementos, como colores, fuentes y márgenes; y el JavaScript añade interactividad y funcionalidad avanzada a la página, como animaciones o validación de formularios.
En resumen, HTML organiza y define la estructura de la página, CSS da estilo, y JavaScript añade dinamismo. ¿Quieres profundizar más? Obtén gratis esta guía básica sobre HTML y CSS para marketers.
Cómo afectan las etiquetas HTML al SEO de una página web
Las etiquetas HTML ayudan a los motores de búsqueda a entender la estructura y el contenido de la página. Por ejemplo, etiquetas como <title> y <meta> definen el título y descripción de la página que aparecen en los resultados de búsqueda. Los encabezados <h1> a <h6> jerarquizan la información, siendo <h1> el más importante, lo que permite a los motores de búsqueda identificar los temas principales.
Además, usar etiquetas de imágenes como <img> con atributos alt adecuados mejora la accesibilidad y el SEO, ya que permite que los motores de búsqueda “lean” y clasifiquen las imágenes de manera efectiva.
Cuáles son las mejores prácticas para estructurar HTML de manera limpia y organizada
Para estructurar HTML de manera limpia y organizada, es importante mantener una indentación clara que facilite la lectura del código y usar etiquetas semánticas como <header>, <footer>, <main> y <section> para hacer el contenido más comprensible y accesible tanto para los desarrolladores como para los motores de búsqueda. Incluir comentarios (<!-- comentario -->) puede ser útil para explicar secciones específicas, especialmente en códigos extensos, permitiendo una edición futura más sencilla.
Además, es esencial cerrar correctamente todas las etiquetas para evitar problemas de interpretación y mantener una estructura coherente, mejorando así la legibilidad y el mantenimiento del documento HTML.
