En el vasto universo digital, las etiquetas HTML son los cimientos sobre los cuales se erige la arquitectura de la web. Como albañiles virtuales, estas pequeñas piezas de código trabajan incansablemente para dar forma a la apariencia y funcionalidad de cada página que visitamos. Sin ellas, la web sería un lienzo en blanco, desprovisto de contenido, estructura y significado.
¿Qué son exactamente estas etiquetas? Son las instrucciones que le dicen al navegador cómo presentar la información en una página. Cada etiqueta tiene un propósito específico: algunas definen encabezados, otras crean párrafos, tablas o enlaces. Juntas, forman un lenguaje universal que conecta a los usuarios con el vasto océano de datos en línea.
Aquí hay un vistazo más profundo a algunas de estas etiquetas fundamentales:
Etiquetas para la base del documento
Etiqueta |
Descripción |
Atributos |
<!DOCTYPE>
|
Esta declaración indica que el documento está escrito en HTML5. La declaración <!DOCTYPE> se coloca generalmente al principio de un documento HTML, antes de la etiqueta <html>. |
– |
<html>
|
Define el comienzo del documento HTML y contiene todo el contenido de la página web, incluidos otros elementos como encabezados, cuerpos, y metadatos. |
lang |
<head>
|
Este elemento contiene metadatos y enlaces a recursos externos que son necesarios para la estructura y funcionamiento de la página web, pero que no se muestran directamente en el navegador. |
– |
<body>
|
Contiene todo el contenido visible de la página web, incluyendo texto, imágenes, enlaces, formularios, y otros elementos que los usuarios ven y con los que interactúan en el navegador web. |
– |
<title>
|
El texto especificado dentro de la etiqueta |
– |
<meta>
|
El elemento |
charset, name, content |
<link>
|
El elemento |
href, rel, type |
<style>
|
El elemento |
type, media |
<!– –>
|
Se utiliza en un documento HTML para insertar comentarios que no son visibles en la página web, pero que pueden ser útiles para los desarrolladores para hacer anotaciones, explicaciones o desactivar temporalmente partes del código. |
–
|
Etiquetas para construcción de bloques
Etiqueta |
Descripción |
Atributos |
<div>
|
Se utiliza para crear divisiones o secciones en un documento HTML. Es un contenedor genérico que no tiene un significado semántico específico por sí mismo, pero se utiliza para agrupar y organizar contenido dentro de una página web. |
– |
<section>
|
Es un elemento semántico de HTML utilizado para representar una sección temática de una página web. Proporciona una forma de organizar y estructurar el contenido de manera significativa, puede contener <article> lo que mejora la accesibilidad y la comprensión del documento por parte de los usuarios y los motores de búsqueda. |
– |
<article>
|
Es un elemento semántico de HTML que se utiliza para representar contenido independiente y autónomo en una página web. Se utiliza para encapsular contenido que se puede distribuir o reutilizar de manera independiente, como entradas de blog, publicaciones de noticias, comentarios, foros, etc. |
– |
<aside>
|
Se utiliza para representar contenido que está relacionado pero que es independiente del contenido principal de la página. Se utiliza comúnmente para contenido como barras laterales, notas, publicidad, enlaces relacionados o contenido destacado. |
– |
<header>
|
Se utiliza para representar la cabecera de una sección o de toda la página web. Por lo general, contiene elementos como el logotipo del sitio, el título de la página, enlaces de navegación y otras informaciones relevantes que se muestran en la parte superior de la página. |
– |
<footer>
|
Se utiliza para representar el pie de página de una sección o de toda la página web. Por lo general, contiene información de contacto, enlaces de navegación secundarios, derechos de autor, atribuciones, y otros elementos que se muestran en la parte inferior de la página. |
– |
<nav>
|
Se utiliza para definir un grupo de enlaces de navegación en una página web. Esta etiqueta es importante para organizar y estructurar la navegación del sitio, lo que facilita a los usuarios encontrar y acceder a diferentes secciones o páginas dentro del sitio web. |
– |
Etiquetas para textos
Etiqueta |
Descripción |
Atributos |
<h1> – <h6>
|
Se utilizan para definir encabezados o títulos de diferentes niveles de importancia. Estos elementos se utilizan para estructurar y jerarquizar el contenido de la página web, donde |
|
<a>
|
Se utiliza para crear hipervínculos, también conocidos como enlaces, que permiten a los usuarios navegar de una página web a otra, o dentro de la misma página web. |
href, target |
<span>
|
Se utiliza para agrupar y aplicar estilos a partes específicas de texto o contenido dentro de un documento HTML. A diferencia de los elementos de bloque como |
|
<small>
|
Se utiliza para representar texto en una fuente más pequeña o en un tamaño de letra reducido en comparación con el texto circundante. Este elemento es útil cuando se necesita mostrar texto que es menos relevante o menos importante en tamaño que el texto principal de un documento. |
– |
<sup>
|
Se utiliza para representar texto que debe ser superíndice, es decir, que debe mostrarse ligeramente elevado en relación con el texto circundante. Esto es comúnmente utilizado para exponentes en ecuaciones matemáticas, notas de pie de página, abreviaturas, y otras notaciones que requieren que el texto esté en una posición elevada. |
– |
<sub>
|
Se utiliza para representar texto que debe ser subíndice, es decir, que debe mostrarse ligeramente descentrado en relación con el texto circundante. Esto es comúnmente utilizado para fórmulas químicas, notas de pie de página, abreviaturas, y otras notaciones que requieren que el texto esté en una posición descendida. |
– |
<blockquote>
|
Se utiliza para citar bloques de texto de otras fuentes o para resaltar texto que es una cita textual. Normalmente, los navegadores web representan el contenido de |
cite |
<q>
|
Se utiliza para representar citas cortas o en línea dentro de un texto. Este elemento se utiliza cuando se desea citar directamente el contenido de otra fuente en una línea de texto. |
cite |
<abbr>
|
Se utiliza para representar una abreviatura en un documento HTML. Proporciona una forma de marcar el texto que se abrevia para que los navegadores web y otras herramientas puedan reconocerlo como tal y, en algunos casos, proporcionar información adicional sobre la abreviatura cuando el usuario pasa el cursor sobre ella. |
title |
<address>
|
se utiliza para representar información de contacto o de ubicación, generalmente la información de contacto del autor o propietario de un documento o artículo. Aunque |
– |
<cite>
|
Se utiliza para marcar el título de una obra o una referencia a una obra citada en un documento. Es comúnmente utilizado para citar libros, artículos, películas, obras de arte y otros trabajos creativos. |
– |
<mark>
|
Se utiliza para resaltar o marcar parte del texto dentro de un documento HTML. Es útil cuando se quiere destacar temporalmente una parte específica del texto, como una palabra clave o un fragmento importante. |
– |
<time>
|
Se utiliza para representar fechas y/o horas en un documento web. Proporciona una forma semántica de marcar información de tiempo para que los navegadores y otras herramientas puedan interpretarla correctamente. |
datetime |
<br>
|
Se utiliza para generar un salto de línea dentro de un texto. No tiene etiqueta de cierre y se utiliza cuando deseas iniciar una nueva línea de texto sin iniciar un nuevo párrafo. |
– |
<hr>
|
Se utiliza para insertar una línea horizontal, también conocida como «regla» o «separador», en el contenido de la página. Este elemento es útil para separar secciones de contenido, como párrafos, o para dividir visualmente diferentes partes de una página web. |
– |
Etiquetas para listas
Etiqueta |
Descripción |
Atributos |
<ul>
|
Se utiliza para crear una lista desordenada, también conocida como lista de viñetas. Este tipo de lista se utiliza cuando el orden de los elementos no es importante, y se representa por defecto con viñetas antes de cada elemento de la lista. |
|
<ol>
|
Se utiliza para crear una lista ordenada, también conocida como lista numerada. Este tipo de lista se utiliza cuando el orden de los elementos es importante y se representa por defecto con números o letras antes de cada elemento de la lista. |
|
<li>
|
se utiliza para representar un ítem de una lista, ya sea en una lista ordenada ( |
|
<dl>
|
se utiliza para crear listas de definición, que constan de pares de términos ( |
|
<dt>
|
se utiliza para marcar un término dentro de una lista de definición ( |
|
<dd>
|
Se utiliza para definir o describir un término dentro de una lista de definición ( |
Etiquetas para tablas
Etiqueta |
Descripción |
Atributos |
<table>
|
se utiliza para crear tablas que organizan datos en filas y columnas. Las tablas están formadas por elementos secundarios que definen su estructura, como |
border, cellpadding, cellspacing, width |
<th>
|
Se utiliza para definir las celdas de encabezado en una tabla. Estas celdas suelen contener información importante que describe el contenido de las columnas o filas en la tabla. |
colspan, rowspan |
<tr>
|
Se utiliza para definir una fila dentro de una tabla ( |
– |
<td>
|
Se utiliza para definir una celda de datos dentro de una tabla ( |
colspan, rowspan |
<thead>
|
Se utiliza para agrupar las filas que contienen los encabezados de una tabla ( |
– |
<tbody>
|
Se utiliza para agrupar las filas que contienen los datos principales de una tabla ( |
– |
<tfoot>
|
Se utiliza para agrupar las filas que contienen los resúmenes o totales de una tabla ( |
– |
Etiquetas para multimedia y scripts
Etiqueta |
Descripción |
Atributos |
<script>
|
Se utiliza para incrustar o referenciar código JavaScript dentro de un documento HTML. El código JavaScript puede ser utilizado para agregar interactividad, manipular el contenido de la página, realizar validaciones de formularios, y mucho más. |
src, type, async, defer, crossorigin |
<canvas>
|
Se utiliza para animaciones y otros elementos gráficos en una página web utilizando JavaScript. Proporciona una superficie de dibujo en la que puedes manipular píxeles de forma programática. |
width, height |
<audio>
|
Se utiliza para incrustar archivos de audio en una página web para que los usuarios puedan reproducirlos directamente en el navegador. Este elemento es muy útil para agregar música de fondo, efectos de sonido, podcasts u otros contenidos de audio a una página web. |
src, preload, autoplay, loop, controls |
<video>
|
Se utiliza para incrustar archivos de video en una página web para que los usuarios puedan reproducirlos directamente en el navegador. Este elemento es muy útil para agregar contenido multimedia a una página web, como películas, videos instructivos, clips de música, entre otros. |
src, width, height, poster, preload, autoplay, loop, controls |
<source>
|
Se utiliza dentro del elemento |
src, type, media |
<iframe>
|
Se utiliza para incrustar otra página web dentro de una página web. Esto permite mostrar contenido de una página dentro de otra, como integrar un mapa de Google Maps, un video de YouTube, o cualquier otro contenido de una página externa. |
src, width, height, frameborder, scrolling |
Etiquetas para multimedia y scripts
Etiqueta |
Descripción |
Atributos |
<form>
|
Se utiliza para crear un formulario en una página web. Los formularios permiten a los usuarios ingresar y enviar datos al servidor, como información de contacto, detalles de inicio de sesión, comentarios, etc. |
action, method, target |
<input>
|
Se utiliza para crear diversos tipos de controles de entrada en formularios web. Puede utilizarse para ingresar texto, seleccionar opciones, cargar archivos, y más, dependiendo del valor del atributo |
type, name, value, placeholder, required, autofocus, disabled |
<textarea>
|
Se utiliza para crear un área de texto de múltiples líneas en un formulario. Permite a los usuarios ingresar texto largo, como comentarios, descripciones, mensajes, entre otros. |
name, rows, cols, placeholder, required, autofocus, disabled |
<select>
|
Se utiliza para crear un menú desplegable (también conocido como lista desplegable) en un formulario. Permite a los usuarios seleccionar una opción de una lista predefinida de opciones. |
name, multiple, size, required, autofocus, disabled |
<option>
|
Se utiliza dentro de un elemento |
value, selected, disabled |
<label>
|
Se utiliza para asociar un texto descriptivo a un elemento de formulario, como un |
for |
<fieldset>
|
Se utiliza para agrupar conjuntos relacionados de elementos de formulario dentro de un formulario más grande. Ayuda a organizar y estructurar visualmente el formulario, permitiendo a los usuarios entender mejor la relación entre los diferentes campos de entrada. |
– |
<legend>
|
Se utiliza dentro de un elemento |
– |
<button>
|
Se utiliza para crear un botón en una página web. Puede ser utilizado para realizar acciones, enviar formularios, activar funciones JavaScript, y más. |
type, name, value, autofocus, disabled |
<optgroup>
|
Se utiliza dentro de un elemento |
label, disabled |
<input type="radio">
|
El elemento |
name, value, checked, required, autofocus, disabled |
<input type="checkbox">
|
El elemento |
name, value, checked, required, autofocus, disabled |
<input type="submit"> |
El elemento |
name, value, formaction, formmethod, formtarget, formenctype, autofocus, disabled |
<input type="hidden"> |
El elemento |
name, value |
Recuerda que la práctica constante y la experiencia son clave para alcanzar la maestría en este campo. Pero no te preocupes, estamos aquí para guiarte en cada paso del camino.
¡Ahora es el momento perfecto para dar el siguiente paso en tu viaje de aprendizaje! Te invitamos a explorar nuestro curso de Diseño Web con HTML, donde podrás profundizar tus conocimientos, desarrollar tus habilidades y crear sitios web asombrosos desde cero.
Inscríbete ahora y sé parte de una comunidad de aprendizaje apasionada que te acompañará en tu camino hacia el dominio del diseño web. ¡Es hora de hacer realidad tus proyectos en línea!