Guida allo stile

Questa guida di stile di esempio mostra l'intera gamma di elementi WYSIWYG che puoi usare per contenuti editoriali lunghi 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 il testo di apertura che deve risultare più evidente di un paragrafo standard, pur mantenendo l'aspetto di contenuto della pagina.

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

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

Testo editoriale

Le pagine editoriali possono combinare importanza forte, enfasi, testo rimosso, termini evidenziati e code-style labels in linea 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 di 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 uno del titolo per le strutture

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

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 , <cite> per titoli o fonti come The Verdant Journal, <var> per variabili come n e <samp> per output di esempio come Salvataggio riuscito.

Gli esempi in linea includono anche grassetto, corsivo, sottolineato, barrato, pedice, apice e un link prodotto.

Indirizzo

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

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

Elenchi

Gli elenchi devono supportare indicazioni facili da scorrere, lasciando comunque spazio sufficiente per testare ritorni a capo, link e formattazione in linea.

Elenco puntato con passaggi numerati

  • Confronta i prodotti con attenzione. Inizia da un altro albero in evidenza, poi esamina i dettagli più importanti per l'uso previsto.
  • Pianifica il percorso d'acquisto. Un elemento dell'elenco può includere passaggi numerati annidati:
    1. Conferma i requisiti di dimensioni, materiale o stile.
    2. Esamina i contenuti di supporto, incluse le FAQ e le pagine delle policy.
    3. Scegli l'opzione che bilancia meglio vestibilità, finitura e disponibilità.
  • Usa formulazioni concise, ma includi contesto sufficiente affinché 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. 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 enfatizzato solo quando aiuta il lettore.
  3. Concludi la sezione con un pensiero successivo chiaro, non con un frammento senza sbocco.

Citazioni e riquadri informativi

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

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

Team editoriale Verdant

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

Nota sul merchandising: usa class="callout" su un contenitore a blocco quando il riquadro informativo richiede più frasi, link o una formattazione in linea più ricca attorno a prodotti come questo albero in evidenza.

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.

Immagine di esempio per la guida di stile
Usa class="caption" per il testo descrittivo della didascalia sotto un'immagine.
Una didascalia può comparire anche prima dell'immagine quando il contesto deve venire prima.
Esempio di immagine secondaria per la guida di stile

Video ospitato

Usa l'elemento <video> standard per contenuti MP4 ospitati. Mantieni il markup semplice, salvo che il layout circostante richieda specificamente 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 delle celle variati, così i lettori possono confrontare rapidamente i dettagli.

Confronto di esempio tra alberi
Caratteristica Opzione standard Opzione in evidenza Note
Link principale Prodotto uno Prodotto due I link nelle celle della tabella devono rimanere facili da identificare e toccare.
Contesto editoriale Breve descrizione con leggera enfasi. Una descrizione più lunga che va a capo su più righe e include testo forte per la frase più importante. Usa celle di lunghezza variata per verificare allineamento e spaziatura.
Dettaglio per la cura Spot clean Professional care recommended Il codice in linea può identificare etichette letterali, indicazioni per la cura o specifiche compatte.
Disponibilità Limitata Disponibile online e presso il Negozio principale. Le celle della tabella possono includere evidenziazioni, link e indicazioni della lunghezza di 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" per le didascalie delle figure che richiedono uno stile coerente.
Citazione in evidenza
Usa class="pullquote" quando una citazione deve rappresentare 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 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>

Elementi espandibili

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

Esempio di contenuto espandibile

I blocchi details sono utili per policy dettagliate, informazioni sulla cura, indicazioni sulle taglie o note editoriali opzionali.

Separatori e liste 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 formattazione a checklist.

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

Quando ogni sezione ha uno scopo chiaro, i contenuti lunghi rimangono facili da scorrere, utili da leggere e coerenti in tutta l'esperienza Verdant.