Las páginas web están compuestas por una variedad de elementos que permiten la visualización y organización de contenido en línea. Uno de los componentes fundamentales para lograr esto son las etiquetas HTML (Hypertext Markup Language), las cuales proporcionan instrucciones sobre cómo debe ser presentado el contenido en un navegador web. En este artículo, exploraremos en detalle qué son las etiquetas HTML, cómo se leen en una página web, cómo se componen, y la diferencia entre atributo, elemento y etiqueta HTML. También proporcionaremos un listado completo de etiquetas HTML con información relevante sobre cada una.
¿Cómo leen las páginas web las etiquetas HTML?
Los navegadores web interpretan y representan el contenido de una página web siguiendo las instrucciones proporcionadas por las etiquetas HTML. Cada etiqueta delimita un elemento en la página, como un párrafo, encabezado, imagen, enlace, etc. Estas etiquetas se componen de una apertura (<etiqueta>) y un cierre (</etiqueta>), encerrando el contenido que pertenece a ese elemento. Por ejemplo, la etiqueta <p> se utiliza para crear un párrafo y se cierra con </p>, como en el siguiente ejemplo:
<p>Este es un párrafo de ejemplo.</p>¿Cómo se compone una etiqueta en HTML?
Una etiqueta HTML está compuesta por varias partes:
-
Nombre de la etiqueta: Es la palabra que identifica el elemento. Por ejemplo, en
<p>, ‘p’ es el nombre de la etiqueta que representa un párrafo. -
Apertura y cierre: Toda etiqueta tiene una apertura
<etiqueta>y un cierre</etiqueta>. La apertura indica el inicio del elemento y el cierre marca el final. -
Contenido: Es el texto o elementos que están dentro de la etiqueta y que serán afectados por ella. Por ejemplo, en
<p>Este es un párrafo</p>, el texto ‘Este es un párrafo’ es el contenido del elemento. -
Atributos: Opcionalmente, una etiqueta puede tener atributos que proporcionan información adicional sobre el elemento. Por ejemplo, el atributo
srcen una etiqueta de imagen (<img src='ruta_de_la_imagen'>) especifica la fuente de la imagen.
Diferencia entre atributo, elemento y etiqueta HTML
-
Etiqueta HTML: Es la combinación del nombre de la etiqueta, apertura y cierre, como
<etiqueta>contenido</etiqueta>. Define el inicio y fin de un elemento. -
Elemento HTML: Es el conjunto completo que incluye la etiqueta, el contenido y los posibles atributos. Por ejemplo,
<p>Este es un párrafo</p>es un elemento que representa un párrafo. -
Atributo HTML: Proporciona información adicional sobre un elemento y se añade a la etiqueta de apertura. Por ejemplo, en
<a href='https://www.ejemplo.com'>Enlace</a>, el atributohrefespecifica la URL a la que el enlace dirige.
Listado de etiquetas HTML
A continuación, se presenta una tabla con etiquetas HTML y una breve descripción de su función:
| Etiqueta | Descripción |
|---|---|
<html> | Define el comienzo y fin de un documento HTML. |
<head> | Contiene información sobre el documento. |
<title> | Especifica el título de la página. |
<meta> | Proporciona metadatos sobre el documento. |
<base> | Define la URL base para los enlaces de la página. |
<link> | Enlaza el documento con recursos externos. |
<script> | Define un script del lado del cliente. |
<noscript> | Proporciona contenido alternativo para usuarios que no tienen scripts habilitados. |
<style> | Define estilos en línea o incluye un archivo de estilos. |
<body> | Contiene el contenido visible de la página. |
<article> | Define un contenido independiente y autocontenido. |
<section> | Define una sección en un documento. |
<header> | Representa la cabecera de una sección o página. |
<footer> | Representa el pie de una sección o página. |
<main> | Contiene el contenido principal de la página. |
<nav> | Define una sección de navegación. |
<aside> | Define contenido aparte del contenido principal. |
<address> | Proporciona información de contacto. |
<h1> - <h6> | Encabezados de diferentes niveles. |
<p> | Define un párrafo de texto. |
<blockquote> | Define una sección de texto citado. |
<hr> | Crea una línea horizontal. |
<pre> | Mantiene el formato y espaciado del texto. |
<a> | Crea un enlace a otra página. |
<img> | Inserta una imagen. |
<figure> | Agrupa contenido multimedia y su descripción. |
<figcaption> | Proporciona una descripción para <figure>. |
<ul>, <ol>, <li> | Crean listas sin orden o con orden. |
<dl>, <dt>, <dd> | Define listas de descripción. |
<table> | Define una tabla. |
<caption> | Proporciona un título para la tabla. |
<tr> | Define una fila en una tabla. |
<th> | Define una celda de encabezado en una tabla. |
<td> | Define una celda en una tabla. |
<thead>, <tbody>, <tfoot> | Agrupan elementos en una tabla. |
<colgroup>, <col> | Define columnas en una tabla. |
<form> | Define un formulario. |
<input> | Define un campo de entrada en un formulario. |
<button> | Define un botón. |
<select> | Define una lista desplegable. |
<option> | Define una opción en una lista desplegable. |
<label> | Etiqueta para un elemento de formulario. |
<textarea> | Define un área de texto multilinea. |
<fieldset> | Agrupa elementos relacionados en un formulario. |
<legend> | Proporciona un título para un <fieldset>. |
<iframe> | Inserta una ventana de contenido externo. |
<audio> | Inserta contenido de audio. |
<video> | Inserta contenido de video. |
<canvas> | Define un lienzo para gráficos. |
<svg> | Define gráficos vectoriales escalables. |
<strong> | Indica texto importante y enfatizado. |
<em> | Enfatiza el texto. |
<mark> | Resalta partes de texto. |
<abbr> | Define una abreviatura. |
<cite> | Indica el título de una obra. |
<code> | Define código de computadora. |
<kbd> | Define entrada de teclado. |
<samp> | Define una salida de programa. |
<var> | Define una variable de programa. |
<a> | Crea un enlace a otra página. |
<img> | Inserta una imagen. |
<area> | Define una región clickeable en una imagen. |
<map> | Define un mapa de imágenes. |
<track> | Define subtítulos o transcripciones de video. |
<embed> | Inserta contenido externo. |
<object> | Inserta objetos multimedia. |
<param> | Define parámetros para objetos multimedia. |
<iframe> | Inserta una ventana de contenido externo. |
<source> | Define múltiples recursos para elementos multimedia. |
<time> | Representa una fecha y/o hora. |
<meter> | Define una medida escalar dentro de un rango conocido. |
<progress> | Muestra el progreso de una tarea. |
<details> | Define detalles adicionales que el usuario puede desplegar. |
<summary> | Proporciona un resumen o etiqueta para <details>. |
<dialog> | Define un cuadro de diálogo o ventana emergente. |
Esta tabla incluye una amplia variedad de etiquetas HTML comunes y menos comunes, cada una con una breve descripción de su función. ¡Espero que encuentres esta lista útil para tus proyectos de desarrollo web! Si necesitas más información sobre alguna etiqueta específica, no dudes en preguntar.