Guida allo stile

Questa guida di stile di esempio mostra l'intera gamma di elementi WYSIWYG che puoi usare per contenuti editoriali estesi nelle pagine o negli articoli. Non è un elenco esaustivo, ma mostra la maggior parte degli elementi comuni di cui potresti aver bisogno.

Usa class="intro" per un testo di apertura che deve risaltare più di un paragrafo standard, continuando però a essere percepito come contenuto della pagina.

Usa class="small" per note secondarie che devono restare leggibili, ma avere chiaramente meno rilievo del testo principale.

Usa class="citation" per note sulle fonti, crediti compatti, didascalie o osservazioni editoriali.

Testo editoriale

Le pagine editoriali possono combinare importanza, enfasi, testo rimosso, termini evidenziati e code-style labels inline senza interrompere il ritmo.

Usa <mark> per richiamare l'attenzione su una frase, <del> o <s> per testo rimosso o non più attuale, e <code> per etichette letterali, nomi di file, impostazioni o brevi riferimenti tecnici.

Usa class="callout" su un paragrafo per brevi indicazioni, note di lancio, contesto d'acquisto o informazioni importanti sulle policy.

Gerarchia dei titoli

I titoli devono creare una struttura chiara. Riserva <h1> al titolo principale della pagina quando il template non ne fornisce già uno, quindi usa <h2> e <h3> per organizzare le sezioni.

Livello uno del titolo per la cura della pelle

Livello due del titolo per le sezioni della pagina

Livello tre del titolo per le sottosezioni

Livello quattro del titolo per i dettagli raggruppati

Livello cinque del titolo per le etichette compatte

Livello sei del titolo per i metadati

Semantica inline

Usa <kbd> per comandi da tastiera come Ctrl + K, <abbr> per abbreviazioni come SEO e <dfn> quando introduci un termine come contenuto strutturato.

Usa <time> per date come 25 giugno 2026, <cite> per titoli o fonti come Align Journal, <var> per variabili come n e <samp> per output di esempio come Salvataggio completato.

Gli esempi inline includono anche grassetto, corsivo, sottolineato, barrato, _pedice, ^apice e un link al prodotto.

Indirizzo

Usa <address> per dettagli di contatto o località, non per la formattazione postale generica.

Negozio principale
123 Example Avenue
New York, NY 10001
Visualizza le sedi

Elenchi

Gli elenchi devono favorire una consultazione rapida, lasciando comunque spazio sufficiente per testare a capo, link e formattazione inline.

Elenco puntato con passaggi numerati

• Confronta i prodotti con attenzione. Inizia da un altro prodotto skincare in evidenza, quindi esamina i dettagli più importanti per l'uso previsto.
• Pianifica il percorso d'acquisto. Un elemento dell'elenco può includere passaggi numerati annidati:
  1. Verifica i requisiti di taglia, materiale o stile.
  2. Esamina i contenuti di supporto, comprese le FAQ e le pagine delle policy.
  3. Scegli l'opzione che bilancia al meglio vestibilità, finitura e disponibilità.
• Usa formulazioni concise, ma includi abbastanza contesto perché ogni elemento abbia senso anche durante una lettura rapida.

Elenco numerato con note puntate

1. Presenta lo scopo della pagina con un paragrafo chiaro e un link pertinente.
2. Supporta il punto principale con dettagli utili:
   • Evidenzia i termini chiave con moderazione.
   • Usa <code> per etichette o frammenti letterali.
   • Includi testo in grassetto o in evidenza solo quando aiuta il lettore.
3. Concludi la sezione con un pensiero successivo chiaro, non con un frammento senza seguito.

Citazioni e riquadri informativi

Usa i blocchi di citazione per testi provenienti da fonti, testimonianze, estratti editoriali o affermazioni che richiedono una separazione visiva dal testo circostante.

I contenuti di prodotto più utili rispondono alle domande pratiche, offrendo al contempo un punto di vista distintivo del brand.

Team editoriale Align

Usa class="pullquote" quando una citazione deve avere maggiore risalto visivo rispetto a un normale blocco di citazione.

Immagini

Usa le figure quando un'immagine richiede una didascalia. Gli esempi seguenti usano <figure class="embed image"> e <figcaption class="caption"> per mostrare il posizionamento della didascalia in basso e in alto.

Video ospitato

Usa l'elemento <video> standard per contenuti MP4 ospitati. Mantieni il markup semplice, salvo diverse esigenze del layout circostante.

Iframe YouTube

Usa l'iframe YouTube standard quando un video deve essere incorporato da YouTube.

Tabella

Le tabelle devono includere titoli utili e contenuti vari nelle celle, così i lettori possono confrontare rapidamente i dettagli.

Confronto skincare di esempio

Caratteristica	Opzione standard	Opzione in evidenza	Note
Link principale	Prodotto uno	Prodotto due	I link nelle celle della tabella devono essere facili da riconoscere e selezionare.
Adattamento editoriale	Breve descrizione con leggera enfasi.	Una descrizione più lunga che va a capo su più righe e include testo in evidenza per la frase più importante.	Usa celle di lunghezza variabile per verificare allineamento e spaziatura.
Dettaglio di cura	Spot clean	Professional care recommended	Il codice inline può identificare etichette letterali, indicazioni di cura o specifiche compatte.
Disponibilità	Limitata	Disponibile online e presso il negozio principale.	Le celle possono includere evidenziazioni, link e indicazioni lunghe quanto una frase.

Elenco di definizioni

Usa <dl> per coppie termine-descrizione, voci di glossario, specifiche compatte o metadati raggruppati.

Paragrafo introduttivo

Usa class="intro" per creare un paragrafo di apertura più incisivo.

Didascalia

Usa class="caption" sulle didascalie delle figure che richiedono uno stile coerente.

Citazione in evidenza

Usa class="pullquote" quando una citazione deve diventare un momento editoriale più incisivo.

Blocco di codice

Usa <pre> con <code> per esempi più lunghi in cui spaziatura e interruzioni di riga sono importanti.

<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>

Sezioni espandibili

Usa <details> e <summary> per contenuti opzionali che devono essere disponibili senza sovraccaricare la pagina principale.

Esempio di contenuto espandibile

I blocchi di dettagli sono utili per policy dense, informazioni sulla cura, indicazioni sulle taglie o note editoriali opzionali.

Separatori ed elenchi di attività

Usa <hr> quando un separatore tematico è più chiaro di un altro titolo. Gli input checkbox possono comparire nei contenuti in stile attività quando la pagina deve mostrare avanzamento o una checklist.

---

• Attività completata con avanzamento importante già concluso.
• Attività non completata con contesto aggiuntivo ancora in sospeso.

Quando ogni sezione ha uno scopo chiaro, i contenuti estesi restano facili da consultare, utili da leggere e coerenti in tutta l'esperienza Align.