htmladvanced154 snippets

HTML5: Etiquetas Semánticas y SEO

Google odia los <div>. Usa la estructura semántica correcta para posicionar tu sitio en lo más alto sin gastar en anuncios.

Secciones29

🏗️ Estructura Básica del Documento

6 snippets

Fundamentos para crear cualquier página HTML, incluyendo declaración del documento, metadatos esenciales y elementos base del cuerpo.

Declaración DOCTYPE

Declara el tipo de documento y la versión de HTML que el navegador debe usar para renderizar la página. Esencial para garantizar el modo de renderizado estándar de HTML5 y evitar el modo "quirks", que puede causar inconsistencias visuales.

Quando usar: Al iniciar cualquier documento HTML para definir la versión de HTML.

html

<!DOCTYPE html>

Elemento Raíz HTML

El elemento raíz de toda la página HTML. El atributo `lang` define el idioma principal del contenido del documento (en este caso, Portugués de Brasil), lo cual es crucial para la accesibilidad (lectores de pantalla) y para los motores de búsqueda (SEO).

Quando usar: Siempre como el primer elemento dentro del DOCTYPE.

html

<html lang="pt-BR">

Metadatos del Documento (Head)

Contiene metadatos sobre el documento, como título, enlaces a hojas de estilo, scripts, información de SEO y otras configuraciones que no se muestran directamente en la página, pero son importantes para el navegador y los motores de búsqueda.

Quando usar: Para incluir toda la información no visible de la página.

html

<head>

Contenido Visible (Body)

Contiene todo el contenido visible de la página web, incluyendo texto, imágenes, enlaces, videos y otros elementos interactivos. Todo lo que el usuario ve e interactúa está dentro de esta etiqueta.

Quando usar: Para envolver todo el contenido que se mostrará en el navegador.

html

<body>

Codificación de Caracteres

Define la codificación de caracteres del documento como UTF-8, que soporta la mayoría de los caracteres en todos los idiomas, incluyendo acentos y caracteres especiales. Garantiza que el texto se muestre correctamente en diferentes sistemas operativos y navegadores.

Quando usar: Siempre al inicio del <head> para evitar problemas de codificación.

html

<meta charset="UTF-8">

Configuración de Viewport

Configura la viewport para dispositivos móviles, controlando el ancho del área visible (`width=device-width`) y el nivel de zoom inicial (`initial-scale=1.0`). Esencial para garantizar que el diseño de la página sea responsivo y se adapte a diferentes tamaños de pantalla.

Quando usar: En todas las páginas para garantizar responsividad en dispositivos móviles.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Títulos, Párrafos y Saltos

4 snippets

Elementos esenciales para estructurar texto, definir jerarquía de títulos y controlar el flujo de contenido.

Títulos de Sección (H1-H6)

Define títulos de diferentes niveles de importancia. `<h1>` es el título más importante (generalmente el título principal de la página), y `<h6>` es el menos importante. Usados para estructurar el contenido semánticamente y son relevantes para SEO.

Quando usar: Para definir la jerarquía y estructura de encabezados en su contenido.

html

<h1> a <h6>

Párrafo de Texto

Representa un párrafo de texto. Es el elemento fundamental para bloques de texto en un documento HTML, separando el contenido en unidades legibles.

Quando usar: Para cualquier bloque de texto que forma un párrafo.

html

<p>

Salto de Línea

Inserta un salto de línea simple, moviendo el contenido subsiguiente a la siguiente línea sin crear un nuevo párrafo. Usado para saltos de línea dentro del mismo bloque de texto (e.g., en una dirección).

Quando usar: Cuando se necesita un salto de línea, pero un nuevo párrafo no es semánticamente apropiado.

html

<br>

Línea Horizontal (Salto Temático)

Representa un salto temático entre párrafos de contenido, indicando un cambio de tema o sección. Generalmente se renderiza como una línea horizontal por el navegador, pero su propósito es semántico.

Quando usar: Para indicar un cambio de tema o sección dentro del contenido.

html

<hr>

Formato y Énfasis de Texto

6 snippets

Tags para aplicar formato y dar significado semántico a partes específicas del texto.

Texto Importante (Strong)

Indica que el texto contenido es de gran importancia, relevancia o urgencia. Generalmente renderizado en negrita por los navegadores. Posee un significado semántico más fuerte que solo `<b>`.

Quando usar: Para destacar contenido crítico o de alta prioridad.

html

<strong>

Texto Enfatizado (Emphasized)

Indica que el texto contenido debe ser enfatizado, generalmente para dar un significado diferente o para expresar un tono. Generalmente renderizado en cursiva por los navegadores. Posee un significado semántico más fuerte que solo `<i>`.

Quando usar: Para dar énfasis a una palabra o frase que cambia el sentido de la oración.

html

<em>

Texto Destacado (Mark)

Destaca o resalta un fragmento de texto, como si fuera marcado con un marcador de texto amarillo. Usado para llamar la atención sobre partes específicas del contenido que son relevantes para el contexto actual del usuario.

Quando usar: Para resaltar texto relevante en un contexto específico, como resultados de búsqueda.

html

<mark>

Texto Pequeño (Small)

Representa comentarios secundarios, derechos de autor, textos de pie de página y otra información que se considera "pequeña" en relación con el texto principal. Generalmente se renderiza con una fuente más pequeña.

Quando usar: Para información de copyright, avisos legales o texto de pie de página.

html

<small>

Texto Eliminado (Deleted)

Representa texto que ha sido eliminado de un documento o que ya no es relevante. Generalmente se renderiza con una línea sobre el texto (tachado), indicando que fue removido.

Quando usar: Para mostrar cambios en un documento, como precios antiguos.

html

<del>

Texto Insertado (Inserted)

Representa texto que ha sido insertado en un documento. Generalmente se renderiza con un subrayado, indicando que fue añadido. Usado en conjunto con `<del>` para mostrar revisiones.

Quando usar: Para mostrar texto que ha sido añadido a un documento revisado.

html

<ins>

Enlaces e Imágenes

4 snippets

Elementos para crear hipervínculos e incorporar imágenes en páginas web.

Enlace Básico (Anchor)

Crea un hipervínculo a otra página, recurso o parte del mismo documento. El atributo `href` (Hypertext REFerence) especifica la URL de destino a la que apunta el enlace.

Quando usar: Para crear enlaces de navegación o referencias externas.

html

<a href="url">

Enlace en Nueva Pestaña

Crea un hipervínculo que, al hacer clic, abre el recurso especificado en una nueva pestaña o ventana del navegador. El atributo `target="_blank"` se utiliza para este comportamiento.

Quando usar: Para abrir enlaces externos sin sacar al usuario de la página actual.

