Etiquetas HTML: Referencia Completa y Ejemplos Prácticos

Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones

Escrito el 1 de Marzo de 2025 en español con un tamaño de 6,17 KB

Etiquetas HTML: Referencia Completa y Ejemplos

Este documento proporciona una referencia completa de las etiquetas HTML más comunes, organizadas por categorías para facilitar su consulta. Cada etiqueta incluye una breve descripción de su función y uso.

Estructura Básica de un Documento HTML

<html>: Representa la raíz de un documento HTML. Todos los demás elementos deben ser descendientes de este elemento.
<head>: Contiene metadatos sobre el documento, incluyendo enlaces a scripts y hojas de estilo, así como el título de la página.
<body>: Representa el contenido principal de un documento HTML. Solo puede haber un elemento <body> en un documento.

Elementos dentro de <head>

<title>: Define el título del documento, que se muestra en la barra de título del navegador o en las pestañas de la página. Solo puede contener texto.
<base>: Define la URL base para todas las URLs relativas en la página.
<link>: Se utiliza para enlazar recursos externos, como archivos CSS y JavaScript, con el documento HTML actual.
<meta>: Define metadatos que no pueden ser definidos usando otros elementos HTML (por ejemplo, la descripción de la página, palabras clave, autor, etc.).
<style>: Se utiliza para escribir CSS en línea (dentro del propio documento HTML).

Elementos de Contenido y Estructura

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Elementos de encabezado que implementan seis niveles de títulos. <h1> es el de mayor importancia y <h6> el de menor. Describen brevemente el tema de la sección que introducen.
<header>: Define la cabecera de una página o sección. Normalmente contiene un logotipo, el título del sitio web y/o una barra de navegación.
<footer>: Define el pie de una página o sección. Comúnmente contiene información de derechos de autor, enlaces a información legal o información de contacto.
<p>: Define un párrafo.
<hr>: Representa una ruptura temática entre párrafos (por ejemplo, un cambio de tema). Visualmente, suele mostrarse como una línea horizontal.
<pre>: Representa texto preformateado. El texto dentro de un elemento <pre> se muestra en una fuente monoespaciada y conserva los espacios y saltos de línea tal como están escritos en el código fuente.

Listas

<ol>: Define una lista ordenada (numerada).
<ul>: Define una lista desordenada (con viñetas).
<li>: Define un elemento dentro de una lista (ordenada o desordenada).
<dl>: Define una lista de definiciones.
- <dt>: Representa un término en una lista de definiciones.
- <dd>: Representa la descripción de un término en una lista de definiciones.

Elementos de Línea

<div>: Representa un contenedor genérico *sin* ningún significado semántico especial. Se utiliza principalmente para agrupar elementos para aplicar estilos o para manipularlos con JavaScript.
<a>: Representa un hipervínculo. El atributo href especifica la URL a la que se enlaza.
<strong>: Representa texto con *énfasis fuerte*. Los navegadores suelen mostrar el texto en negrita.
<cite>: Representa el título de una obra (libro, artículo, película, etc.).
<time>: Representa un valor de fecha y/u hora. El atributo datetime puede utilizarse para proporcionar una representación legible por máquina de la fecha/hora.
<b>: Representa texto al que se le quiere dar *énfasis visual* (negrita), pero sin que ello implique una mayor importancia semántica.
<u>: Representa texto con una *anotación no textual*, como un subrayado. Se debe evitar su uso, ya que puede confundirse con un enlace.
<br>: Representa un salto de línea.

Multimedia

<img>: Representa una imagen. El atributo src especifica la URL de la imagen, y el atributo alt proporciona un texto alternativo descriptivo para la imagen (importante para la accesibilidad y el SEO).
<object>: Representa un recurso externo, que puede ser tratado como una imagen, un subdocumento HTML o un recurso externo a ser procesado por un plugin.
<video>: Representa un vídeo. Incluye atributos para especificar la URL del vídeo, controles de reproducción, etc.
<audio>: Representa un sonido o stream de audio.

Tablas

<table>: Representa datos en formato tabular (filas y columnas).
<caption>: Representa el título de una tabla.
<colgroup>: Representa un grupo de una o más columnas en una tabla.
<col>: Representa una columna en una tabla.
<thead>: Representa el encabezado de una tabla (las filas que definen los títulos de las columnas).
<tbody>: Representa el cuerpo principal de una tabla (las filas de datos).
<tfoot>: Representa el pie de una tabla (las filas que pueden contener resúmenes de las columnas).
<tr>: Representa una fila en una tabla.
<td>: Representa una celda de datos en una tabla.
<th>: Representa una celda de encabezado en una tabla.

Entradas relacionadas:

Etiquetas: