Qual è il modo corretto di rendere corsivo il testo? Ho visto i seguenti quattro approcci:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

Questo è il "vecchio modo". <i>non ha significato semantico e trasmette solo l'effetto di presentazione del testo in corsivo. Per quanto posso vedere, questo è chiaramente sbagliato perché non è semantico.

<em>

Questo utilizza il markup semantico per scopi puramente di presentazione. Accade solo che <em>per impostazione predefinita il testo venga visualizzato in corsivo e quindi viene spesso utilizzato da coloro che sono consapevoli del fatto che <i>dovrebbero essere evitati ma che non sono consapevoli del suo significato semantico. Non tutto il testo in corsivo è in corsivo perché è enfatizzato. A volte, può essere l'esatto contrario, come una nota a margine o un sussurro.

<span class="italic">

Questo utilizza una classe CSS per posizionare la presentazione. Questo è spesso pubblicizzato come il modo corretto, ma di nuovo, questo mi sembra sbagliato. Questo non sembra trasmettere altro significato semantico <i>. Ma, i suoi sostenitori piangono, è molto più facile cambiare tutto il testo in corsivo più tardi se, diciamo, lo volevi in ​​grassetto. Tuttavia, questo non è il caso perché rimarrei quindi con una classe chiamata "corsivo" che rende il testo in grassetto. Inoltre, non è chiaro il motivo per cui vorrei mai cambiare tutto il testo in corsivo sul mio sito Web o almeno possiamo pensare a casi in cui ciò non sarebbe desiderabile o necessario.

<span class="footnote">

Questo utilizza una classe CSS per la semantica. Finora questo sembra essere il modo migliore, ma in realtà ha due problemi.

1. Non tutto il testo ha significato sufficiente per giustificare il markup semantico. Ad esempio, il testo in corsivo nella parte inferiore della pagina è davvero una nota a piè di pagina? O è da parte? O qualcos'altro del tutto. Forse non ha un significato speciale e deve solo essere reso in corsivo per separarlo dal testo che lo precede.

2. Il significato semantico può cambiare quando non è presente con una forza sufficiente. Diciamo che ho seguito la "nota a piè di pagina" basata su nient'altro che il testo in fondo alla pagina. Cosa succede quando qualche mese dopo voglio aggiungere altro testo in fondo? Non è più una nota a piè di pagina. Come possiamo scegliere una classe semantica che è meno generica di <em>ma evita questi problemi?

Sommario

Sembra che il requisito della semantica sembri essere eccessivamente oneroso in molti casi in cui il desiderio di rendere qualcosa di italico non è destinato a portare un significato semantico.

Inoltre, il desiderio di separare lo stile dalla struttura ha portato la propaganda dei CSS in sostituzione di <i>quando ci sono occasioni in cui ciò sarebbe effettivamente meno utile. Quindi questo mi lascia indietro con l'umile <i>tag e mi chiedo se questo treno di pensieri sia il motivo per cui è rimasto nelle specifiche HTML5?

Ci sono anche buoni post sul blog o articoli su questo argomento? Forse da parte di coloro che sono coinvolti nella decisione di conservare / creare il <i>tag?

È necessario utilizzare metodi diversi per diversi casi d'uso:

1. Se vuoi enfatizzare una frase, usa <em>.
2. Il <i>tag ha un nuovo significato in HTML5 , che rappresenta "un arco di testo con voce o umore alternativi". Quindi dovresti usare questo tag per cose come pensieri / parti o frasi idiomatiche. Le specifiche suggeriscono anche i nomi delle navi (ma non suggeriscono più i nomi di libri / canzoni / film; utilizzare <cite>invece per quello).
3. Se il testo in corsivo fa parte di un contesto più ampio, ad esempio un paragrafo introduttivo, è necessario associare lo stile CSS all'elemento più grande, ovvero p.intro { font-style: italic; }

<i>non è sbagliato perché non è semantico. È sbagliato (di solito) perché è presentazionale. Separazione delle preoccupazioni significa che le informazioni di presentazione dovrebbero essere trasmesse con i CSS.

La denominazione in generale può essere difficile da ottenere nel modo giusto, e i nomi delle classi non fanno eccezione, ma è comunque quello che devi fare. Se stai usando il corsivo per distinguere un blocco dal testo del corpo, allora forse un nome di classe di "flusso distintivo" sarebbe in ordine. Pensa al riutilizzo: i nomi delle classi sono per la categorizzazione - dove altro vorresti fare la stessa cosa? Ciò dovrebbe aiutarti a identificare un nome adatto.

<i>è incluso in HTML5, ma viene fornita una semantica specifica. Se il motivo per cui si contrassegna qualcosa come corsivo incontra una delle semantiche identificate nelle specifiche, sarebbe opportuno utilizzarlo <i>. Altrimenti no.

Non sono un esperto, ma direi che se vuoi davvero essere semantico, dovresti usare i vocabolari (RDFa).

Ciò dovrebbe comportare qualcosa del genere:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emviene utilizzato per la presentazione (gli umani la vedranno in corsivo) e gli attributi propertye hrefsi collegano a una definizione di corsivo (per le macchine).

