Quizá muchas personas piensan que crear o modificar el contenido de una página web es un trabajo demasiado complicado. En realidad, existen muchas opciones para crear sitios web fácilmente, pero nunca está de más tener conocimientos básicos sobre el desarrollo web y un tema crucial a conocer son las etiquetas HTML.

Si esta es la primera vez que indagas un poco al respecto, creamos una guía sencilla con todo lo básico para el sitio web de tu empresa, producto, servicio o blog.

Guía Gratis

Guía básica sobre HTML y CSS para marketers

Cuéntanos un poco de ti para acceder a la guía

Es importante mencionar que el HTML no se considera un lenguaje de programación, pues no crea funciones dinámicas. Sin embargo, con el apoyo de las etiquetas HTML, los desarrolladores pueden configurar diversas estructuras para sus sitios web, por ejemplo: secciones, tablas, párrafos, enlaces, atributos y mucho más.

Actualmente existen muchas etiquetas HTML disponibles que te pueden ayudar a crear varios aspectos de tu sitio web. No obstante, 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.

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 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 es bastante accesible y sencilla de aprender, por lo que no necesitas ser un experto o experta en desarrollo web para insertar imágenes, videos, enlaces, documentos o darle 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 se modifica por dicha indicación. Si se trata de una imagen, un salto de línea o video no es necesario indicar cierre, pero eso lo hablaremos un poco más 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 mayores rasgos los 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.

Veamos las etiquetas HTML que debes conocer.

1. Tipo de lenguaje

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. 

Ejemplo de etiqueta HTML para 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 que procese el documento. 

Principales etiquetas de HTML: tipo de lenguaje

2. Raíz del documento 

Este tipo de etiquetas HTML definen el documento entero de una página y el resto de los elementos que compondrán un sitio web descenderá de ellas. 

Ejemplo de etiqueta HTML para indicar la raíz del documento 

Estas son una de las etiquetas HTML más familiares: <html>...</html> y si bien la primera puede ser implícita, se requiere para abrir y cerrar cualquier documento en HTML. 

Principales etiquetas de HTML: raíz del documento

3. Información general del documento 

Dentro de estas etiquetas se encuentra 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, metadatos de la autoría o licencia.

Ejemplo de etiqueta HTML para 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. 

Principales etiquetas de HTML: información del documento

4. Título del documento 

Sirven 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>.

Ejemplo de etiqueta HTML para indicar el título del documento 

Las etiquetas HTML <title> y </title> son las utilizadas para indicar el título del documento y se componen únicamente por texto. 

Principales etiquetas de HTML: título del documento

5. Cuerpo del documento 

Las etiquetas HTML para indicar 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. 

Ejemplo de etiqueta HTML para 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 poner 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.

Principales etiquetas de HTML: cuerpo del documento

 

<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >> 

 

6. Títulos y subtítulos de un texto

Con las etiquetas indicas los títulos y subtítulos de un texto, en diferentes tamaños, según su nivel de importancia. 

Ejemplo de etiqueta HTML para 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:

Ejemplo de cómo luce para un visitante una etiqueta de HTML h1

Si quieres saber la proporción que hay para cada uno, aquí te dejamos otro ejemplo de cada título, por número:

Muestra de cómo escribir y alinear títulos con etiquetas HTML y cómo lucen en la página web

7. Párrafo de texto

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.

Ejemplo de etiqueta HTML para indicar el párrafo del documento

Las etiquetas <p> y </p> sirven para crear los párrafos y dentro de ellas también pueden indicarse atributos específicos como la alineación del texto, ya sea izquierda, derecha, centrada o justificada. 

Así lucen las etiquetas de párrafo para el segundo que 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:

Principales etiquetas de HTML: párrafo

8. Fuente del texto

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.

Ejemplo de etiqueta HTML para indicar la fuente del documento

Las etiquetas de <font> y </font> indican el tamaño, color o fuente del documento. Por ejemplo, si debes indicar la fuente, la etiqueta se escribe así:

Principales etiquetas de HTML: fuente

Para que aparezca en otro color, puedes utilizar como variable el código hexadecimal o el RGB, como prefieras. Si te inclinas por uno de los colores básicos, solo escribe su nombre en inglés:

Principales etiquetas de HTML: color de fuente

Para cambiar el tamaño de la fuente, pero sin indicar 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:

Principales etiquetas de HTML: tamaño de fuente

