Google odia los <div>. Usa la estructura semántica correcta para posicionar tu sitio en lo más alto sin gastar en anuncios.
Fundamentos para crear cualquier página HTML, incluyendo declaración del documento, metadatos esenciales y elementos base del cuerpo.
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.
<!DOCTYPE html>Cuándo usar: Al iniciar cualquier documento HTML para definir la versión de 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).
<html lang="pt-BR">Cuándo usar: Siempre como el primer elemento dentro del DOCTYPE.
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.
<head>Cuándo usar: Para incluir toda la información no visible de la página.
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.
<body>Cuándo usar: Para envolver todo el contenido que se mostrará en el navegador.
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.
<meta charset="UTF-8">Cuándo usar: Siempre al inicio del <head> para evitar problemas de codificación.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Cuándo usar: En todas las páginas para garantizar responsividad en dispositivos móviles.
Elementos esenciales para estructurar texto, definir jerarquía de títulos y controlar el flujo de contenido.
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.
<h1> a <h6>Cuándo usar: Para definir la jerarquía y estructura de encabezados en su contenido.
Representa un párrafo de texto. Es el elemento fundamental para bloques de texto en un documento HTML, separando el contenido en unidades legibles.
<p>Cuándo usar: Para cualquier bloque de texto que forma un párrafo.
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).
<br>Cuándo usar: Cuando se necesita un salto de línea, pero un nuevo párrafo no es semánticamente apropiado.
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.
<hr>Cuándo usar: Para indicar un cambio de tema o sección dentro del contenido.
Tags para aplicar formato y dar significado semántico a partes específicas del texto.
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>`.
<strong>Cuándo usar: Para destacar contenido crítico o de alta prioridad.
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>`.
<em>Cuándo usar: Para dar énfasis a una palabra o frase que cambia el sentido de la oración.
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.
<mark>Cuándo usar: Para resaltar texto relevante en un contexto específico, como resultados de búsqueda.
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.
<small>Cuándo usar: Para información de copyright, avisos legales o texto de pie de página.
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.
<del>Cuándo usar: Para mostrar cambios en un documento, como precios antiguos.
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.
<ins>Cuándo usar: Para mostrar texto que ha sido añadido a un documento revisado.
Elementos para crear hipervínculos e incorporar imágenes en páginas web.
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.
<a href="url">Cuándo usar: Para crear enlaces de navegación o referencias externas.
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.
<a href="url" target="_blank">Cuándo usar: Para abrir enlaces externos sin sacar al usuario de la página actual.
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.
<img src="caminho" alt="descrição">Cuándo usar: Para mostrar imágenes en su página.
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.
<picture>Cuándo usar: Para servir imágenes optimizadas para diferentes viewports o formatos.
Elementos que proporcionan significado estructural al contenido, mejorando accesibilidad, SEO y mantenimiento del código.
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>`.
<header>Cuándo usar: Para agrupar elementos introductorios, como la parte superior de una página o sección.
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.
<nav>Cuándo usar: Para envolver bloques de enlaces de navegación primaria.
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.
<main>Cuándo usar: Para delimitar el contenido principal y único de su página.
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.
<section>Cuándo usar: Para agrupar contenido relacionado que forma una sección lógica.
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.
<article>Cuándo usar: Para contenido que puede leerse de forma independiente, como un artículo de blog.
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.
<aside>Cuándo usar: Para barras laterales, cajas de cita o información relacionada.
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.
<footer>Cuándo usar: Para agrupar información de pie de página, como derechos de autor y enlaces de contacto.
Tags que agregan significado estructural y contextual a bloques de texto específicos.
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.
<blockquote>Cuándo usar: Para citar bloques de texto de otras fuentes.
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.
<cite>Cuándo usar: Para referenciar el título de una obra citada.
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.
<code>Cuándo usar: Para mostrar fragmentos de código inline o dentro de un párrafo.
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.
<pre>Cuándo usar: Para mostrar bloques de código o texto que requieren formato exacto.
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.
<abbr>Cuándo usar: Para marcar abreviações e fornecer seu significado completo.
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.
<address>Cuándo usar: Para mostrar información de contacto de forma semántica.
Elementos para incorporar figuras, leyendas y otros tipos de contenido externo.
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.
<figure>Cuándo usar: Para agrupar una imagen, código u otro contenido con su leyenda.
Proporciona una leyenda o descripción para el contenido de un elemento `<figure>`. Debe ser el primer o el último hijo de un `<figure>`.
<figcaption>Cuándo usar: Para añadir una leyenda descriptiva a un elemento <figure>.
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.
<iframe>Cuándo usar: Para incorporar contenido de otras fuentes o documentos HTML.
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).
<embed>Cuándo usar: Para incorporar contenido de plugins externos o medios no HTML.
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.
<object>Cuándo usar: Para incorporar objetos externos con más control sobre fallbacks.
Elementos para organizar información en listas ordenadas, no ordenadas o de definición.
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.
<ul>Cuándo usar: Para listas donde el orden de los ítems no es relevante (e.g., lista de compras).
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.
<ol>Cuándo usar: Para listas donde el orden de los elementos es importante (e.g., pasos de una receta).
Representa un elemento individual dentro de una lista (`<ul>` o `<ol>`). Debe ser un hijo directo de `<ul>`, `<ol>` o `<menu>`.
<li>Cuándo usar: Para cada elemento dentro de una lista ordenada o no ordenada.
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.
<dl>Cuándo usar: Para crear glosarios o listas de términos y sus definiciones.
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>`.
<dt>Cuándo usar: Para definir el término en una lista de definición.
Representa la descripción o definición de un término (`<dt>`) dentro de una lista de definición (`<dl>`).
<dd>Cuándo usar: Para proporcionar la descripción o explicación de un término en una lista de definición.
Atributos para personalizar la apariencia y comportamiento de listas.
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.
<ol type="1">Cuándo usar: Para listas ordenadas con numeración estándar.
Define una lista ordenada que usa letras mayúsculas (A, B, C...) como marcadores para los elementos de la lista.
<ol type="A">Cuándo usar: Para listas ordenadas que usan letras mayúsculas como marcadores.
Define una lista ordenada que usa letras minúsculas (a, b, c...) como marcadores para los elementos de la lista.
<ol type="a">Cuándo usar: Para listas ordenadas que usan letras minúsculas como marcadores.
Define una lista ordenada que usa números romanos mayúsculos (I, II, III...) como marcadores para los elementos de la lista.
<ol type="I">Cuándo usar: Para listas ordenadas que usan números romanos como marcadores.
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.
<ol start="5">Cuándo usar: Para continuar una lista desde un punto específico o cuando el orden lógico requiere un inicio diferente.
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.
<ul style="list-style-type: none;">Cuándo usar: Cuando quieres eliminar los marcadores predeterminados y estilizar la lista con CSS.
Elementos fundamentales para crear y organizar datos en formato tabular.
El contenedor principal para datos tabulares. Define una tabla HTML, agrupando todos sus elementos (encabezado, cuerpo, pie de página, filas y celdas).
<table>Cuándo usar: Para crear cualquier tabla de datos.
Agrupa el contenido del encabezado de una tabla. Contiene la información de encabezado de las columnas, generalmente usando elementos `<th>`.
<thead>Cuándo usar: Para definir el encabezado semántico de una tabla.
Agrupa el contenido del cuerpo de una tabla. Contiene las filas de datos principales de la tabla, usando elementos `<tr>` y `<td>`.
<tbody>Cuándo usar: Para definir el cuerpo principal de datos de una 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.
<tfoot>Cuándo usar: Para definir el pie semántico de una tabla, como totales o notas.
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).
<tr>Cuándo usar: Para cada nueva fila de datos o encabezado en la tabla.
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.
<th>Cuándo usar: Para celdas que sirven como encabezados de columnas o filas.
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.
<td>Cuándo usar: Para cada celda de datos común en una tabla.
Atributos para controlar la presentación y layout de celdas en tablas HTML.
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.
<table border="1">Cuándo usar: Evitar su uso. Preferir CSS para el estilo de los bordes.
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.
<td colspan="2">Cuándo usar: Para fusionar celdas horizontalmente, abarcando múltiples columnas.
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.
<td rowspan="3">Cuándo usar: Para combinar celdas verticalmente, abarcando múltiples filas.
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.
<th scope="col">Cuándo usar: Para indicar que un <th> es el encabezado de una columna entera.
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.
<th scope="row">Cuándo usar: Para indicar que un <th> es el encabezado de una fila entera.
Elementos básicos para construir formularios HTML y agrupar campos de forma lógica.
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.
<form>Cuándo usar: Para iniciar la creación de un formulario para la recolección de datos.
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.
<form action="/submit" method="post">Cuándo usar: Para configurar cómo y a dónde se enviarán los datos del formulario.
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.
<fieldset>Cuándo usar: Para agrupar lógicamente campos relacionados en un formulario.
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.
<legend>Cuándo usar: Para dar un título a un grupo de campos dentro de un <fieldset>.
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.
<label for="id">Cuándo usar: Para proporcionar etiquetas accesibles para todos los campos de formulario.
Tipos de campos de entrada más comunes para recopilar diferentes tipos de datos del usuario.
Crea un campo de entrada de texto de una sola línea para datos generales, como nombres, apellidos o direcciones cortas.
<input type="text">Cuándo usar: Para entrada de texto genérico de una sola línea.
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.
<input type="email">Cuándo usar: Para recopilar direcciones de correo electrónico.
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.
<input type="password">Cuándo usar: Para recopilar contraseñas o información sensible que debe ser enmascarada.
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`.
<input type="number">Cuándo usar: Para recopilar entradas numéricas, como edad o cantidad.
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.
<input type="tel">Cuándo usar: Para recopilar números de teléfono.
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.
<input type="url">Cuándo usar: Para recopilar direcciones de sitios web o enlaces.
Elementos para permitir que los usuarios elijan entre opciones predefinidas.
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.
<input type="checkbox">Cuándo usar: Cuando el usuario puede seleccionar varias opciones de una lista.
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.
<input type="radio">Cuándo usar: Cuando el usuario debe seleccionar solo una opción de un grupo.
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>`.
<select>Cuándo usar: Para permitir que el usuario seleccione una o más opciones de una lista larga.
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.
<option>Cuándo usar: Para cada elemento seleccionable dentro de un <select>.
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.
<optgroup>Cuándo usar: Para organizar opciones en un <select> en categorías lógicas.
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).
<textarea>Cuándo usar: Para recopilar entradas de texto largas, como comentarios o descripciones.
Elementos para envío, reset u otras acciones en un formulario.
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.
<button type="submit">Cuándo usar: Para enviar los datos de un formulario.
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.
<button type="reset">Cuándo usar: Para permitir que el usuario limpie y reinicie el formulario.
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.
<button type="button">Cuándo usar: Para botones que ejecutan acciones JavaScript sin enviar el formulario.
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.
<input type="submit">Cuándo usar: Para enviar los datos de un formulario, como alternativa a <button type="submit">.
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.
<input type="reset">Cuándo usar: Para permitir que el usuario limpie y reinicie el formulario, como alternativa a <button type="reset">.
Nuevos tipos de campos de entrada HTML5 para recopilar datos específicos con validación e interfaces mejoradas.
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.
<input type="date">Cuándo usar: Para recolectar una fecha específica del usuario.
Crea un campo de entrada para seleccionar una hora (horas y minutos). Los navegadores pueden ofrecer un control de tiempo optimizado.
<input type="time">Cuándo usar: Para recopilar una hora específica del usuario.
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"`.
<input type="datetime-local">Cuándo usar: Para recopilar una fecha y hora local combinadas.
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.
<input type="month">Cuándo usar: Para recopilar solo el mes y el año.
Crea un campo de entrada para seleccionar una semana y año. El formato de visualización puede variar entre navegadores.
<input type="week">Cuándo usar: Para recopilar una semana específica del año.
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`).
<input type="color">Cuándo usar: Para permitir que el usuario elija un color.
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.
<input type="range">Cuándo usar: Para permitir la selección de un valor numérico dentro de un intervalo, como volumen o zoom.
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.
<input type="file">Cuándo usar: Para permitir que el usuario suba archivos.
Atributos HTML5 para validación nativa de formularios, reduciendo la necesidad de JavaScript.
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.
requiredCuándo usar: Para campos que deben rellenarse antes de enviar el formulario.
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).
pattern="[A-Za-z]{3}"Cuándo usar: Para validar el formato de la entrada de un campo usando expresiones regulares.
Define el número mínimo de caracteres que un campo de texto (`<input type="text">`, `<textarea>`) debe tener para ser válido.
minlength="3"Cuándo usar: Para asegurar que la entrada de texto tenga un número mínimo de caracteres.
Define el número máximo de caracteres que un campo de texto (`<input type="text">`, `<textarea>`) puede tener.
maxlength="50"Cuándo usar: Para limitar el número de caracteres que se pueden introducir en un campo de texto.
Define el valor mínimo permitido para campos numéricos (`type="number"`, `type="range"`) o de fecha/hora (`type="date"`, `type="time"`).
min="0"Cuándo usar: Para definir el valor mínimo aceptable para entradas numéricas o de fecha/hora.
Define o valor máximo permitido para campos numéricos (`type="number"`, `type="range"`) ou de data/hora (`type="date"`, `type="time"`).
max="100"Cuándo usar: Para definir o valor máximo aceitável para entradas numéricas ou de data/hora.
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...).
step="5"Cuándo usar: Para controlar los incrementos de valores en campos numéricos o de tiempo.
Elementos HTML5 que mejoran la experiencia del usuario con sugerencias, feedback visual y resultados dinámicos.
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>`.
<datalist>Cuándo usar: Para proporcionar sugerencias de autocompletado para campos de texto.
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.
<output>Cuándo usar: Para mostrar resultados de cálculos o feedback dinámico en formularios.
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.
<progress>Cuándo usar: Para mostrar el progreso de una tarea en curso.
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.
<meter>Cuándo usar: Para mostrar un valor dentro de un rango fijo, como un medidor de batería.
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.
<keygen>Cuándo usar: Evitar su uso, ya que es obsoleto y no está soportado.
Elementos HTML5 para incorporar y controlar contenido multimedia directamente en páginas web.
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.
<audio controls>Cuándo usar: Para incorporar archivos de audio en su página.
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.
<video controls>Cuándo usar: Para incorporar archivos de video en su página.
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.
<source src="file.mp4" type="video/mp4">Cuándo usar: Para proporcionar diferentes formatos de audio/video para una amplia compatibilidad.
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`).
<track kind="subtitles" src="subtitles.vtt">Cuándo usar: Para añadir subtítulos, descripciones u otros metadatos temporizados a medios.
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.
<video autoplay loop muted>Cuándo usar: Para videos de fondo o que no deben tener sonido y se repiten automáticamente.
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.
<video poster="poster.jpg">Cuándo usar: Para mostrar una imagen de previsualización para el video.
Elementos para crear gráficos dinámicos y vectoriales directamente en el navegador.
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.
<canvas>Cuándo usar: Para dibujo gráfico dinámico vía JavaScript.
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.
<svg>Cuándo usar: Para gráficos vectoriales que necesitan ser escalables y manipulables.
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.
<canvas width="300" height="150">Cuándo usar: Al definir las dimensiones iniciales para el área de dibujo del canvas.
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.
<svg viewBox="0 0 100 100">Cuándo usar: Para controlar el sistema de coordenadas y el escalado de un SVG.
Elementos para crear interactividad en imágenes y garantizar la correcta representación de SVG.
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>`.
<map>Cuándo usar: Para criar áreas clicáveis em uma imagem.
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.
<area>Cuándo usar: Para definir las regiones interactivas dentro de un mapa de imagen.
Un elemento canvas con un identificador único (`id`), permitiendo que sea fácilmente accedido y manipulado por scripts JavaScript usando `document.getElementById()`.
<canvas id="myCanvas">Cuándo usar: Para interactuar con el canvas usando JavaScript.
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.
<svg xmlns="http://www.w3.org/2000/svg">Cuándo usar: Al incorporar SVG directamente en HTML, especialmente para garantizar compatibilidad con parsers XML.
Elementos meta cruciales para la optimización en motores de búsqueda y correcta visualizació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.
<meta name="description" content="...">Cuándo usar: Para proporcionar un resumen conciso del contenido de la página para SEO.
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.
<meta name="keywords" content="...">Cuándo usar: Opcional, para listar palabras clave relevantes (impacto mínimo en el SEO moderno).
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.
<meta name="author" content="...">Cuándo usar: Para identificar al autor del contenido de la página.
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).
<meta name="robots" content="index, follow">Cuándo usar: Para controlar cómo los motores de búsqueda interactúan con su página.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Cuándo usar: En todas las páginas para garantizar responsividad y buena clasificación en búsquedas móviles.
Metatags específicas para controlar la visualización de enlaces compartidos en Twitter.
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`.
<meta name="twitter:card" content="summary">Cuándo usar: Para definir el diseño de la card de compartición en 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.
<meta name="twitter:title" content="...">Cuándo usar: Para un título optimizado específicamente 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.
<meta name="twitter:description" content="...">Cuándo usar: Para una descripción optimizada específicamente 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.
<meta name="twitter:image" content="...">Cuándo usar: Para una imagen de previsualización optimizada específicamente para Twitter.
Elementos link que ayudan a mejorar el tiempo de carga precargando o preconectando 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.
<link rel="preload" href="...">Cuándo usar: Para recursos esenciales que deben ser cargados lo más rápido posible.
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é.
<link rel="prefetch" href="...">Cuándo usar: Para recursos que pueden ser necesarios en páginas futuras.
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.
<link rel="dns-prefetch" href="...">Cuándo usar: Para acelerar la resolución de DNS para dominios externos.
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.
<link rel="canonical" href="...">Cuándo usar: Para indicar la URL preferencial de una página, especialmente en casos de contenido duplicado.
Atributos WAI-ARIA para mejorar la accesibilidad, proporcionando información semántica para tecnologías asistivas.
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.
aria-label="descrição"Cuándo usar: Para proporcionar una etiqueta textual para elementos sin texto visible, como botones de icono.
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.
aria-describedby="id"Cuándo usar: Para asociar un elemento a una descripción más larga y detallada en otro elemento.
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`).
aria-expanded="true"Cuándo usar: Para indicar si un componente (menú, acordeón) está abierto o cerrado.
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.
aria-hidden="true"Cuándo usar: Para ocultar elementos puramente decorativos de lectores de pantalla.
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.
aria-live="polite"Cuándo usar: Para anunciar actualizaciones de contenido dinámico (e.g., mensajes de error, resultados de búsqueda).
Atributos role para definir la función o propósito de un elemento, especialmente con elementos no semánticos.
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.
role="navigation"Cuándo usar: Para indicar que un elemento es un área de navegación (si no es <nav>).
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>`.
role="main"Cuándo usar: Para indicar el contenido principal de la página (si no es <main>).
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`.
role="complementary"Cuándo usar: Para indicar contenido complementario (si no es <aside>).
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.
role="search"Cuándo usar: Para identificar el área de búsqueda en su página.
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.
role="alert"Cuándo usar: Para mensajes de alerta importantes que requieren atención inmediata.
Técnicas para proporcionar alternativas textuales y contextuales para contenido no textual.
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.
<img src="..." alt="Descrição detalhada">Cuándo usar: Siempre para imágenes que transmiten información importante.
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.
<img src="..." alt="" role="presentation">Cuándo usar: Para imágenes que no añaden valor informativo, como iconos puramente visuales.
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.
<longdesc="descricao.html">Cuándo usar: Evitar su uso, ya que es obsoleto.
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.
<figure aria-labelledby="caption1">Cuándo usar: Para asociar explícitamente una figura a su leyenda para lectores de pantalla.