html

<a href="url" target="_blank">

Insertar Imagen

Inserta una imagen en el documento. El atributo `src` (SouRCe) especifica la ruta al archivo de la imagen, y `alt` (ALTernative text) proporciona una descripción textual alternativa, esencial para la accesibilidad (lectores de pantalla) y SEO.

Quando usar: Para mostrar imágenes en su página.

html

<img src="caminho" alt="descrição">

Imágenes Responsivas (Picture)

Un contenedor que permite especificar múltiples fuentes de imagen (`<source>`) para diferentes condiciones (como tamaños de pantalla, densidades de píxeles o formatos de imagen), y un elemento `<img>` como fallback. Ayuda a optimizar la carga de imágenes y a adaptarlas a diversos dispositivos.

Quando usar: Para servir imágenes optimizadas para diferentes viewports o formatos.

html

<picture>

🎯 Elementos Semánticos de Estructura

7 snippets

Elementos que proporcionan significado estructural al contenido, mejorando accesibilidad, SEO y mantenimiento del código.

Encabezado de la Página/Sección

Representa el contenido introductorio de una sección o de todo el documento, generalmente conteniendo títulos, logotipos, navegación y/o un campo de búsqueda. No debe confundirse con los títulos `<h1>-<h6>`.

Quando usar: Para agrupar elementos introductorios, como la parte superior de una página o sección.

html

<header>

Navegación Principal

Representa una sección de enlaces de navegación, como menús, índices o tablas de contenido. Destinado a la navegación principal del sitio o de una sección importante.

Quando usar: Para envolver bloques de enlaces de navegación primaria.

html

<nav>

Contenido Principal

Representa el contenido dominante del `<body>` del documento. Debe haber solo un elemento `<main>` por documento y su contenido debe ser único para esa página, excluyendo barras laterales, navegación, etc.

Quando usar: Para delimitar el contenido principal y único de su página.

html

<main>

Sección Genérica

Representa una sección genérica de contenido temáticamente agrupado. Generalmente contiene un título (h1-h6) y puede ser usado para dividir el contenido principal en partes lógicas y coherentes.

Quando usar: Para agrupar contenido relacionado que forma una sección lógica.

html

<section>

Contenido Independiente (Article)

Representa un contenido independiente y autosuficiente, como una publicación de blog, un artículo de periódico, un comentario de usuario o un widget interactivo. Puede distribuirse y reutilizarse independientemente del resto de la página.

Quando usar: Para contenido que puede leerse de forma independiente, como un artículo de blog.

html

<article>

Contenido Secundario (Aside)

Representa un contenido que está tangencialmente relacionado con el contenido principal del documento, pero que puede considerarse separado. Frecuentemente usado para barras laterales, cajas de cita o bloques de anuncios.

Quando usar: Para barras laterales, cajas de cita o información relacionada.

html

<aside>

Pie de Página/Sección

Representa el pie de página de una sección o de todo el documento. Generalmente contiene información sobre el autor, derechos de autor, enlaces relacionados, información de contacto o navegación secundaria.

Quando usar: Para agrupar información de pie de página, como derechos de autor y enlaces de contacto.

html

<footer>

Elementos de Texto Semántico

6 snippets

Tags que agregan significado estructural y contextual a bloques de texto específicos.

Cita Larga (Blockquote)

Indica que el texto contenido es una cita larga de otra fuente. Generalmente renderizado con una sangría por el navegador. El atributo `cite` puede ser usado para apuntar a la fuente de la cita.

Quando usar: Para citar bloques de texto de otras fuentes.

html

<blockquote>

Título de Obra (Cite)

Usado para citar el título de una obra creativa (libro, película, música, pintura, etc.) o el nombre de la fuente de una cita. El contenido es generalmente renderizado en cursiva.

Quando usar: Para referenciar el título de una obra citada.

html

<cite>

Código de Computadora

Muestra un pequeño fragmento de código de computadora. El contenido es generalmente renderizado en una fuente monoespaciada, indicando que es código. Puede ser usado dentro de `<pre>` para bloques mayores de código.

Quando usar: Para mostrar fragmentos de código inline o dentro de un párrafo.

html

<code>

Texto Preformateado

Muestra texto preformateado. El texto dentro de esta etiqueta se muestra en una fuente monoespaciada y mantiene los espacios en blanco y los saltos de línea exactamente como fueron escritos en el código fuente. Útil para mostrar código o arte ASCII.

Quando usar: Para mostrar bloques de código o texto que requieren formato exacto.

html

<pre>

Abreviação

Representa uma abreviação ou um acrônimo. O atributo `title` pode ser usado para fornecer a expansão completa da abreviação, melhorando a acessibilidade e a compreensão do usuário.

Quando usar: Para marcar abreviações e fornecer seu significado completo.

html

<abbr>

Información de Contacto

Proporciona información de contacto para el autor/propietario del documento o de la sección más cercana. Puede incluir nombre, dirección física, correo electrónico, teléfono, URL, etc.

Quando usar: Para mostrar información de contacto de forma semántica.

html

<address>

Medios y Contenido Embebido

5 snippets

Elementos para incorporar figuras, leyendas y otros tipos de contenido externo.

Contenedor de Figura

Usado para agrupar contenido autocontenido, como imágenes, diagramas, fotos, bloques de código, etc., junto con su leyenda (`<figcaption>`), haciéndolo independiente del flujo principal del documento y referenciable.

Quando usar: Para agrupar una imagen, código u otro contenido con su leyenda.

html

<figure>

Leyenda de la Figura

Proporciona una leyenda o descripción para el contenido de un elemento `<figure>`. Debe ser el primer o el último hijo de un `<figure>`.

Quando usar: Para añadir una leyenda descriptiva a un elemento <figure>.

html

<figcaption>

Contenido Externo (Iframe)

Incorpora otro documento HTML dentro del documento actual. Usado para mostrar contenido de otras fuentes, como videos de YouTube, mapas de Google o contenido de otros sitios, de forma aislada.

Quando usar: Para incorporar contenido de otras fuentes o documentos HTML.

html

<iframe>

Contenido Incrustado (Embed)

Incrusta contenido externo desde un punto de inserción especificado en el documento. Usado para integrar plugins de terceros o contenido que no es HTML, como PDFs, archivos de audio/video o animaciones Flash (aunque su uso ha disminuido).

Quando usar: Para incorporar contenido de plugins externos o medios no HTML.

html

<embed>

Objeto Multimedia (Object)

Incorpora un objeto externo (como un plugin, PDF, Flash o incluso otro documento HTML) en el documento HTML. Ofrece más opciones de fallback y control de contenido que `<embed>`, pero es menos común hoy en día.