9. Texto en negritas

Con estas etiquetas conviertes a negritas el texto señalado, para resaltar una idea o un concepto.

Ejemplo de etiqueta HTML para indicar texto en negritas del documento

Las etiquetas <strong> y </strong> cumplen esta función, aunque también puedes utilizar estas: <b> y </b>, que se refieren al término «bold», como lo hacen los creadores de tipografías. 

Principales etiquetas de HTML: negritas

10. Texto en cursiva

Similar a las etiquetas para indicar negritas en el texto, estas sirven cuando necesitas convertir en cursivas una porción de texto. 

Ejemplo de etiqueta HTML para indicar texto en cursiva del documento

Las etiquetas <em> y </em> cumplen esta función. Otra variante es <i>...</i>, pero la primera es más utilizada.

Principales etiquetas de HTML: cursiva

11. Subrayar texto

Estas etiquetas HTML sirven para subrayar un texto que no tendrá hipervínculo. 

Ejemplo de etiqueta HTML para subrayar texto del documento

Las etiquetas más utilizadas son <u>...</u>. 

Principales etiquetas de HTML: subrayar texto

12. Subíndice

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.

Ejemplo de etiqueta HTML para agregar un subíndice al documento

Si requieres definir un fragmento de texto haz uso de las etiquetas <sub> y </sub>. 

Principales etiquetas de HTML: subíndice

13. Superíndice

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 sobre la información que compartes.

Ejemplo de etiqueta HTML para 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:

Principales etiquetas de HTML: superíndice

14. Salto de línea

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 indicar el cierre, solo la apertura, y 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.

Ejemplo de etiqueta HTML para 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. 

Cómo luce para el lector la etiqueta de HTML br

15. Impedir salto de línea

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.

Ejemplo de etiqueta HTML para 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.

Principales etiquetas de HTML: impedir salto de línea

16. Alinear párrafo

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).

Ejemplo de etiqueta HTML para alinear párrafo del documento

Las siguientes etiquetas <P align="..."> y </P> te servirán para alinear tu párrafo: solo debes indicar hacia dónde lo quieres. Como puedes intuir, está pensada para párrafos completos. Pero cuando desees hacerlo solo con líneas de texto, de forma independiente, cambia la P por DIV.

Principales etiquetas de HTML: alinear párrafo

17. Listas

Si necesitas agregar una lista que solo tendrá viñetas, es decir, que no tiene que enumerarse en orden, utiliza esta etiqueta.

Ejemplo de etiqueta HTML para crear listas en el documento

Las etiquetas <ul> y </ul> harán que lo que escribas de contenido entre los elementos (que están entre los signos) se acompañe por un punto a la izquierda.

Principales etiquetas de HTML: listas

18. Listas numeradas 

En cambio, si necesitas que los elementos de la lista aparezcan enumerados en orden ascendente, esta es la etiqueta correcta. 

Ejemplo de etiqueta HTML para 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. 

Principales etiquetas de HTML: listas numeradas

19. Elementos listados 

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. 

Ejemplo de etiqueta HTML para 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>.

Principales etiquetas de HTML: elementos listados

20. Hipervínculo

Para agregar hipervínculos que llevan a otros documentos, existe una etiqueta general que indica al navegador que, cuando se haga clic al enlace, este se abra en la misma ventana.

Ejemplo de etiqueta HTML para 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:

Principales etiquetas de HTML: hipervínculo

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, que tiene 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.

21. Imágenes

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. 

Ejemplo de etiqueta HTML para 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í:

Principales etiquetas de HTML: imágenes

Si está en un subdirectorio, se indica de esta manera:

Principales etiquetas de HTML: imagen en subdirectorio

Y cuando se trata de una URL: 

Principales etiquetas de HTML: URL de imagen

Este es un ejemplo real que corresponde a dos imágenes que aparecen en otro artículo de HubSpot:

Ejemplo de cómo insertar la etiqueta de HTML para imágenes, img, en una página web

Al igual que la etiqueta HTML <br>, no necesita cierre.

Las etiquetas de HTML tienen bastante lógica, si lo revisas bien. Podría decirse que la base está en aprenderse 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?».

Cómo usar HTML y CCS para mi página web
 HTML CSS

Publicado originalmente el Aug 8, 2022 8:45:00 AM, actualizado el 20 de enero de 2023

Topics:

HTML