Dovresti controllare se esiste un vocabolario per quel tipo di cose, forse le proprietà esistono già.

Maggiori informazioni su RDFa qui: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

Il modo corretto di rendere il testo in corsivo è ignorare il problema fino a quando non si arriva al CSS, quindi lo stile secondo la semantica della presentazione. Le prime due opzioni fornite potrebbero essere corrette a seconda delle circostanze. Gli ultimi due sono sbagliati.

Spiegazione più lunga

Non preoccuparti della presentazione quando scrivi il markup. Non pensare in termini di corsivo. Pensa in termini di semantica. Se richiede enfasi sullo stress, allora è un em. Se è tangenziale al contenuto principale, allora è un aside. Forse sarà audace, forse sarà corsivo, forse sarà verde fluorescente. Non importa quando scrivi markup.

Quando arrivi al CSS, potresti già avere un elemento semantico che ha senso mettere corsivo per tutte le sue occorrenze nel tuo sito. emè un buon esempio. Ma forse vuoi tutto aside > ul > lisul tuo sito in corsivo. Devi separare il pensare al markup dal pensare alla presentazione.

Come menzionato da DisgruntledGoat , iè semantico in HTML5. La semantica mi sembra un po 'stretta per me. L'uso sarà probabilmente raro.

La semantica di emè cambiata in HTML5 per sottolineare l'enfasi. strongpuò essere usato anche per mostrare importanza. strongpuò essere in corsivo piuttosto che in grassetto se è così che vuoi modellarlo. Non lasciare che il foglio di stile del browser ti limiti. Puoi anche utilizzare un foglio di stile di ripristino per aiutarti a smettere di pensare all'interno delle impostazioni predefinite. (Anche se ci sono alcuni avvertimenti .)

class="italic"è cattivo. Non usarlo. Non è semantico e non è affatto flessibile. La presentazione ha ancora semantica, solo un tipo diverso dal markup.

class="footnote"emula la semantica del markup e non è corretto. Il CSS per la nota a piè di pagina non dovrebbe essere completamente unico per la nota a piè di pagina. Il tuo sito sembrerà troppo disordinato se ogni parte ha uno stile diverso. Dovresti avere alcuni schemi visivi sparsi tra le tue pagine che puoi trasformare in classi CSS. Se il tuo stile per le tue note a piè di pagina e le tue blockquotes sono molto simili, allora dovresti mettere le somiglianze in una classe piuttosto che ripetere te stesso ancora e ancora. Potresti prendere in considerazione l'adozione delle pratiche di OOCSS (link sotto).

La separazione delle preoccupazioni e della semantica sono importanti in HTML5. Le persone spesso non si rendono conto che il markup non è l'unico posto in cui la semantica è importante. C'è una semantica di contenuto (HTML), ma c'è anche una semantica di presentazione (CSS) e una semantica comportamentale (JavaScript). Tutti hanno la loro semantica separata alla quale è importante prestare attenzione per la manutenibilità e per rimanere ASCIUTTI.

Risorse OOCSS

• CSS orientato agli oggetti
• Un'introduzione ai CSS orientati agli oggetti (OOCSS)
• Come scrivere CSS orientato agli oggetti
• Introduzione a CSS orientato agli oggetti (OOCSS)
• CSS orientato agli oggetti: cosa, come e perché
• Immergersi nel CSS orientato agli oggetti

Forse non ha un significato speciale e deve solo essere reso in corsivo per separarlo dal testo che lo precede.

Se non ha un significato speciale, perché deve essere separato dal punto di vista della presentazione dal testo che lo precede? Questa sequenza di testo sembra un po 'strana , perché l'ho messa in corsivo senza motivo.

Prendo il tuo punto però. Non è raro che i designer producano progetti che variano visivamente, senza variare significativamente. L'ho visto il più delle volte con le scatole: i designer ci daranno disegni tra cui scatole con varie combinazioni di colori, angoli, sfumature e ombre, senza alcuna relazione tra gli stili e il significato del contenuto.

Poiché si tratta di stili ragionevolmente complessi (con problemi associati a Internet Explorer) riutilizzati in luoghi diversi, creiamo classi simili box-1 , box-2, in modo da poter riutilizzare gli stili.

L'esempio specifico di rendere corsivo un testo è troppo banale per cui preoccuparsi. Meglio lasciare minute simili a quelle di cui discutono i Semantic Nutters.

Il testo in corsivo HTML visualizza il testo in formato corsivo.

<i>HTML italic text example</i>

L'enfasi e gli elementi forti possono entrambi essere utilizzati per aumentare l'importanza di determinate parole o frasi.

<p>This is <em>emphasized </em> text format <em>example</em></p>

Il tag di enfasi dovrebbe essere usato quando si desidera enfatizzare un punto nel testo e non necessariamente quando si desidera mettere in corsivo quel testo.

Consulta questa guida per ulteriori informazioni: formattazione del testo HTML

L' ielemento è non semantico, quindi per gli screen reader, Googlebot, ecc., Dovrebbe essere una sorta di trasparente (proprio come spano divelementi). Ma non è una buona scelta per lo sviluppatore, perché unisce il livello di presentazione al livello di struttura - e questa è una cattiva pratica.

