Guía de estilo

Esta guía de estilo de ejemplo muestra toda la variedad de elementos WYSIWYG que puedes usar para contenido editorial extenso en tus páginas o artículos. No es una lista exhaustiva, pero incluye la mayoría de los elementos habituales que podrías necesitar.

Usa class="intro" para textos de apertura que deban destacar más que un párrafo estándar sin dejar de formar parte del contenido de la página.

Usa class="small" para notas secundarias que deban seguir siendo legibles, pero claramente diferenciadas del texto principal.

Usa class="citation" para notas de fuente, créditos breves, pies de foto o apartes editoriales.

Texto editorial

Las páginas editoriales pueden combinar importancia destacada, énfasis, texto eliminado, términos resaltados y code-style labels en línea sin perder fluidez.

Usa <mark> para llamar la atención sobre una frase, <del> o <s> para texto eliminado o que ya no está vigente, y <code> para etiquetas literales, nombres de archivo, configuraciones o referencias técnicas breves.

Usa class="callout" en un párrafo para indicaciones breves, notas de lanzamiento, contexto de compra o información importante sobre políticas.

Escala de encabezados

Los encabezados deben crear una estructura clara. Reserva <h1> para el título principal de la página cuando la plantilla no lo incluya, y usa después <h2> y <h3> para organizar las secciones.

Encabezado de nivel uno para camisas

Encabezado de nivel dos para secciones de la página

Encabezado de nivel tres para subsecciones

Encabezado de nivel cuatro para detalles agrupados

Encabezado de nivel cinco para etiquetas breves

Encabezado de nivel seis para metadatos

Semántica en línea

Usa <kbd> para comandos de teclado como Ctrl + K, <abbr> para abreviaturas como SEO, y <dfn> al introducir un término como contenido estructurado.

Usa <time> para fechas como 25 de junio de 2026, <cite> para títulos o fuentes como The Reset Journal, <var> para variables como n, y <samp> para resultados de ejemplo como Guardado correctamente.

Los ejemplos en línea también incluyen negrita, cursiva, subrayado, tachado, _subíndice, ^superíndice y un enlace de producto.

Dirección

Usa <address> para datos de contacto o ubicación, no para un formato postal general.

Tienda insignia
123 Example Avenue
New York, NY 10001
Ver ubicaciones

Listas

Las listas deben facilitar la lectura rápida sin dejar de admitir suficiente texto para probar el ajuste de línea, los enlaces y el formato en línea.

Lista sin ordenar con pasos ordenados

• Compara los productos cuidadosamente. Empieza con otra camisa destacada y revisa después los detalles más importantes para el uso previsto.
• Planifica el proceso de compra. Un elemento de lista puede incluir pasos ordenados anidados:
  1. Confirma los requisitos de talla, material o estilo.
  2. Revisa el contenido de apoyo, incluidas las preguntas frecuentes y las páginas de políticas.
  3. Elige la opción que mejor equilibre el ajuste, el acabado y la disponibilidad.
• Usa frases concisas, pero incluye suficiente contexto para que cada elemento tenga sentido al leerlo rápidamente.

Lista ordenada con notas sin ordenar

1. Explica el propósito de la página con un párrafo claro y un enlace relevante.
2. Apoya la idea principal con detalles útiles:
   • Resalta los términos clave con moderación.
   • Usa <code> para etiquetas o fragmentos literales.
   • Incluye texto en negrita o con énfasis solo cuando ayude al lector.
3. Cierra la sección con una idea siguiente clara, no con un fragmento inconcluso.

Citas y destacados

Usa citas en bloque para textos con fuente, testimonios, extractos editoriales o declaraciones que necesiten separarse visualmente del texto que las rodea.

El contenido de producto más útil responde preguntas prácticas y, al mismo tiempo, ofrece una perspectiva de marca diferenciada.

Equipo editorial de Reset

Usa class="pullquote" cuando una cita deba tener más impacto visual que una cita en bloque estándar.

Imágenes

Usa figuras cuando una imagen necesite un pie de foto. Los ejemplos siguientes usan <figure class="embed image"> y <figcaption class="caption"> para mostrar la colocación del pie de foto arriba y abajo.

Video alojado

Usa el elemento estándar <video> para contenido MP4 alojado. Mantén el marcado sencillo, a menos que el diseño que lo rodea requiera una estructura adicional.

Iframe de YouTube

Usa el iframe estándar de YouTube cuando debas insertar un video desde YouTube.

Tabla

Las tablas deben incluir encabezados útiles y contenido variado en las celdas para que los lectores puedan comparar detalles rápidamente.

Comparación de camisas de ejemplo

Característica	Opción estándar	Opción destacada	Notas
Enlace principal	Producto uno	Producto dos	Los enlaces dentro de las celdas de una tabla deben ser fáciles de identificar y tocar.
Ajuste editorial	Descripción breve con énfasis ligero.	Una descripción más larga que ocupa varias líneas e incluye texto destacado para la frase más importante.	Usa celdas de distinta longitud para comprobar la alineación y el espaciado.
Detalle de cuidado	Spot clean	Professional care recommended	El código en línea puede identificar etiquetas literales, indicaciones de cuidado o especificaciones breves.
Disponibilidad	Limitada	Disponible en línea y en la tienda insignia.	Las celdas pueden incluir resaltados, enlaces e indicaciones de extensión similar a una frase.

Lista de definiciones

Usa <dl> para pares de términos y descripciones, entradas de glosario, especificaciones breves o metadatos agrupados.

Párrafo introductorio

Usa class="intro" para crear un párrafo inicial más destacado.

Pie de foto

Usa class="caption" en pies de foto que necesiten un estilo uniforme.

Cita destacada

Usa class="pullquote" cuando una cita deba funcionar como un momento editorial más potente.

Bloque de código

Usa <pre> con <code> para ejemplos más largos en los que importen el espaciado y los saltos de línea.

<section>
  <h2>Care notes for shirts</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

Secciones desplegables

Usa <details> y <summary> para contenido opcional que deba estar disponible sin saturar la página principal.

Ejemplo de contenido expandible

Los bloques de detalles son útiles para políticas extensas, información de cuidado, orientación sobre tallas o notas editoriales opcionales.

Separadores y listas de tareas

Usa <hr> cuando una separación temática sea más clara que otro encabezado. Los campos de casilla pueden aparecer en contenido con formato de tareas cuando la página necesite mostrar progreso o una lista de verificación.

---

• Tarea marcada con progreso importante ya completado.
• Tarea sin marcar con contexto de apoyo aún pendiente.

Cuando cada sección tiene un propósito claro, el contenido extenso sigue siendo fácil de explorar, útil de leer y coherente en toda la experiencia de Reset.