Quando usar: Para incorporar objetos externos con más control sobre fallbacks.

html

<object>

📋 Tipos de Listas

6 snippets

Elementos para organizar información en listas ordenadas, no ordenadas o de definición.

Lista No Ordenada

Crea una lista no ordenada de ítems. Los ítems de la lista son generalmente marcados con viñetas (puntos, cuadrados, etc.), indicando que el orden no es semánticamente importante.

Quando usar: Para listas donde el orden de los ítems no es relevante (e.g., lista de compras).

html

<ul>

Lista Ordenada

Crea una lista ordenada de elementos. Los elementos de la lista suelen estar marcados con números o letras, indicando una secuencia o jerarquía.

Quando usar: Para listas donde el orden de los elementos es importante (e.g., pasos de una receta).

html

<ol>

Elemento de Lista

Representa un elemento individual dentro de una lista (`<ul>` o `<ol>`). Debe ser un hijo directo de `<ul>`, `<ol>` o `<menu>`.

Quando usar: Para cada elemento dentro de una lista ordenada o no ordenada.

html

<li>

Lista de Definición

Crea una lista de definición, que es una lista de términos y sus respectivas descripciones. Útil para glosarios, preguntas y respuestas o metadatos.

Quando usar: Para crear glosarios o listas de términos y sus definiciones.

html

<dl>

Término de Definición

Representa un término a definir dentro de una lista de definición (`<dl>`). Cada `<dt>` es generalmente seguido por uno o más elementos `<dd>`.

Quando usar: Para definir el término en una lista de definición.

html

<dt>

Descripción de Definición

Representa la descripción o definición de un término (`<dt>`) dentro de una lista de definición (`<dl>`).

Quando usar: Para proporcionar la descripción o explicación de un término en una lista de definición.

html

<dd>

Atributos de Listas

6 snippets

Atributos para personalizar la apariencia y comportamiento de listas.

Lista Numerada Estándar

Define una lista ordenada que usa números arábigos (1, 2, 3...) como marcadores. Este es el tipo estándar y puede ser omitido.

Quando usar: Para listas ordenadas con numeración estándar.

html

<ol type="1">

Lista con Letras Mayúsculas

Define una lista ordenada que usa letras mayúsculas (A, B, C...) como marcadores para los elementos de la lista.

Quando usar: Para listas ordenadas que usan letras mayúsculas como marcadores.

html

<ol type="A">

Lista con Letras Minúsculas

Define una lista ordenada que usa letras minúsculas (a, b, c...) como marcadores para los elementos de la lista.

Quando usar: Para listas ordenadas que usan letras minúsculas como marcadores.

html

<ol type="a">

Lista con Números Romanos

Define una lista ordenada que usa números romanos mayúsculos (I, II, III...) como marcadores para los elementos de la lista.

Quando usar: Para listas ordenadas que usan números romanos como marcadores.

html

<ol type="I">

Inicio de la Lista Ordenada

Inicia la cuenta de una lista ordenada a partir de un número específico (en este caso, 5), en lugar de empezar desde el 1. El valor puede ser cualquier número entero.

Quando usar: Para continuar una lista desde un punto específico o cuando el orden lógico requiere un inicio diferente.

html

<ol start="5">

Lista Sin Marcadores

Elimina los marcadores predeterminados de una lista no ordenada, permitiendo personalización completa vía CSS. Este es un ejemplo de estilo inline, pero es preferible usar CSS externo.

Quando usar: Cuando quieres eliminar los marcadores predeterminados y estilizar la lista con CSS.

html

<ul style="list-style-type: none;">

Estructura de Tablas

7 snippets

Elementos fundamentales para crear y organizar datos en formato tabular.

Contenedor de la Tabla

El contenedor principal para datos tabulares. Define una tabla HTML, agrupando todos sus elementos (encabezado, cuerpo, pie de página, filas y celdas).

Quando usar: Para crear cualquier tabla de datos.

html

<table>

Encabezado de la Tabla

Agrupa el contenido del encabezado de una tabla. Contiene la información de encabezado de las columnas, generalmente usando elementos `<th>`.

Quando usar: Para definir el encabezado semántico de una tabla.

html

<thead>

Cuerpo de la Tabla

Agrupa el contenido del cuerpo de una tabla. Contiene las filas de datos principales de la tabla, usando elementos `<tr>` y `<td>`.

Quando usar: Para definir el cuerpo principal de datos de una tabla.

html

<tbody>

Pie de Tabla

Agrupa el contenido del pie de una tabla. Generalmente contiene resúmenes, totales o información adicional relacionada con los datos del cuerpo de la tabla.

Quando usar: Para definir el pie semántico de una tabla, como totales o notas.

html

<tfoot>

Fila de la Tabla

Define una fila de celdas en una tabla (Table Row). Cada `<tr>` debe contener uno o más elementos `<th>` (celdas de encabezado) o `<td>` (celdas de datos).

Quando usar: Para cada nueva fila de datos o encabezado en la tabla.

html

<tr>

Celda de Encabezado

Define una celda de encabezado en una tabla (Table Header). El contenido es generalmente centrado y en negrita por defecto, y semánticamente representa un encabezado para una columna o fila, mejorando la accesibilidad.

Quando usar: Para celdas que sirven como encabezados de columnas o filas.

html

<th>

Celda de Datos

Define una celda de datos estándar en una tabla (Table Data). Contiene el dato real de la tabla. Es el elemento más básico para mostrar contenido dentro de una fila.

Quando usar: Para cada celda de datos común en una tabla.

html

<td>

Atributos de Tablas

5 snippets

Atributos para controlar la presentación y layout de celdas en tablas HTML.

Borde de la Tabla (Obsoleto)

Añade un borde de 1 píxel alrededor de la tabla y sus celdas. Este atributo está obsoleto en HTML5; el estilo de los bordes debe aplicarse exclusivamente vía CSS para una mejor separación de responsabilidades.

Quando usar: Evitar su uso. Preferir CSS para el estilo de los bordes.

html

<table border="1">

Fusionar Columnas (Colspan)

Hace que una celda de datos ocupe (fusione) dos o más columnas adyacentes en la tabla. El valor del atributo indica el número de columnas a fusionar.

Quando usar: Para fusionar celdas horizontalmente, abarcando múltiples columnas.

html

<td colspan="2">

Combinar Filas (Rowspan)

Hace que una celda de datos ocupe (combine) tres o más filas adyacentes en la tabla. El valor del atributo indica el número de filas a combinar.

Quando usar: Para combinar celdas verticalmente, abarcando múltiples filas.

html

<td rowspan="3">

Alcance de Encabezado (Columna)

