Tipos de etiquetas HTML

Autor: | Última modificación: 8 de febrero de 2024 | Tiempo de Lectura: 4 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿Sabes cuáles son las etiquetas de html más usadas?

En este artículo queremos contarte cuáles son los principales tipos de etiquetas HTML, ya que este es uno de los temas indispensables para que inicies tu recorrido en el diseño web.

En primer lugar, nos centraremos en las definiciones de HTML (HyperText Markup Language), etiquetas, elementos y atributos HTML; luego, mencionaremos los tipos de etiquetas HTML más importantes y sus respectivos usos, así como los codigos de html y su funcion

Breve introducción a HTML

Antes de hablar de los tipos y cuales son las etiquetas html , es importante repasar unos conceptos básicos de HTML:

¿Qué es HTML?

Para entender un poco los tipos de etiquetas de html y para que sirven las etiquetas html, debemos entender de dónde proviene este lenguaje.

HTML es un lenguaje de marcado fundamentado en códigos o marcas que organizan y estructuran el texto para hacerlo legible. Dicho lenguaje se expresa a través de etiquetas. Sus orígenes se remontan a principios de la década de los 90 y, a lo largo del tiempo, ha tenido diferentes cambios y evoluciones que garantizan su vigencia.

¿Qué son las etiquetas HTML?

Como hemos mencionado, las etiquetas son la estructura de HTML. Siendo más específicos, las etiquetas son las marcas que definen pequeños componentes y que, a partir de su uso y combinación, pueden derivar en otros componentes más completos. En cuanto a la estructura de las etiquetas y para que sirve html, se componen de cuatro partes indispensables:

  • El carácter menor que «<«.
  • Etiqueta propiamente dicha, por ejemplo, body.
  • Atributos HTML pertinentes.
  • El carácter mayor que «>.

¿Qué son los elementos HTML?

Los elementos HTML son el componente básico o fundamental de toda página web. Su funcionalidad radica, principalmente, en dar estructura al código. En cuanto a su propia estructura, los elementos inician con una etiqueta de apertura <p>, seguida del respectivo contenido, y finaliza con una etiqueta de cierre. Estas se construyen con una barra inclinada antes de la propia etiqueta, por ejemplo, </p>.

¿Qué son los atributos HTML?

Los atributos HTML son propiedades añadidas a la clasificacion de etiquetas html. Es decir, los atributos pueden modificar el comportamiento de las etiquetas e incluso dotarlas de funcionalidad. Por ejemplo, la etiqueta <img> debe ir acompañada del atributo src, que es el que va a indicar de dónde proviene dicha imagen.

Principales tipos de etiquetas HTML

Ahora sí, es hora de centrarnos en los tipos de etiquetas HTML. A continuación, te contamos cuáles son los tipos más importantes e imprescindibles:

Tipos de etiquetas HTML para metadatos

Son todas aquellas etiquetas que permitirán introducir información importante sobre los datos del documento.

  • <head>: corresponde a la parte superior del documento HTML y agrupa diferente información sobre el mismo, que puede ser o no visible.
  • <link>: enlaza recursos externos, por ejemplo, las hojas de estilo CSS3.
  • <title> </title>: establece el inicio y el fin del título.

Tipos de etiquetas HTML para dar estructura

Este tipo de etiquetas HTML, que equivalen a los tipos de etiquetas en informática, como su nombre indica, permite dar estructura al documento HTML, ya sea establecer algunas secciones e incluso jerarquizar contenido. Entre las más comunes encontramos:

  • <body> </body>: indica todo el contenido a mostrar en la web. Es una etiqueta esencial para cualquier documento ya que indica dónde empieza el contenido visible del documento.
  • <h1> – <h6>: permite jerarquizar el contenido. Son lo que reconocemos como títulos o subtítulos. Los niveles van del 1 al 6, lo que te permite indicar la importancia o relevancia del título, así como estructurar el contenido.
  • <section> </section>: establece la apertura y el cierre de una sección.

Tipos de etiquetas HTML para agrupar contenido

En esta categoría se encuentran todas las etiquetas que facilitan reunir contenido con determinadas características o finalidades. Por ejemplo:

  • <div> </div>: es una etiqueta que se usa para dividir un contenido en partes o establecer secciones.
  • <p> </p>: corresponde al inicio y cierre de un párrafo.
  • <ol> </ol>: con esta etiqueta es posible crear listas ordenadas.
  • <ul> </ul>: esta también nos permite crear listas, pero desordenadas.
  • <li> </li>: esta etiqueta agrupa cierta información sin importar si proviene de listas ordenadas o desordenadas.

Tipos de etiquetas HTML para insertar contenido

Este tipo de etiquetas HTML se usa para incrustar cierto contenido e información de utilidad para la página web.

  • <img>: con esta etiqueta podremos introducir una imagen en el documento.
  • <video> </video>: está entre los tipos de etiqueta en html que te permitirá la reproducción de vídeo en el sitio web, así como otra información que esté asociada con este, como el audio.
  • <audio> </audio>: por su parte, esta etiqueta posibilita la reproducción de archivos de audio.

Tipos de etiquetas HTML semánticas

El tipo de etiquetas HTML semánticas permite darle mejor estructura al documento. Estas mejoran o hacen más atractiva la página para los motores de búsqueda, resultando de mayor provecho para el sitio web.

  • <a> </a>: permite la creación y vinculación de enlaces con el contenido.
  • <br>: introduce los respectivos saltos de línea que mejoran la legibilidad del documento HTML.
  • <strong> </strong>: indica que ciertos elementos tienen mayor importancia, es decir, es la etiqueta mejor vinculada con la optimización de la página web (SEO).

Y muchas más

En total, son alrededor de 140 las etiquetas HTML disponibles. Cada vez son mucho más específicas y van mejorando con el objetivo de ser más eficientes y evitar o eliminar todos las posibles incidencias.

Para continuar

Seguro que has escuchado que los conocimientos en programación y desarrollo web son algunas de las habilidades más solicitadas por las empresas hoy en día. No retrases más tu oportunidad de sumergirte en este tema y explorar todas las ventajas que puede ofrecerte. Ingresa ya a nuestra sección de bootcamps disponibles y elige el que mejor se adapte a tus deseos.

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado