👩🏻‍💻 Etiquetas HTML: ¿Qué son y para qué sirven? [2021]
Etiquetas HTML: el punto de partida más accesible en la programación web

Etiquetas HTML: el punto de partida más accesible en la programación web

Última actualización 20 de Mayo del 2021Tiempo de lectura: 7 min.

Andrea Flores

Las etiquetas html son quizás uno de los puntos fundamentales para comprender la programación web. Si te preguntas: ¿qué son las etiquetas? ¿Qué son los códigos HTML? No te preocupes, has llegado al lugar correcto, puedes dejar de dar vueltas por Internet. 😉

En la nota de hoy conocerás todo acerca de las etiquetas básicas de HTML, qué son, cómo se estructuran, cuándo debes utilizarlas y, sobre todo, cuáles son las principales etiquetas HTML que debes conocer. 

Al comprender este tema, podrás conocer cómo funciona la estructura básica de una página web para crear las tuyas. Además, al final de la nota, te dejamos un Bonus con un listado con más de 100 códigos HTML totalmente gratis. ¿Qué te parece? 

Prepárate un café y comencemos. 👩🏻‍💻

¿Qué es el lenguaje HTML? 

Para comprender mejor todo lo que comprenden las etiquetas HTML, comencemos por definir lo que es el lenguaje HTML. Así, no caeremos en ambigüedades y todo quedará más claro, ¿qué te parece? 

Entonces, ¿qué es HTML? Estas son siglas en inglés para Hyper Text Markup Language, lo que en español comprenderemos como lenguaje de marcas de hipertexto. 

En palabras de nuestro profesor Sergio Agamez Negrete del curso Introducción al Desarrollo Web front end: HTML y CSS desde cero: 

“HTML es un lenguaje que se utiliza para generar la estructura de un documento que después es leído y renderizado por un navegador. Se basa en el uso de marcas y etiquetas HTML.”

En 1993, Tim Bernes-Lee publicó inicialmente una primera versión de HTML, la cual constaba de 18 códigos de hipertexto. Desde entonces, el lenguaje HTML se ha desarrollado con los años hasta obtener última versión: HTML5, que fue lanzada en el 2014. 

¿Cuáles son las diferencias entre HTML y HTML5?  En pocas palabras, HTML5 ofrece a los usuarios un lenguaje de programación HTML más estable, pues está totalmente actualizado y puede funcionar tanto en computadoras como en dispositivos móviles sin problemas. 

pantalla-portatil-lenguaje-webImagen: Unsplash

¿Por qué es importante el lenguaje HTML? 

Desde que la compañía World Wide Web, la cual se encarga de definir los estándares y recomendaciones de la web, respaldó la tercera versión de HTML en 1997, se le conoce como un estándar para todas las páginas digitales. 

¿Sabías que el sitio web promedio comprende varias páginas HTML? Así es, las páginas de inicio, de preguntas frecuentes, de contacto y de información básica, cuentan con un documento de HTML. 

Por lo tanto, si quieres comprender cómo funciona la programación web desde lo más básico, es necesario que sepas todo acerca del lenguaje HTML así como lo que comprenden sus etiquetas. Más adelante hablaremos de ello. 🤓

Estructura básica de HTML

Para identificar si el documento que estás visualizando sigue una estructura HTML, deberás conocer cuál es la estructura básica de una página elaborada con este lenguaje de programación. 

Tranquilo que, de hecho, es muy sencillo. La estructura es la siguiente: 

<html> 

<head> 

</head>

<body>

</body>

</html>

Toda página web HTML empieza con la etiqueta <html> y termina con </html>. Esta es la manera más rápida de identificar. 

El comando <head> … </head>, también conocido como cabecera en html o header, comprende todo lo relacionado al título, scripts y estilos vinculados. 

El comando <body> … </body> reúne todo el contenido general, es decir, todos los párrafos que quieras incluir como información. 

Los etiquetas HTML más elaboradas que irán dándole forma a tu sitio web te las describiremos en breves instantes. 🤩

lenguaje-programacion-webImagen: Unsplash

Ventajas y desventajas de HTML

Si bien el lenguaje de programación HTML ha sido actualizado y hoy en día nos ofrece una experiencia más eficiente, también podemos encontrar algunos puntos en contra. 

A continuación, conocerás los puntos por los cuáles te conviene trabajar con HTML y las razones por las que este lenguaje podría no ser “el mejor”. 

Comencemos con los puntos a favor: 

  • El formato HTML es ampliamente utilizado por una gran comunidad de programadores. 
  • La estructura HTML se ejecuta de forma automática en todos los navegadores web. 
  • La programación HTL es de código abierto, por lo tanto, totalmente gratis. 
  • Está respaldada por una compañía de prestigio mundial. 
  • Se integra fácilmente con lenguajes backend. 

