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 puedes necesitar.

Usa class="intro" para un texto inicial que deba destacar más que un párrafo estándar, sin dejar de leerse como contenido de la página.

Usa class="small" para notas secundarias que deban seguir siendo legibles, pero claramente tener menor importancia que el texto principal.

Usa class="citation" para notas de fuente, créditos breves, pies de imagen 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 desactualizado, y <code> para etiquetas literales, nombres de archivo, ajustes 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 títulos

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

Nivel de título uno para material gráfico

Nivel de título dos para secciones de la página

Nivel de título tres para subsecciones

Nivel de título cuatro para detalles agrupados

Nivel de título cinco para etiquetas breves

Nivel de título 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 Darkroom 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 el formato postal general.

Listas

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

Lista sin ordenar con pasos ordenados

• Compara los productos detenidamente. Empieza con otra obra destacada y revisa 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 tamaño, 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 ajuste, acabado y disponibilidad.
• Usa frases concisas, pero incluye suficiente contexto para que cada elemento tenga sentido al revisarlo rápidamente.

Lista ordenada con notas sin ordenar

1. Presenta el propósito de la página con un párrafo claro y un enlace relevante.
2. Apoya el punto 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 clara que continúe el contenido, no con un fragmento inconcluso.

Citas y avisos destacados

Usa citas en bloque para textos procedentes de fuentes, testimonios, extractos editoriales o afirmaciones que necesiten separarse visualmente de la prosa circundante.

El contenido de producto más útil responde preguntas prácticas y, al mismo tiempo, da a la marca una perspectiva propia.

Equipo editorial de Darkroom

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

Imágenes

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

Video alojado

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

Iframe de YouTube

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

Tabla

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

Lista de definiciones

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

Párrafo inicial

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

Pie

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

Cita destacada

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

Bloque de código

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

<section>
  <h2>Care notes for artwork</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>

Elementos desplegables

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

Separadores y listas de tareas

Usa <hr> cuando una separación temática sea más clara que otro título. Los campos de casilla pueden aparecer en contenido de estilo tarea cuando la página deba mostrar progreso o formato de lista de comprobación.

• Elemento de tarea marcado con progreso importante ya completado.
• Elemento de tarea sin marcar con contexto adicional aún pendiente.

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