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 muestra la mayoría de los elementos habituales que puedes necesitar.

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

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

Usa class="citation" para notas de fuentes, créditos compactos, pies de imagen o apartes editoriales.

Texto editorial

Las páginas editoriales pueden combinar importancia destacada, énfasis, lenguaje eliminado, términos resaltados y texto en línea code-style labels 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 un esquema claro. Reserva <h1> para el título principal de la página cuando la plantilla no lo proporcione ya; después, usa <h2> y <h3> para organizar las secciones.

Nivel uno de encabezado para árboles

Nivel dos de encabezado para secciones de la página

Nivel tres de encabezado para subsecciones

Nivel cuatro de encabezado para detalles agrupados

Nivel cinco de encabezado para etiquetas compactas
Nivel seis de encabezado 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 , <cite> para títulos o fuentes como The Verdant 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 consulta rápida, sin dejar de permitir 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 otro árbol destacado 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 siguiente clara, no con un fragmento inconcluso.

Citas y avisos destacados

Usa citas en bloque para textos de fuentes, testimonios, extractos editoriales o afirmaciones que necesiten separarse visualmente del texto que las rodea.

El contenido de producto más útil responde preguntas prácticas y, al mismo tiempo, aporta a la marca un punto de vista distintivo.

Equipo editorial de Verdant

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

Nota de comercialización: Usa class="callout" en un contenedor de aviso cuando necesite varias oraciones, enlaces o un formato en línea más completo alrededor de productos como este árbol destacado.

Imágenes

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

Imagen de ejemplo para la guía de estilo
Usa class="caption" para el texto descriptivo del pie situado debajo de una imagen.
El pie también puede aparecer antes de la imagen cuando el contexto deba ir primero.
Ejemplo de imagen secundaria para la guía de estilo

Video alojado

Usa el elemento <video> estándar para contenido MP4 alojado. Mantén el marcado simple, salvo que el diseño que lo rodea 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 encabezados útiles y contenido variado en las celdas para que los lectores puedan comparar los detalles rápidamente.

Comparación de árboles 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.
Adecuación 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 longitudes variadas en las celdas 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, etiquetas de cuidado o especificaciones breves.
Disponibilidad Limitada Disponible en línea y en la tienda insignia. Las celdas de una tabla pueden incluir destacados, enlaces y orientación en forma de oración.

Lista de definiciones

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

Párrafo introductorio
Usa class="intro" para crear un párrafo inicial más destacado.
Pie de imagen
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 potente.

Bloque de código

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

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

Controles desplegables

Usa <details> y <summary> para contenido opcional que deba estar disponible sin sobrecargar 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 tamaños o notas editoriales opcionales.

Separadores y listas de tareas

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

  • Elemento de tarea marcado con progreso importante ya completado.
  • Elemento de 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 revisar, útil de leer y coherente en toda la experiencia de Verdant.