Indica que la celda de encabezado (`<th>`) proporciona un encabezado para todas las celdas en la misma columna. Esencial para la accesibilidad, ya que los lectores de pantalla pueden asociar datos a sus respectivos encabezados.

Quando usar: Para indicar que un <th> es el encabezado de una columna entera.

html

<th scope="col">

Alcance de Encabezado (Fila)

Indica que la celda de encabezado (`<th>`) proporciona un encabezado para todas las celdas en la misma fila. Esencial para la accesibilidad, especialmente en tablas complejas.

Quando usar: Para indicar que un <th> es el encabezado de una fila entera.

html

<th scope="row">

📝 Estructura del Formulario

5 snippets

Elementos básicos para construir formularios HTML y agrupar campos de forma lógica.

Contenedor de Formulario

Define un formulario HTML para recolectar entrada del usuario. Todos los elementos de entrada de un formulario (inputs, textareas, selects, buttons) deben estar contenidos dentro de esta etiqueta para que sus datos puedan ser enviados.

Quando usar: Para iniciar la creación de un formulario para la recolección de datos.

html

<form>

Formulario con Acción y Método

Define un formulario que enviará sus datos a la URL `/submit` usando el método HTTP POST. El atributo `action` especifica la URL de destino y `method` el método HTTP (GET/POST) para el envío de los datos.

Quando usar: Para configurar cómo y a dónde se enviarán los datos del formulario.

html

<form action="/submit" method="post">

Grupo de Campos (Fieldset)

Agrupa elementos relacionados dentro de un formulario, creando una caja visual alrededor de ellos. Ayuda a organizar formularios complejos en secciones lógicas y mejora la accesibilidad para lectores de pantalla.

Quando usar: Para agrupar lógicamente campos relacionados en un formulario.

html

<fieldset>

Leyenda del Grupo (Legend)

Proporciona una leyenda o título para el contenido de un elemento `<fieldset>`, describiendo el propósito del grupo de campos. Se muestra en el borde del fieldset.

Quando usar: Para dar un título a un grupo de campos dentro de un <fieldset>.

html

<legend>

Etiqueta de Campo (Label)

Asocia una etiqueta de texto a un campo de formulario (como `<input>`, `<textarea>`, `<select>`). El atributo `for` debe corresponder al `id` del campo para garantizar accesibilidad, permitiendo que el usuario haga clic en la etiqueta para enfocar el campo.

Quando usar: Para proporcionar etiquetas accesibles para todos los campos de formulario.

html

<label for="id">

Campos de Entrada Básicos

6 snippets

Tipos de campos de entrada más comunes para recopilar diferentes tipos de datos del usuario.

Campo de Texto

Crea un campo de entrada de texto de una sola línea para datos generales, como nombres, apellidos o direcciones cortas.

Quando usar: Para entrada de texto genérico de una sola línea.

html

<input type="text">

Campo de Correo Electrónico

Crea un campo de entrada para direcciones de correo electrónico. Los navegadores pueden ofrecer validación básica de formato de correo electrónico y, en dispositivos móviles, activar un teclado optimizado para correos electrónicos.

Quando usar: Para recopilar direcciones de correo electrónico.

html

<input type="email">

Campo de Contraseña

Crea un campo de entrada para contraseñas. Los caracteres digitados son enmascarados (generalmente con asteriscos o puntos) para ocultar la entrada, pero el valor es enviado como texto simple.

Quando usar: Para recopilar contraseñas o información sensible que debe ser enmascarada.

html

<input type="password">

Campo Numérico

Crea un campo de entrada para números. Los navegadores pueden mostrar controles para aumentar/disminuir el valor (spin buttons) y validar que la entrada es numérica. Puede usar atributos `min`, `max`, `step`.

Quando usar: Para recopilar entradas numéricas, como edad o cantidad.

html

<input type="number">

Campo de Teléfono

Crea un campo de entrada para números de teléfono. En dispositivos móviles, puede activar un teclado numérico optimizado. No posee validación de formato de teléfono nativa, que debe hacerse con `pattern` o JavaScript.

Quando usar: Para recopilar números de teléfono.

html

<input type="tel">

Campo de URL

Crea un campo de entrada para URLs. Los navegadores pueden ofrecer validación básica de formato de URL. En dispositivos móviles, puede activar un teclado optimizado para URLs.

Quando usar: Para recopilar direcciones de sitios web o enlaces.

html

<input type="url">

Campos de Selección de Formulario

6 snippets

Elementos para permitir que los usuarios elijan entre opciones predefinidas.

Casilla de Verificación (Checkbox)

Crea una casilla de verificación que permite al usuario elegir cero o más opciones de un conjunto. Cada checkbox es independiente, a menos que esté agrupado semánticamente.

Quando usar: Cuando el usuario puede seleccionar varias opciones de una lista.

html

<input type="checkbox">

Botón de Radio (Radio)

Crea un botón de radio que permite al usuario seleccionar solo una opción de un conjunto mutuamente exclusivo. Los botones de radio con el mismo atributo `name` forman un grupo, garantizando que solo uno pueda ser seleccionado.

Quando usar: Cuando el usuario debe seleccionar solo una opción de un grupo.

html

<input type="radio">

Lista Desplegable (Select)

Crea una lista desplegable (dropdown) de opciones. El usuario puede seleccionar una opción por defecto, o varias si el atributo `multiple` es añadido. Cada opción es definida por una etiqueta `<option>`.

Quando usar: Para permitir que el usuario seleccione una o más opciones de una lista larga.

html

<select>

Opción de la Lista Desplegable

Define una opción individual dentro de un elemento `<select>` o `<datalist>`. El texto entre las etiquetas `<option>` es lo que el usuario ve, y el atributo `value` es lo que se envía al servidor.

Quando usar: Para cada elemento seleccionable dentro de un <select>.

html

<option>

Grupo de Opciones (Optgroup)

Agrupa opciones relacionadas dentro de un elemento `<select>`, creando un encabezado para el grupo de opciones. El atributo `label` define el texto del encabezado del grupo.

Quando usar: Para organizar opciones en un <select> en categorías lógicas.

html

<optgroup>

Área de Texto Multilínea

Crea un área de texto multilínea para entrada de texto más larga, como comentarios o mensajes. Los atributos `rows` y `cols` definen sus dimensiones iniciales visibles (filas y columnas).

Quando usar: Para recopilar entradas de texto largas, como comentarios o descripciones.

html

<textarea>

Botones y Controles de Formulario

5 snippets

Elementos para envío, reset u otras acciones en un formulario.

Botón de Envío (Button)