emL'elemento ( stronganche) dovrebbe essere sempre usato in un contesto semantico, non in quello di presentazione. Deve essere usato ogni volta che una parola o una frase sono importanti. Solo per un esempio nella frase precedente, dovrei usare emper porre maggiormente l'accento sulla parte "dovrebbe essere sempre usata". Il browser fornisce alcune proprietà CSS predefinite per questi elementi, ma puoi e dovresti sovrascrivere i valori predefiniti se il tuo progetto lo richiede per mantenere il significato semantico corretto di questi elementi.

<span class="italic">Italic Text</span>è il modo più sbagliato. Prima di tutto, è scomodo in uso. In secondo luogo, suggerisce che il testo dovrebbe essere in corsivo. E il livello di struttura (HTML, XML, ecc.) Non dovrebbe mai farlo. La presentazione deve essere sempre separata dalla struttura.

<span class="footnote">Italic Text</span>sembra essere il modo migliore per una nota a piè di pagina. Non suggerisce alcuna presentazione e descrive semplicemente il markup. Non puoi prevedere cosa accadrà nella funzione. Se una nota a piè di pagina crescerà nella funzione, potresti essere costretto a cambiare il nome della sua classe (per mantenere un po 'di logica nel tuo codice).

Quindi ogni volta che hai del testo importante, usa emo strongper enfatizzarlo. Ma ricorda che questi elementi sono elementi incorporati e non dovrebbero essere usati per enfatizzare grandi blocchi di testo.

Usa CSS se ti interessa solo l'aspetto di qualcosa e cerca sempre di evitare qualsiasi markup aggiuntivo.

Penso che la risposta sia da usare <em>quando intendi enfatizzare.

Se quando leggi il testo per te stesso, scopri che usi una voce leggermente diversa per enfatizzare un punto, allora dovrebbe usarlo <em>perché vorresti che uno screen reader facesse la stessa cosa.

Se è puramente una cosa di stile, come il tuo designer ha deciso che tutte le tue <h2>intestazioni avrebbero un aspetto migliore in corsivo Garamond, allora non c'è motivo semantico per includerlo nell'HTML e dovresti semplicemente modificare il CSS per gli elementi appropriati.

Non riesco a vedere alcun motivo per utilizzare <i>, a meno che non sia necessario supportare specificamente alcuni browser legacy senza CSS.

Direi che uso <em>per enfatizzare gli elementi incorporati. Usa una classe per elementi a blocchi come blocchi di testo. CSS o no, il testo deve ancora essere taggato. Che si tratti di semantica o di aiuto visivo, suppongo che lo useresti per qualcosa di significativo ...

Se stai enfatizzando il testo per QUALSIASI motivo, puoi utilizzare <em>o una classe in corsivo.

Va bene infrangere le regole a volte!

OK, la prima cosa da notare è che <i> è stato deprecato e non deve essere utilizzato <i>non è stato deprecato, ma non è ancora consigliabile utilizzarlo: vedere i commenti per i dettagli. Questo perché è del tutto contrario a mantenere la presentazione nel livello di presentazione, che hai sottolineato. Allo stesso modo, <span class="italic">sembra rompere anche gli schemi.

Quindi ora abbiamo due modi reali di fare le cose: <em>e <span class="footnote">. Ricorda che emsignifica enfasi . Quando si desidera applicare l'enfasi su una parola, frase o frase, incollarla nei <em>tag indipendentemente dal corsivo o meno. Se si desidera modificare lo stile in qualche altro modo, usare i CSS: em { font-weight: bold; font-style: normal; }. Naturalmente, puoi anche applicare una classe al <em>tag: se decidi di voler mostrare in rosso determinate frasi enfatizzate, dai loro una classe e aggiungila al CSS:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

Se stai applicando il corsivo per qualche altro motivo, vai con l'altro metodo e dai alla sezione una classe. In questo modo, puoi cambiarne lo stile ogni volta che vuoi senza regolare l'HTML. Nel tuo esempio, le note a piè di pagina non dovrebbero essere enfatizzate, anzi, dovrebbero essere de-enfatizzate, poiché il punto di una nota a piè di pagina è mostrare informazioni non importanti ma interessanti o utili. In questo caso, è molto meglio applicare una classe alla nota a piè di pagina e farla apparire come una nel livello di presentazione: il CSS.

Usa <em> se hai bisogno di alcune parole / caratteri in corsivo nei contenuti senza altri stili. Aiuta anche a rendere semantico il contenuto.

text-style è più adatto a più stili e non ha bisogno semantico.

FARE

1. Assegnare all'attributo class un valore che indica la natura dei dati (ovvero class="footnote"è buono)

2. Crea un foglio di stile CSS per la pagina

3. Definire uno stile CSS associato alla classe assegnata all'elemento

   .footnote { font-style:italic; }

NON

1. Non utilizzare <i>o <em>elementi: non sono supportati e lega i dati e la presentazione troppo vicini.
2. Non assegnare alla classe un valore che indichi le regole di presentazione (ovvero non utilizzare class="italic").