Garantía comprobada

Devoluciones gratis, sin necesidad de dar explicaciones
Vegano y libre de crueldad

Verificado por Leaping Bunny
Envío gratis en pedidos superiores a $40

Entrega rápida y gratuita hasta tu domicilio

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 funcionar como contenido de la página.

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

Usa class="citation" para notas de fuentes, créditos breves, subtítulos o comentarios editoriales.

Texto editorial

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

Título de nivel uno para cuidado de la piel

Título de nivel dos para secciones de la página

Título de nivel tres para subsecciones

Título de nivel cuatro para detalles agrupados

Título de nivel cinco para etiquetas breves
Título 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 , <cite> para títulos o fuentes como The Align 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.

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

Listas

Las listas deben facilitar la lectura rápida de indicaciones y 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 producto de cuidado de la piel 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 complementario, 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 revisarlo rápidamente.

Lista ordenada con notas sin ordenar

  1. Presenta el objetivo 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 é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 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, transmite una perspectiva de marca diferenciada.

Equipo editorial de Align

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 necesites varias frases, enlaces o un formato en línea más completo alrededor de productos como este producto de cuidado de la piel destacado.

Imágenes

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

Imagen de ejemplo para la guía de estilo
Usa class="caption" para el texto descriptivo del subtítulo debajo de una imagen.
El subtítulo 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 sencillo, a menos que el diseño contenedor requiera específicamente una estructura adicional.

Iframe de YouTube

Usa el iframe estándar de YouTube cuando quieras insertar 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.

Comparación de productos de cuidado de la piel
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 pulsar.
Adecuación editorial Descripción breve con énfasis ligero. Descripción más extensa 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, instrucciones de cuidado o especificaciones breves.
Disponibilidad Limitada Disponible en línea y en la tienda insignia. Las celdas de una tabla pueden incluir resaltados, enlaces e indicaciones del tamaño de una oración.

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.
Subtítulo
Usa class="caption" en subtítulos de figuras que necesiten un estilo uniforme.
Cita destacada
Usa class="pullquote" cuando una cita deba funcionar como un momento editorial de mayor impacto.

Bloque de código

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

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

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, guías de tallas o notas editoriales opcionales.

Separadores y listas de tareas

Usa <hr> cuando un separador temático sea más claro que otro título. Los controles de casilla pueden aparecer en contenido tipo tarea cuando la página deba mostrar progreso o el formato de una lista de comprobación.

  • Elemento de tarea marcado con progreso importante ya completado.
  • Elemento de tarea sin marcar con contexto complementario 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 Align.