Crea un botón que, cuando se hace clic, envía los datos del formulario al servidor. Es el tipo de botón más común para finalizar la interacción con el formulario. Permite contenido HTML dentro de la etiqueta.

Quando usar: Para enviar los datos de un formulario.

html

<button type="submit">

Botón de Reset (Button)

Crea un botón que, al hacer clic, restablece todos los campos del formulario a sus valores iniciales. Útil para permitir que el usuario empiece de nuevo.

Quando usar: Para permitir que el usuario limpie y reinicie el formulario.

html

<button type="reset">

Botón Genérico (Button)

Crea un botón genérico que no tiene comportamiento estándar de envío o reset. Usado para activar scripts JavaScript u otras acciones personalizadas sin enviar el formulario.

Quando usar: Para botones que ejecutan acciones JavaScript sin enviar el formulario.

html

<button type="button">

Botón de Envío (Input)

Crea un botón de envío de formulario con la apariencia de un `input`. Funcionalmente similar a `<button type="submit">`, pero no permite contenido HTML dentro de la etiqueta, solo el valor del atributo `value` como texto.

Quando usar: Para enviar los datos de un formulario, como alternativa a <button type="submit">.

html

<input type="submit">

Botón de Reset (Input)

Crea un botón de reset de formulario con la apariencia de un `input`. Funcionalmente similar a `<button type="reset">`, pero no permite contenido HTML dentro de la etiqueta.

Quando usar: Para permitir que el usuario limpie y reinicie el formulario, como alternativa a <button type="reset">.

html

<input type="reset">

🚀 Campos HTML5 Modernos

8 snippets

Nuevos tipos de campos de entrada HTML5 para recopilar datos específicos con validación e interfaces mejoradas.

Selector de Fecha

Crea un campo de entrada para seleccionar una fecha (día, mes, año). Los navegadores generalmente proporcionan un selector de calendario (date picker) nativo para facilitar la selección.

Quando usar: Para recolectar una fecha específica del usuario.

html

<input type="date">

Selector de Hora

Crea un campo de entrada para seleccionar una hora (horas y minutos). Los navegadores pueden ofrecer un control de tiempo optimizado.

Quando usar: Para recopilar una hora específica del usuario.

html

<input type="time">

Selector de Fecha y Hora Local

Crea un campo de entrada para seleccionar una fecha y hora local, sin información de zona horaria. Combina las funcionalidades de `type="date"` y `type="time"`.

Quando usar: Para recopilar una fecha y hora local combinadas.

html

<input type="datetime-local">

Selector de Mes

Crea un campo de entrada para seleccionar un mes y año. Útil para fechas de vencimiento de tarjetas de crédito o períodos de tiempo.

Quando usar: Para recopilar solo el mes y el año.

html

<input type="month">

Selector de Semana

Crea un campo de entrada para seleccionar una semana y año. El formato de visualización puede variar entre navegadores.

Quando usar: Para recopilar una semana específica del año.

html

<input type="week">

Selector de Color

Crea un campo de entrada para seleccionar un color. Los navegadores generalmente proporcionan un selector de colores (color picker) nativo, retornando el valor en formato hexadecimal (e.g., `#RRGGBB`).

Quando usar: Para permitir que el usuario elija un color.

html

<input type="color">

Control Deslizante (Range)

Crea un control deslizante (slider) para seleccionar un valor dentro de un intervalo especificado. Los atributos `min`, `max` y `step` definen el comportamiento y los límites del control.

Quando usar: Para permitir la selección de un valor numérico dentro de un intervalo, como volumen o zoom.

html

<input type="range">

Subida de Archivos

Crea un campo de entrada que permite al usuario seleccionar uno o más archivos de su dispositivo para subir al servidor. El atributo `multiple` permite la selección de múltiples archivos.

Quando usar: Para permitir que el usuario suba archivos.

html

<input type="file">

Validación de Formularios HTML5

7 snippets

Atributos HTML5 para validación nativa de formularios, reduciendo la necesidad de JavaScript.

Campo Obligatorio

Un atributo booleano que hace que el campo del formulario sea obligatorio. El formulario no puede enviarse si el campo está vacío. El navegador mostrará un mensaje de error estándar.

Quando usar: Para campos que deben rellenarse antes de enviar el formulario.

html

required

Patrón de Validación (Pattern)

Define una expresión regular que la entrada del campo debe coincidir para ser considerada válida. Usado para validación de formato personalizada (e.g., código postal, formato de nombre).

Quando usar: Para validar el formato de la entrada de un campo usando expresiones regulares.

html

pattern="[A-Za-z]{3}"

Longitud Mínima

Define el número mínimo de caracteres que un campo de texto (`<input type="text">`, `<textarea>`) debe tener para ser válido.

Quando usar: Para asegurar que la entrada de texto tenga un número mínimo de caracteres.

html

minlength="3"

Longitud Máxima

Define el número máximo de caracteres que un campo de texto (`<input type="text">`, `<textarea>`) puede tener.

Quando usar: Para limitar el número de caracteres que se pueden introducir en un campo de texto.

html

maxlength="50"

Valor Mínimo

Define el valor mínimo permitido para campos numéricos (`type="number"`, `type="range"`) o de fecha/hora (`type="date"`, `type="time"`).

Quando usar: Para definir el valor mínimo aceptable para entradas numéricas o de fecha/hora.

html

min="0"

Valor Máximo

Define o valor máximo permitido para campos numéricos (`type="number"`, `type="range"`) ou de data/hora (`type="date"`, `type="time"`).

Quando usar: Para definir o valor máximo aceitável para entradas numéricas ou de data/hora.

html

max="100"

Incremento (Step)

Define el incremento permitido para campos numéricos (`type="number"`, `type="range"`) o de fecha/hora. Por ejemplo, un `step` de 5 permitiría solo múltiplos de 5 (0, 5, 10...).

Quando usar: Para controlar los incrementos de valores en campos numéricos o de tiempo.

html

step="5"

Elementos Auxiliares de Formulario

5 snippets

Elementos HTML5 que mejoran la experiencia del usuario con sugerencias, feedback visual y resultados dinámicos.

Lista de Opciones Predefinidas (Datalist)

Proporciona una lista de opciones predefinidas para un campo `<input>`. El usuario puede escribir y el navegador sugiere opciones de la lista, o puede elegir directamente. El `id` del `<datalist>` es referenciado por el atributo `list` del `<input>`.

Quando usar: Para proporcionar sugerencias de autocompletado para campos de texto.

html

<datalist>

Resultado de Cálculo (Output)

Muestra el resultado de un cálculo o la salida de una acción del usuario. Usado en conjunto con JavaScript para actualizar dinámicamente el valor mostrado basándose en la entrada del usuario en otros campos del formulario.

