Guida allo stile

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

Usa class="intro" per un testo di apertura più evidente di un paragrafo standard, ma che resti parte del contenuto della pagina.

Usa class="small" per note secondarie leggibili, ma chiaramente subordinate al testo principale.

Usa class="citation" per note sulle fonti, crediti sintetici, didascalie o annotazioni editoriali.

Testo editoriale

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

Usa <mark> per attirare 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 sul lancio, contesto d'acquisto o informazioni importanti sulle policy.

Scala dei titoli

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

Livello di titolo uno per le camicie

Livello di titolo due per le sezioni della pagina

Livello di titolo tre per le sottosezioni

Livello di titolo quattro per i dettagli raggruppati

Livello di titolo cinque per le etichette sintetiche

Livello di titolo sei 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 The Reset 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.

Elenchi

Gli elenchi devono facilitare la consultazione, lasciando spazio sufficiente per testare a capo, link e formattazione inline.

Elenco puntato con passaggi numerati

• Confronta i prodotti con attenzione. Inizia da un'altra camicia in evidenza, poi valuta i dettagli più importanti per l'uso previsto.
• Pianifica il percorso d'acquisto. Un elemento dell'elenco può contenere passaggi numerati annidati:
  1. Conferma i requisiti di taglia, materiale o stile.
  2. Consulta i contenuti di supporto, incluse le FAQ e le pagine sulle policy.
  3. Scegli l'opzione che bilancia meglio vestibilità, finitura e disponibilità.
• Usa formulazioni concise, ma includi contesto sufficiente perché ogni elemento abbia senso anche durante una rapida scansione.

Elenco numerato con note puntate

1. Presenta lo scopo della pagina con un paragrafo chiaro e un link pertinente.
2. Sostieni 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. Chiudi la sezione con un pensiero successivo chiaro, non con un frammento senza conclusione.

Citazioni e riquadri informativi

Usa le citazioni a blocco per testi tratti da fonti, testimonianze, estratti editoriali o affermazioni che richiedono una separazione visiva dalla prosa circostante.

I contenuti di prodotto più utili rispondono alle domande pratiche, dando al tempo stesso al brand un punto di vista distintivo.

Team editoriale Reset

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

Immagini

Usa le figure quando un'immagine necessita di una didascalia. Gli esempi seguenti usano <figure class="embed image"> e <figcaption class="caption"> per mostrare il posizionamento della didascalia sopra e sotto.

Video ospitato

Usa l'elemento <video> standard per contenuti MP4 ospitati. Mantieni il markup semplice, a meno che il layout circostante non richieda una struttura aggiuntiva.

Iframe YouTube

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

Tabella

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

Elenco di definizioni

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

Paragrafo introduttivo

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

Didascalia

Usa class="caption" per didascalie di 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 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>

Sezioni espandibili

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

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 la formattazione di una checklist.

• Attività completata con progressi importanti già raggiunti.
• Attività non completata con contesto aggiuntivo ancora in sospeso.

Quando ogni sezione ha uno scopo chiaro, i contenuti di lunga durata restano facili da scorrere, utili da leggere e coerenti in tutta l'esperienza Reset.