En el universo HTML existen numerosas etiquetas que se clasifican según sus funciones. En este post, abordaremos las etiquetas de contenido incrustado en HTML. Para esto, agruparemos algunas de las etiquetas de incrustación usadas con mayor frecuencia y así obtener un panorama general. Además de hablarte de las etiquetas de contenido incrustado en HTML, haremos un breve repaso sobre los diferentes tipos de etiquetas que pueden encontrar en HTML.
Tipos de etiquetas en HTML
Para empezar, repasemos el concepto básico de HTML. Lo primero que debemos decir es que sus siglas se expanden en HyperText Markup Language, es decir, Lenguaje de Marcado de Hipertexto. En este sentido, HTML es un lenguaje de marcado que permite estructurar y organizar el texto de forma más adecuada y legible.
Las marcas usadas se llaman etiquetas y son el medio mediante el que se organiza todo un documento HTML. Como hemos mencionado al principio, son tantas las etiquetas (más o menos 192 en HTML.5) que existen diferentes formas de organizarlas según sus funciones.
En este sentido algunos de los tipos de etiquetas HTML más comunes son:
- Etiquetas para metadatos: estas permiten incluir todos aquellos datos que tenemos sobre los datos. Por ejemplo, las etiquetas <meta> y <link>.
- Etiquetas para agrupación de contenido: la principal función de estas etiquetas es organizar el contenido en ciertas partes, como párrafos o listas. En este grupo destacan las etiquetas <p>, <ul>, <ol> y <div>.
- Etiquetas para la creación de tablas: tal como su nombre indica, este tipo de etiquetas permite la creación de tablas a través de etiquetas como <table> </table>, que son las correspondientes etiquetas de apertura y cierre entre las que se contendrá el inicio y fin de la representación por medio de tablas. Otras de las etiquetas aquí agrupadas son <tbody> y <caption>.
- Etiquetas semánticas: recuerda que al hablar de semántica en HTML estamos hablando de una mejor estructuración de la información en los documentos HTML con el objetivo de una total comprensión del contenido para los motores de búsqueda, navegadores y otros softwares. Encaminadas en este fin, encontramos etiquetas como <strong>, que recalca la importancia de ciertas palabras, o la etiqueta <a>, que introduce algunos hiperenlaces.
Algunas etiquetas de contenido incrustado en HTML
En cuanto a las etiquetas de contenido incrustado en HTML, a continuacíon te hablamos de algunas de las más usadas e importantes:
<iframe>
Esta etiqueta permite la inserción de otros documentos HTML dentro de un documento HTML principal. Podríamos afirmar que es una de las etiquetas más nombradas en todo curso o página web sobre HTML y esto se debe a que algunos desarrolladores la prefieren y otros la evitan. Si bien <iframe> puede resultar de gran ayuda, un uso excesivo de la misma puede afectar el rendimiento de la página, ya que consume memoria y otros recursos.
<img>
Por su parte, img posibilita insertar todo tipo de imagen en nuestro sitio web. Es una de las llamadas etiquetas vacías, así que no posee la estructura de apertura y de cierre. Eso sí, debes tener presente que esta etiqueta requiere del atributo src para su correcto funcionamiento, ya que este contiene la información de la url donde reside la imagen.
<video>
En cuanto a la etiqueta vídeo, queda claro que nos permite insertar y reproducir vídeos en el interior de la página web. Ten presente que es una de las etiquetas que encuentra algunos inconvenientes de compatibilidad entre los diferentes motores de búsqueda. Sin embargo, esto ha ido mejorando desde la actualización en HTML5, que permite la reproducción sin reproductores o activación de plugins.
<audio>
Esta es otra de las etiquetas de contenido incrustado en HTML de mayor uso. Es la que permite la reproducción de archivos de audio. Comparte con <video> la actualización en HTML5 que la deja de libre de los plugins y los reproductores. Al igual que <img>, requiere del atributo src como un indispensable que indica la fuente donde reside el archivo.
<source>
Relacionada con las etiquetas <video> y <audio> encontramos la etiqueta <source>. Su objetivo es facilitar la inserción de diferente contenido multimedia en variados formatos y así evitar la incompatibilidad con uno u otro explorador web. Esta etiqueta, al igual que <img>, es otra de las etiquetas de contenido incrustado en HTML vacías.
<svg>
Gracias a esta etiqueta es posible pintar o incluir en nuestro sitio web una imagen tipo SVG (Gráficos Vectoriales Escalables), es decir, imágenes vectorizadas.
A manera de conclusión
Como puedes ver, las etiquetas de contenido incrustado en HTML son variadas e importantes. Aunque HTML es una de las herramientas básicas en el desarrollo web, esta es solo una pequeña parte de todo lo que debes aprender para dominarla. Para ayudarte a alcanzar esta meta, desde KeepCoding te invitamos a revisar nuestros bootcamps disponibles, con los que en pocos meses y de la mano de los mejores profesionales te enseñaremos todo lo que necesitas para convertirte en un experto dentro de la rama del sector IT que más te interese. ¿A qué esperas? ¡Apúntate ya y continúa aprendiendo!