Quando usar: Para mostrar resultados de cálculos o feedback dinámico en formularios.

html

<output>

Barra de Progreso

Representa el progreso de una tarea. Puede usarse para indicar el progreso de una descarga, subida, carga de página o cualquier otra operación que tenga un valor máximo conocido. Los atributos `value` y `max` definen el progreso.

Quando usar: Para mostrar el progreso de una tarea en curso.

html

<progress>

Medidor Escalar (Meter)

Representa un valor escalar dentro de un rango conocido. Usado para mostrar medidas como uso de disco, relevancia de un resultado de búsqueda, temperatura o cualquier valor dentro de un límite. Diferente de `<progress>`, que muestra el progreso de una tarea.

Quando usar: Para mostrar un valor dentro de un rango fijo, como un medidor de batería.

html

<meter>

Generación de Claves (Keygen - Obsoleto)

Elemento obsoleto, usado para generar un par de claves (pública/privada) para autenticación. No debe usarse en nuevos desarrollos debido a problemas de seguridad y falta de soporte moderno. Fue eliminado del estándar HTML5.

Quando usar: Evitar su uso, ya que es obsoleto y no está soportado.

html

<keygen>

🎬 Audio y Video

6 snippets

Elementos HTML5 para incorporar y controlar contenido multimedia directamente en páginas web.

Reproductor de Audio

Incorpora contenido de audio en el documento. El atributo `controls` añade los controles de reproducción estándar del navegador (play/pause, volumen, barra de progreso, etc.), permitiendo la interacción del usuario.

Quando usar: Para incorporar archivos de audio en su página.

html

<audio controls>

Reproductor de Video

Incorpora contenido de video en el documento. El atributo `controls` añade los controles de reproducción estándar del navegador (play/pause, volumen, barra de progreso, pantalla completa, etc.), permitiendo la interacción del usuario.

Quando usar: Para incorporar archivos de video en su página.

html

<video controls>

Fuente de Medios

Especifica múltiples fuentes de medios para los elementos `<audio>` o `<video>`. El navegador elige la primera fuente que puede reproducir, basándose en el atributo `type` (e.g., `video/mp4`, `audio/mpeg`), garantizando compatibilidad entre navegadores.

Quando usar: Para proporcionar diferentes formatos de audio/video para una amplia compatibilidad.

html

<source src="file.mp4" type="video/mp4">

Pista de Subtítulos/Descripciones

Permite añadir pistas de texto temporizadas (como subtítulos, subtítulos ocultos, descripciones, capítulos) a elementos `<video>` o `<audio>`. El atributo `kind` define el tipo de pista (e.g., `subtitles`, `captions`, `descriptions`).

Quando usar: Para añadir subtítulos, descripciones u otros metadatos temporizados a medios.

html

<track kind="subtitles" src="subtitles.vtt">

Video con Reproducción Automática

Un video configurado para iniciar la reproducción automáticamente (`autoplay`), repetir indefinidamente (`loop`) y con el audio desactivado (`muted`) al cargar la página. Común para videos de fondo o banners, ya que los navegadores generalmente bloquean `autoplay` con sonido.

Quando usar: Para videos de fondo o que no deben tener sonido y se repiten automáticamente.

html

<video autoplay loop muted>

Imagen de Póster del Video

Define una imagen que se mostrará en el reproductor de video antes de que el video comience a reproducirse, mientras el video se está descargando o si el video no puede cargarse. Sirve como una miniatura o portada.

Quando usar: Para mostrar una imagen de previsualización para el video.

html

<video poster="poster.jpg">

Gráficos y Canvas

4 snippets

Elementos para crear gráficos dinámicos y vectoriales directamente en el navegador.

Elemento Canvas

Proporciona un área de dibujo rectangular en la página HTML, donde gráficos pueden ser renderizados dinámicamente usando JavaScript (API Canvas). Ideal para juegos, visualización de datos, animaciones complejas y edición de imágenes.

Quando usar: Para dibujo gráfico dinámico vía JavaScript.

html

<canvas>

Gráfico Vectorial Escalable (SVG)

Define gráficos vectoriales escalables (Scalable Vector Graphics). Las imágenes SVG están basadas en XML, pueden ser dimensionadas a cualquier tamaño sin pérdida de calidad y son manipulables vía CSS y JavaScript, haciéndolas ideales para iconos e ilustraciones.

Quando usar: Para gráficos vectoriales que necesitan ser escalables y manipulables.

html

<svg>

Canvas con Dimensiones

Crea un elemento canvas con dimensiones específicas de ancho y alto en píxeles. Estas dimensiones definen el espacio de coordenadas para el dibujo y son importantes para la renderización correcta del contenido.

Quando usar: Al definir las dimensiones iniciales para el área de dibujo del canvas.

html

<canvas width="300" height="150">

SVG con ViewBox

Define las dimensiones y la posición del área de visualización de un SVG. Los cuatro valores representan `min-x`, `min-y`, `width` y `height` del sistema de coordenadas del usuario, permitiendo que el SVG se escale para ajustarse al contenedor.

Quando usar: Para controlar el sistema de coordenadas y el escalado de un SVG.

html

<svg viewBox="0 0 100 100">

Elementos Gráficos Adicionales

4 snippets

Elementos para crear interactividad en imágenes y garantizar la correcta representación de SVG.

Mapa de Imagen

Define un mapa de imagen del lado del cliente, que permite crear áreas clicables (hotspots) en una imagen. Usado en conjunto con el elemento `<area>` y referenciado por el atributo `usemap` de una `<img>`.

Quando usar: Para criar áreas clicáveis em uma imagem.

html

<map>

Área Clicable en Mapa

Define un área clicable (hotspot) dentro de un mapa de imagen (`<map>`). Los atributos `shape` (e.g., `rect`, `circle`, `poly`) y `coords` definen la forma y posición del área, y `href` el destino del enlace.

Quando usar: Para definir las regiones interactivas dentro de un mapa de imagen.

html

<area>

Canvas con ID para JavaScript

Un elemento canvas con un identificador único (`id`), permitiendo que sea fácilmente accedido y manipulado por scripts JavaScript usando `document.getElementById()`.

Quando usar: Para interactuar con el canvas usando JavaScript.

html

<canvas id="myCanvas">

SVG con Namespace

Declara el namespace XML para el elemento SVG, indicando que el contenido dentro de la etiqueta `<svg>` debe interpretarse como gráficos vectoriales escalables. Aunque a menudo implícito en HTML5, es una buena práctica para la compatibilidad.

Quando usar: Al incorporar SVG directamente en HTML, especialmente para garantizar compatibilidad con parsers XML.

html