Ahora, ahondemos un poco en los puntos en contra del lenguaje de hipertexto: 

  • El lenguaje de hipertexto solo permite diseñar páginas web estáticas. Si quieres agregar funciones dinámicas debes recurrir a otros lenguajes de programación. 
  • Toda página web que esté elaborada bajo la estructura básica de HTML debe crearse por separado.
  • Algunos navegadores implementan lentamente los nuevos códigos HTML en páginas web.
  • Existe cierta incertidumbre en el procesamiento en navegadores muy antiguos: algunas de las etiquetas HTML más recientes no se muestran. 

A pesar de los aspectos negativos del lenguaje HTML, sigue siendo importante que conozcas cómo programar en HTML para poder abrirte paso en el mundo de las páginas web.

Para contrarrestar los puntos en contra, puedes considerar, posteriormente, estudiar otros lenguajes de programación para complementar algunas funcionalidades limitadas del HTML. 😉

 

Todo sobre las etiquetas HTML

Muy bien, es hora de conocer más acerca de este lenguaje de programación de la mano de su principal componente: las etiquetas HTML. 

Las etiquetas HTML son fragmentos de texto que se incluyen dentro de los signos “<” y “>”, estas palabras usualmente son en inglés y cada una tiene usos específicos. 

Es decir, cada palabra le da una indicación al ordenador para desarrollar la acción indicada por el programador. Por ejemplo, las etiquetas HTML le dan formato y estructura al contenido de toda página web. 

Según Hubspot, las etiquetas HTML, también llamadas códigos o elementos HTML, son un estándar adoptado por todos los desarrolladores para facilitar la interpretación de los elementos de una página web por parte de los navegadores. 

¿Para qué sirven las etiquetas HTML?

En pocas palabras: para hacerle la vida más fácil a los programadores web. Con las etiquetas HTML, la construcción de una página web puede entenderse casi de inmediato. 

Los códigos HTML están compuestos por la descripción de los elementos que la componen, por ejemplo, si quieres insertar un título a la página que estás elaborando bastará con digitar: 

  • <title> el texto que quieres resaltar </title>

Así con el resto de componentes de una página web, por ejemplo: <body>, <head>, entre otros. Como puedes ver, no son palabras complejas. Por ello, algunos creen que el lenguaje HTML, para principiantes, es la opción ideal. 

Con un poco de práctica y memoria, pues son muchos códigos HTML los que intervienen en una página, podrás dominar este lenguaje de programación. Te será muy sencillo insertar imágenes, videos, enlaces, documentos y hasta crear formato para tus contenidos. 

Partes de una etiqueta de HTML

Antes de conocer cuáles son las etiquetas básicas de HTML, debes comprender cuáles son las partes de estos códigos de hipertexto. 

Las etiquetas HTML tienen 4 componentes: 

1. Elemento

Este es el nombre de la etiqueta, se debe hacer uno de apertura y cierre. De esta manera: 

  • (apertura) <elemento> …  </elemento> (cierre). 

La palabra “elemento” puede reemplazarse según lo que quieras incorporar a tu página con el código de HTML, por ejemplo: “title” para título, “body” para insertar un texto, “p” para iniciar un párrafo. 

  • No olvides lo siguiente: en la etiqueta de cierre siempre debes incluir el símbolo “/” después de este “<”. 

2. Atributo 

Este componente de las etiquetas HTML diferencia al “elemento” y le otorga características para hacerlo destacar como tamaño, color y tipografías. Si estás buscando códigos HTML para decorar tu web, lo más probable es que estos tengan atributos. 

Deben escribirse siempre antes del signo “=”, al costado del elemento de la etiqueta de apertura. Por ejemplo, para cambiar el tipo de letra debes ingresar el comando de esta manera:

  • <font face=“times new roman”> texto con tipografía Times New Roman </font>

Aquí el atributo sería la palabra “face”. 

3. Contenido

Este es el texto que se encuentra entre los elementos y atributos de las etiquetas HTML. 

4. Variable

También conocida como la característica del atributo de las etiquetas HTML. Puede ser el color, tamaño y tipo de letra escogido por el programador. 

Se escribe siempre entre comillas después del signo “=” que indica un atributo. Por ejemplo, en nuestro ejemplo anterior: 

  • <font face=”times new roman”> la variable sería Times New Roman. 

Etiquetas básicas en HTML

Llegado a este punto conoces qué es una etiqueta y cuáles son sus partes. Por lo tanto, es momento de que conozcas cuales son los códigos básicos de HTML. 

Para empezar, existen dos tipos de etiquetas: de bloque y en línea. 

Etiquetas de bloque 

Ocupan todo el espacio disponible y comienzan desde una línea nueva en el documento. 