<svg xmlns="http://www.w3.org/2000/svg">

🔍 Metadatos Esenciales para SEO

5 snippets

Elementos meta cruciales para la optimización en motores de búsqueda y correcta visualización de la página.

Descripción de la Página

Proporciona una breve y precisa descripción del contenido de la página, que puede ser mostrada por los motores de búsqueda en los resultados de la búsqueda (SERP). Crucial para atraer clics y mejorar el SEO.

Quando usar: Para proporcionar un resumen conciso del contenido de la página para SEO.

html

<meta name="description" content="...">

Palabras clave (Keywords)

Lista de palabras clave relacionadas con el contenido de la página. Aunque su importancia para SEO ha disminuido significativamente para los principales motores de búsqueda, aún puede ser útil para algunas herramientas y contextos específicos.

Quando usar: Opcional, para listar palabras clave relevantes (impacto mínimo en el SEO moderno).

html

<meta name="keywords" content="...">

Autor de la Página

Especifica el nombre del autor del documento HTML. Útil para atribución, gestión de contenido y, en algunos casos, para SEO de contenido autoral.

Quando usar: Para identificar al autor del contenido de la página.

html

<meta name="author" content="...">

Directivas para Robots de Búsqueda

Instruye a los robots de los motores de búsqueda sobre cómo indexar y seguir enlaces en la página. `index` permite la indexación, `follow` permite seguir enlaces. Otros valores incluyen `noindex` (no indexar) y `nofollow` (no seguir enlaces).

Quando usar: Para controlar cómo los motores de búsqueda interactúan con su página.

html

<meta name="robots" content="index, follow">

Configuración de Viewport (SEO Móvil)

Configura la viewport para dispositivos móviles, controlando el ancho del área visible y el nivel de zoom inicial. Esencial para diseño responsivo y un factor de clasificación importante para SEO mobile-first.

Quando usar: En todas las páginas para garantizar responsividad y buena clasificación en búsquedas móviles.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open Graph para Redes Sociales

5 snippets

Metatags del protocolo Open Graph para controlar cómo se muestra el contenido al compartirlo en Facebook, LinkedIn y WhatsApp.

Título Open Graph

Define el título que se mostrará cuando la página sea compartida en redes sociales como Facebook y LinkedIn. Forma parte del protocolo Open Graph y debe ser conciso y atractivo.

Quando usar: Para definir el título de compartición en redes sociales.

html

<meta property="og:title" content="...">

Descripción Open Graph

Define la descripción que se mostrará cuando la página sea compartida en redes sociales, proporcionando un resumen del contenido. Debe ser persuasiva e informativa.

Quando usar: Para definir la descripción de compartición en redes sociales.

html

<meta property="og:description" content="...">

Imagen Open Graph

Define la URL de una imagen que se mostrará como miniatura (thumbnail) cuando la página sea compartida en redes sociales. Es crucial para el engagement visual.

Quando usar: Para definir la imagen de previsualización para compartir en redes sociales.

html

<meta property="og:image" content="...">

URL Canónica Open Graph

Define la URL canónica de la página para Open Graph, asegurando que todas las referencias de compartición apunten a la misma URL, evitando problemas de contenido duplicado.

Quando usar: Para especificar la URL preferencial de la página para redes sociales.

html

<meta property="og:url" content="...">

Tipo de Contenido Open Graph

Define el tipo de objeto que la página representa (e.g., "website", "article", "video.movie"). Ayuda a las redes sociales a entender el contexto del contenido y a mostrar información relevante.

Quando usar: Para categorizar el tipo de contenido de la página para redes sociales.

html

<meta property="og:type" content="website">

Twitter Cards

4 snippets

Metatags específicas para controlar la visualización de enlaces compartidos en Twitter.

Tipo de Twitter Card

Define el tipo de "card" de Twitter a ser mostrado cuando la página sea compartida. `summary` es una card estándar con título, descripción y una pequeña miniatura. Otros tipos incluyen `summary_large_image` y `app`.

Quando usar: Para definir el diseño de la card de compartición en Twitter.

html

<meta name="twitter:card" content="summary">

Título para Twitter

Define el título específico para la Twitter Card, que puede ser diferente del `og:title` si hay necesidad de optimización para Twitter.

Quando usar: Para un título optimizado específicamente para Twitter.

html

<meta name="twitter:title" content="...">

Descripción para Twitter

Define la descripción específica para el Twitter Card, que puede ser diferente del `og:description` para adaptarse a los límites de caracteres o estilo de Twitter.

Quando usar: Para una descripción optimizada específicamente para Twitter.

html

<meta name="twitter:description" content="...">

Imagen para Twitter

Define la URL de la imagen específica para la Twitter Card. Es importante para la representación visual del enlace en Twitter.

Quando usar: Para una imagen de previsualización optimizada específicamente para Twitter.

html

<meta name="twitter:image" content="...">

Optimización de Rendimiento

4 snippets

Elementos link que ayudan a mejorar el tiempo de carga precargando o preconectando recursos.

Precarga de Recursos

Instruye al navegador a precargar un recurso (como una fuente, imagen, script o hoja de estilo) que será necesario pronto en la página. Esto garantiza que el recurso esté disponible antes, mejorando el tiempo de carga percibido.

Quando usar: Para recursos esenciales que deben ser cargados lo más rápido posible.

html

<link rel="preload" href="...">

Prefetch de Recursos

Instruye al navegador a prefetch un recurso que puede ser necesario en navegaciones futuras, pero no inmediatamente en la página actual. Ayuda a acelerar la navegación entre páginas, ya que el recurso ya estará en caché.

Quando usar: Para recursos que pueden ser necesarios en páginas futuras.

html

<link rel="prefetch" href="...">

Pre-resolución DNS

Instruye al navegador a resolver el DNS de un dominio antes de que el recurso sea realmente solicitado. Reduce la latencia para recursos de dominios externos, como CDNs o APIs de terceros.

Quando usar: Para acelerar la resolución de DNS para dominios externos.

html

<link rel="dns-prefetch" href="...">

URL Canónica para SEO

Especifica la URL canónica preferencial para la página, ayudando a los motores de búsqueda a evitar problemas de contenido duplicado y a consolidar señales de clasificación (como enlaces y métricas) para la versión principal de la página.

Quando usar: Para indicar la URL preferencial de una página, especialmente en casos de contenido duplicado.

html

<link rel="canonical" href="...">

♿ Atributos ARIA para Accesibilidad

5 snippets

Atributos WAI-ARIA para mejorar la accesibilidad, proporcionando información semántica para tecnologías asistivas.

Etiqueta Accesible (aria-label)

Proporciona una etiqueta de texto accesible para un elemento cuando no hay una etiqueta visible disponible (e.g., un botón de icono). Usado por tecnologías asistivas (lectores de pantalla) para describir el elemento.

Quando usar: Para proporcionar una etiqueta textual para elementos sin texto visible, como botones de icono.

html

aria-label="descrição"

Descripción por ID (aria-describedby)

Asocia un elemento con otro que proporciona una descripción más detallada. El valor es el `id` del elemento que contiene la descripción, permitiendo que los lectores de pantalla lean la descripción asociada.

Quando usar: Para asociar un elemento a una descripción más larga y detallada en otro elemento.

html

aria-describedby="id"

Estado Expandido/Colapsado (aria-expanded)

Indica el estado de un elemento expandible (como un menú desplegable, acordeón o botón que revela contenido), informando si está expandido (`true`) o colapsado (`false`).

Quando usar: Para indicar si un componente (menú, acordeón) está abierto o cerrado.

html

aria-expanded="true"

Ocultar de Tecnologías Asistivas (aria-hidden)

Elimina un elemento y todos sus descendientes del árbol de accesibilidad, haciéndolo invisible para las tecnologías asistivas (lectores de pantalla). Usado para contenido puramente decorativo u oculto que no debe ser anunciado.

Quando usar: Para ocultar elementos puramente decorativos de lectores de pantalla.

html

aria-hidden="true"

Región de Actualización Dinámica (aria-live)

Define una región "en vivo" que debe ser anunciada por tecnologías asistivas cuando su contenido cambia dinámicamente. `polite` significa que los cambios se anuncian cuando el usuario está inactivo, mientras que `assertive` anuncia inmediatamente.

Quando usar: Para anunciar actualizaciones de contenido dinámico (e.g., mensajes de error, resultados de búsqueda).

html

aria-live="polite"

Roles Semánticos ARIA

5 snippets

Atributos role para definir la función o propósito de un elemento, especialmente con elementos no semánticos.

Rol de Navegación

Define que el elemento actúa como una región de navegación, conteniendo enlaces para navegar en el documento o en documentos relacionados. Usado cuando un elemento no semántico (como `div`) es usado para navegación.

Quando usar: Para indicar que un elemento es un área de navegación (si no es <nav>).

html

role="navigation"

Rol de Contenido Principal

Define que el elemento contiene el contenido principal del documento. Usado cuando un elemento no semántico (como `div`) se utiliza para el contenido principal, como un fallback para navegadores antiguos que no soportan `<main>`.

Quando usar: Para indicar el contenido principal de la página (si no es <main>).

html

role="main"

Rol de Contenido Complementario

Define que el elemento contiene contenido de soporte que complementa el contenido principal, pero está separado de él. Similar a `<aside>`, usado cuando se emplea un `div`.

Quando usar: Para indicar contenido complementario (si no es <aside>).

html

role="complementary"

Rol de Búsqueda

Define que el elemento es una región que contiene un mecanismo de búsqueda para el documento o sitio. Ayuda a las tecnologías asistivas a identificar rápidamente la funcionalidad de búsqueda.

Quando usar: Para identificar el área de búsqueda en su página.

html

role="search"

Rol de Alerta

Define que el elemento es un mensaje de alerta importante que se añade dinámicamente y debe ser anunciado inmediatamente por tecnologías asistivas. Usado para notificaciones críticas que requieren atención inmediata.

Quando usar: Para mensajes de alerta importantes que requieren atención inmediata.

html

role="alert"

Navegación por Teclado y Foco

4 snippets

Atributos para controlar el orden de tabulación y el foco, esencial para usuarios que navegan con teclado.

Elemento Enfocable (tabindex="0")

Hace que un elemento sea enfocable vía teclado y lo incluye en el orden de tabulación estándar del documento, siguiendo el orden del DOM. Permite que elementos que normalmente no son enfocables (como `div` o `span`) reciban foco.

Quando usar: Para hacer que elementos no interactivos sean enfocables vía teclado en el orden natural.

html

tabindex="0"

Enfocable Programáticamente (tabindex="-1")

Hace que un elemento sea enfocable programáticamente (vía JavaScript usando `.focus()`), pero lo elimina del orden de tabulación estándar del teclado. Útil para enfocar elementos dinámicamente sin interferir en la navegación lineal.

Quando usar: Para enfocar elementos vía JavaScript sin incluirlos en el orden de tabulación.

html

tabindex="-1"

Tecla de Acceso Directo (Accesskey)

Define una tecla de acceso directo para un elemento, permitiendo que el usuario active el elemento presionando una combinación de teclas (varía por navegador y sistema operativo, e.g., Alt+Shift+S en Chrome).

Quando usar: Para proporcionar atajos de teclado para elementos importantes (usar con moderación).

html

accesskey="s"

Foco Automático

Un atributo booleano que hace que un elemento de formulario sea automáticamente enfocado cuando la página es cargada. Solo un elemento puede tener `autofocus` por página. Puede ser problemático para la accesibilidad si no se usa con cuidado.

Quando usar: Para enfocar automáticamente un campo de formulario crucial al cargar la página.

html

autofocus

Contenido Alternativo para Accesibilidad

4 snippets

Técnicas para proporcionar alternativas textuales y contextuales para contenido no textual.

Texto Alternativo para Imágenes

Proporciona una descripción textual alternativa para una imagen. Esencial para usuarios de lectores de pantalla y cuando la imagen no puede ser cargada, transmitiendo el significado de la imagen.

Quando usar: Siempre para imágenes que transmiten información importante.

html

<img src="..." alt="Descrição detalhada">

Imagen Decorativa

Indica que la imagen es puramente decorativa y no transmite información importante. El `alt=""` vacío y `role="presentation"` instruyen a los lectores de pantalla a ignorarla, evitando ruido innecesario.

Quando usar: Para imágenes que no añaden valor informativo, como iconos puramente visuales.

html

<img src="..." alt="" role="presentation">

Descripción Larga (longdesc - Obsoleto)

Un atributo obsoleto para `<img>` que apuntaba a un documento HTML que contenía una descripción larga de la imagen. Fue reemplazado por `aria-describedby` o por descripciones en el texto adyacente a la imagen.

Quando usar: Evitar su uso, ya que es obsoleto.

html

<longdesc="descricao.html">

Figura con Leyenda Accesible

Asocia un elemento `<figure>` a una leyenda (`<figcaption>`) usando su `id`, mejorando la accesibilidad para lectores de pantalla que pueden no asociar automáticamente. El `aria-labelledby` apunta al `id` de la `<figcaption>` u otro elemento de etiqueta.

Quando usar: Para asociar explícitamente una figura a su leyenda para lectores de pantalla.

html