Algunos ejemplos, además de los tan conocidos <html>, <head> y <body>:

  • <p> </p> para limitar párrafos. 
  • <h1> </h1> para señalar el encabezado de nivel más alto. 
  • <h6> </h6> para señalar el encabezado de nivel más bajo. 

Etiquetas en línea

Solo ocupan el espacio necesario y no comienzan una línea en el documento. Se utilizan comúnmente para dar formato a los niveles de cada bloque.

Algunos ejemplos son los siguientes: 

  • Para lograr negrita en HTML: <strong> </strong> o <b> </b>
  • Para lograr cursiva en HTML: <em> </em> o <i> </i> 
 

Principales etiquetas de HTML

Ahora que sabes las etiquetas básicas en HTML, llegó el momento de compartir contigo cuáles son los códigos HTML más importantes. 

¡Toma nota! De esto dependerá tu página web. 🤓

Para los aspectos básicos de tu documento en HTML debes considerar algunas que ya te mencionamos a lo largo del artículo, pero también lo haremos ahora por si ya lo has olvidado. ¿Adivinas cuáles son esas etiquetas HTML?

📌 <!doctype> 

Se escribe solo al inicio y hace referencia al lenguaje en el que está configurado el texto, si será en HTML sería: <!doctype html>

📌 <html> … </html> 

Define todo el documento de una página se abre al inicio y se cierra en la última línea. 

📌 <head> … </head> 

Comprende toda la información del documento que no puede ver el usuario final. Por ejemplo, el nombre de la pestaña de la página web, información legal, etc. 

📌 <p> … </p> 

Determina el inicio y fin de cada párrafo para que en tu página web el texto no aparezca en solo un bloque. 

Siguiendo con la lista de códigos HTML, para dar formato a los caracteres debes tener en cuenta las siguientes: 

📌 <font> … </font> 

Con esta etiqueta el programador puede indicar la fuente en la que se proyectará el texto. Es importante mencionar que, este código no funciona por sí solo, siempre necesitará atributos y variables. 

📌 <u> … </u> 

Con esta etiqueta de hipertexto podrás subrayar las palabras que desees dentro de tus párrafos. 

Si te interesa conocer cómo cortar líneas de texto, el comando en HTML que debes saber es el siguiente: 

📌 <br> 

Solo se inserta la apertura y es ideal para indicar un salto de párrafo más amplio. 

Otros de los códigos básicos de HTML son los utilizados para insertar imágenes: 

📌 <img> 

Este debe incluir siempre el atributo “src” que significa “source” u “origen” seguido por la ruta en donde se encuentra la imagen. Solo se utiliza la apertura, es decir, no necesitas incluir </img>. 

  • Por ejemplo: <img src=“nombredelaimagen.jpg”>

👉 Una recomendación: procura siempre tener la imagen dentro del directorio en HTML para que el servidor no tenga problemas en encontrarla y la UX sea favorable. 

Con estos códigos HTML para páginas web ya tienes las nociones básicas para comenzar. Sin embargo, existen muchos más que, sin duda, deberías conocer. ¿Ves cómo no son tan difíciles de comprender y memorizar? 

Estamos seguros que por lo menos alguno de los ejemplos de código HTML que te compartimos se quedó en tu mente. 😉

portatil-comandos-htmlImagen: Unsplash

Bonus: Descarga 100 etiquetas HTML gratis

Para ayudarte a profundizar en el tema de los códigos de hipertexto, hemos elaborado esta lista con 100 etiquetas HTML para ti. Al familiarizarte con ella, estarás dando tus primeros pasos para saber cómo programar en HTML como un profesional. 

Además, conocerás algunas propiedades CSS para que amplíes tus conocimientos en la programación web y puedas complementar las funciones del HTML. Así, podrás realizar proyectos más competentes. ¿Sabes cómo se relaciona CSS con HTML?

Recuerda que el lenguaje HTML, por recomendación de los expertos, debe estar acompañado por otros lenguajes de programación. 

lista-etiquetas-html-css

➤ Descarga nuestro Excel con la lista de etiquetas HTML y propiedades CSS

Llegamos al final del artículo y ahora sabes qué es un código de hipertexto o HTML. ¡Felicidades! El mundo de la programación web sigue evolucionando y cada vez se necesitan más profesionales que estén especializados en el tema.

Si te ha interesado el tema y quieres ampliar tus conocimientos, no dudes en revisar nuestros cursos de Desarrollo Web y Tecnología. Para conocer más acerca de los temas tratados en esta nota te recomendamos nuestro curso de Desarrollo front-end: HTML y CSS desde cero.

¿Estás listo para crear las mejores páginas web HTML? ¡Mucha suerte! 🤩

También podría interesarte