Qual è la differenza tra <b> e <strong>, <i> e <em>?

Qual è la differenza tra <b>e <strong>, <i>e <em>in HTML / XHTML? Quando dovresti usarli?

Hanno lo stesso effetto sui normali motori di rendering dei browser Web , ma c'è una differenza fondamentale tra loro.

Come scrive l'autore in un post dell'elenco di discussione :

Pensa a tre diverse situazioni:

• browser web
• gente cieca
• cellulari

"Grassetto" è uno stile - quando dici "grassetto una parola" , le persone in pratica sanno che significa aggiungere altro, diciamo "inchiostro", attorno alle lettere fino a quando non si distinguono più tra il resto delle lettere.

Ciò, sfortunatamente, non significa nulla per un cieco. Sui telefoni cellulari e altri PDA, il testo è già in grassetto perché la risoluzione dello schermo è molto piccola. Non puoi mettere in grassetto un grassetto senza rovinare qualcosa.

<b>è uno stile : sappiamo come dovrebbe apparire "grassetto".

<strong>tuttavia è un'indicazione di come qualcosa dovrebbe essere compreso . "Forte" potrebbe (e spesso significa) "grassetto" in un browser, ma potrebbe anche significare un tono più basso per un programma parlante come Jaws (per i non vedenti) o essere rappresentato da una sottolineatura (dato che non puoi in grassetto un grassetto) su un Palm Pilot.

L'HTML non è mai stato pensato per gli stili. Fai delle ricerche per "Tim Berners-Lee" e "la rete semantica". <strong>è semantico — descrive il testo che circonda (ad es. "questo testo dovrebbe essere più forte del resto del testo che hai visualizzato" ) invece di descrivere come dovrebbe essere visualizzato il testo che circonda (ad es. "questo testo dovrebbe essere grassetto " ).

<b>e <i>sono espliciti: specificano rispettivamente grassetto e corsivo.

<strong>e <em>sono semantici: specificano che il testo racchiuso deve essere "forte" o "enfatizzato" in qualche modo, di solito in grassetto e corsivo, ma consente di controllare lo stile reale tramite CSS. Quindi questi sono preferiti nelle pagine Web moderne.

<strong>e <em>aggiungi ulteriore significato semantico al tuo documento. Accade così che danno anche uno stile audace e corsivo al tuo testo.

Ovviamente potresti sovrascrivere il loro stile con i CSS.

<b>e <i>d'altra parte applicare solo lo stile del carattere e non dovrebbero più essere utilizzati. (Perché dovresti formattare con CSS, e se il testo fosse effettivamente importante, probabilmente lo renderesti "forte" o "enfatizzato" comunque!)

Spero che abbia un senso.

Ecco un riepilogo delle definizioni insieme all'utilizzo suggerito:

<b>... un arco di testo a cui si sta attirando l'attenzione per scopi utilitaristici senza trasmettere alcuna importanza in più e senza implicazioni di una voce o un umore alternativi, come parole chiave in un estratto del documento, nomi di prodotti in una recensione, parole utilizzabili in software interattivo basato su testo o articolo lede .

<strong> ... ora rappresenta l'importanza piuttosto che una forte enfasi.

<i>... un arco di testo in una voce o un umore alternativi, o altrimenti compensato dalla prosa normale in un modo che indica una diversa qualità del testo, come una designazione tassonomica , un termine tecnico , una frase idiomatica di un'altra lingua , un pensiero o il nome di una nave nei testi occidentali.

<em> ... indica l'enfasi.

(Queste sono tutte citazioni dirette da fonti W3C, con la mia enfasi aggiunta. Vedi: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements e http://www.w3.org /TR/html401/struct/text.html#h-9.2.1 per gli originali)

<b>e <i>sono entrambi legati allo stile, mentre <em>e <strong>sono semantici. In HTML 4, i primi sono classificati come elementi di stile del carattere e il secondo come elementi di frase .

Come hai indicato correttamente, <i>e <em>spesso sono considerati simili, perché i browser visualizzano spesso entrambi in corsivo. Ma secondo le specifiche, <em> indica l'enfasi e <strong> indica un'enfasi più forte , che è abbastanza chiara, ma spesso interpretata male. D'altra parte, la distinzione tra quando usare <i>o <b>è davvero una questione di stile.

Mentre <strong>e <em>sono ovviamente più semanticamente corretti, sembrano esserci ragioni legittime per utilizzare i tag <b>e <i>per i contenuti scritti dai clienti.

In tali contenuti, parole o frasi possono essere in grassetto o in corsivo e generalmente non dipende da noi analizzare il ragionamento semantico per tale grassetto o corsivo.

Inoltre, tale contenuto può riferirsi a parole e frasi in grassetto e in corsivo per trasmettere un significato specifico.

Un esempio potrebbe essere una domanda di esame di inglese che istruisce uno studente a sostituire la parola in grassetto.

<em>e <strong>consumano più larghezza di banda di <i>e <b>.

Richiedono anche una maggiore digitazione (se non generata automaticamente).

Inoltre ingombrano la schermata dell'editor con più testo. Mi sembra di ricordare che ai programmatori piacciono i file sorgente più piccoli se sono uguali. (Ed essere reali, sono gli stessi. Sì, ci sono differenze "tecniche" (<i> tosse </i>, ahem, mi scusi), ma è principalmente falso per cominciare.)

Con uno qualsiasi dei tag sopra, puoi usare i fogli di stile per personalizzare il modo in cui appaiono come desideri se hai bisogno che appaiano diversi dai loro rendering predefiniti.

Come altri hanno detto <b> e <i> sono espliciti (cioè "rendere questo testo in grassetto"), mentre <strong> e <em> sono semantici (cioè "questo testo dovrebbe essere enfatizzato").

Nel contesto di un moderno browser web, è difficile vedere la differenza (entrambi sembrano produrre lo stesso risultato, giusto?), Ma pensa agli screen reader per i non vedenti. Se uno screen reader si imbattesse in un tag <i>, non saprebbe cosa fare. Ma se si imbatte in un tag <em>, sa che tutto ciò che è dentro dovrebbe essere enfatizzato dall'ascoltatore. E qui ottieni la differenza pratica.

<i>, <b>, <em>E <strong>tag sono tradizionalmente rappresentativo. Ma hanno ricevuto un nuovo significato semantico in HTML5 .

<i>ed è <b>stato utilizzato per lo stile del carattere in HTML4. <i>era usato in corsivo e <b>in grassetto. In HTML5 il <i>tag ha un nuovo significato semantico di " voce o umore alternativi " e il <b>tag ha il significato di offset stilistico .

Esempi di utilizzo del <i>tag sono: designazione tassonomica, termine tecnico, frase idiomatica di un'altra lingua, traslitterazione, pensiero, nomi di navi nei testi occidentali. Ad esempio -

<p><i>I hope this works</i>, he thought.</p>

Esempi di utilizzo del <b>tag sono le parole chiave in un estratto del documento, i nomi dei prodotti in una recensione, le parole utilizzabili in un software interattivo basato su testo, il piombo dell'articolo.

Il seguente paragrafo di esempio è stilisticamente compensato dai paragrafi che lo seguono.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>e <strong>aveva il significato di enfasi e forte enfasi in HTML4. Ma in HTML5 <em>significa enfasi sottolineata e <strong>significa forte importanza .

Nel seguente esempio dovrebbe esserci un cambiamento linguistico durante la lettura della parola prima ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

Nello stesso esempio possiamo usare il <strong>tag come segue ..

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

per dare importanza alla data dell'evento.

Rif. MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Come hanno affermato gli altri, la differenza è che <b>e gli <i>stili di carattere hardcode, mentre <strong>e <em>dettano il significato semantico, con lo stile del carattere (o parlando intonazione del browser o che cosa hai) da determinare nel momento in cui il testo viene reso (o parlato).

Puoi pensarlo come una differenza tra uno stile di carattere "fisico" e uno stile "logico", se vuoi. Ad un certo momento, si potrebbe desiderare di cambiare il modo <strong>e la <em>visualizzazione del testo, per esempio, dalle proprietà che alterano in un foglio di stile per aggiungere colore e dimensione modifiche, o anche di utilizzare diversi caratteri anche del tutto. Se hai utilizzato il markup "logico" anziché il markup "fisico" hardcoded, puoi semplicemente modificare le proprietà di visualizzazione in un punto ciascuna nel foglio di stile, quindi tutte le pagine che fanno riferimento a quel foglio di stile vengono modificate automaticamente , senza doverli mai modificare.

Abbastanza lucido, eh?

Questa è anche la logica alla base della definizione di sottostili (a cui si fa riferimento utilizzando la style=proprietà nei tag di testo) per paragrafi, celle di tabella, testo di intestazione, didascalie, ecc. E utilizzo di <div>tag. È possibile definire la rappresentazione fisica per gli stili logici nel foglio di stile e le modifiche si riflettono automaticamente nelle pagine Web che fanno riferimento a quel foglio di stile. Vuoi una rappresentazione diversa per il codice sorgente? Ridefinisci il carattere, le dimensioni, il peso, la spaziatura, ecc. Per il tuo stile "codice".

Se usi XHTML, puoi persino definire i tuoi tag semantici e il tuo foglio di stile farebbe le conversioni in stili e layout di font fisici per te.

Uso entrambi <strong> e <b>, in realtà, esattamente per i motivi menzionati in questo thread di risposte. Ci sono momenti in cui un testo in grassetto appare semplicemente migliore, ma non è necessariamente semanticamente più importante del resto della frase. Ecco un esempio da una pagina su cui sto lavorando in questo momento:

"Recupera <strong> tutti </strong> libri su <b> lacrosse </b>."

In quella frase, la parola "tutto" è molto importante, e "lacrosse" meno - volevo semplicemente in grassetto perché rappresenta un termine di ricerca, quindi volevo un po 'di separazione visiva. Se stai visualizzando la pagina con uno screen reader, non penso proprio che debba fare di tutto per enfatizzare la parola "lacrosse".

Tenderei a immaginare che la maggior parte degli sviluppatori Web utilizzi l'uno dell'altro, ma entrambi vanno bene-- <b> sicuramente non è deprecato, come alcuni hanno affermato. Per me, è solo una linea sottile tra fascino visivo e significato.

Usali solo se l'uso delle classi di stile CSS è per qualsiasi motivo non convenzionale o impossibile (come i sistemi di blog, consenti solo alcuni tag da utilizzare nei post e infine negli stili incorporati). Un altro motivo è il supporto per browser molto vecchi (alcuni dispositivi mobili?) O motori di ricerca primitivi (che danno punti per <b>o<strong> tag, invece di analizzare gli stili CSS).

Se puoi definire gli stili CSS, usali.

Per il testo in grassetto usando il <b> tag

Per il testo importante utilizzando il <strong> tag

Per lo stile corsivo del testo usando il <i> tag

Per un testo enfatizzato usando il <em> tag

<b>e <i>dovrebbe essere evitato perché descrivono lo stile del testo. Invece, usa <strong>e <em>perché descrive la semantica (il significato) del testo.

Come tutte le cose in HTML, si dovrebbe pensare non a come si desidera guardare , ma quello che effettivamente media . Certo, potrebbe essere solo grassetto e corsivo per te, ma non per uno screen reader.

b o i significa che vuoi che il testo sia reso in grassetto o corsivo. forte o em significa che vuoi che il testo sia reso in un modo che l'utente capisce come "importante". L'impostazione predefinita è rendere grassetto e grassetto come corsivo, ma alcune altre culture potrebbero utilizzare una mappatura diversa.

Come stringhe in un programma, b e io sarei "hard coded", mentre forte e em sarebbe "localizzata".

"Hanno lo stesso effetto. Tuttavia, XHTML, una versione più recente e più pulita di HTML, raccomanda l'uso del <strong>tag. Forte è migliore perché è più facile da leggere - il suo significato è più chiaro. Inoltre, <strong>trasmette un significato - mostrando il testo fortemente - mentre <b>(per il grassetto) trasmette un metodo - in grassetto il testo. Con strong, il tuo codice ha ancora senso se usi i fogli di stile CSS per cambiare i metodi per rendere forte il testo.

Lo stesso vale per la differenza tra <i>e <em>".

Dixit di Google:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Elementi di formattazione HTML:

HTML definisce anche elementi speciali per la definizione di testo con un significato speciale. HTML utilizza elementi come <b> e <i> per formattare l'output, come testo in grassetto o corsivo.

HTML grassetto e formattazione forte:

L'elemento HTML <b> definisce il testo in grassetto, senza alcuna importanza aggiuntiva.

<b>This text is bold</b>

L'elemento HTML <strong> definisce il testo forte, con un'importanza "forte" semantica aggiunta.

<strong>This text is strong</strong>

HTML corsivo e formattazione enfatizzata:

L'elemento HTML <i> definisce il testo in corsivo, senza alcuna importanza aggiuntiva.

<i>This text is italic</i>

L'elemento HTML <em> definisce il testo enfatizzato, con una maggiore importanza semantica.

<em>This text is emphasized</em>

Dovresti generalmente cercare di evitare <b>e <i>. Sono stati introdotti per il layout della pagina (cambiando il modo in cui appare) nelle prime versioni di HMTL prima della creazione di CSS, come nel frattempo rimossifont tag , e sono stati principalmente conservati per la compatibilità con le versioni precedenti e perché alcuni forum consentono HTML in linea e questo è facile modo per cambiare l'aspetto del testo (come utilizzando BBCode [i], è possibile utilizzare <i>e così via).

Dalla creazione del CSS, il layout non è più nulla da fare in HTML, per questo motivo il CSS è stato creato in primo luogo (HTML == Struttura, CSS == Layout). Questi tag potrebbero anche svanire in futuro, dopo tutto puoi semplicemente usare CSS e spantag per rendere il testo grassetto / corsivo se hai bisogno di una variazione di carattere "insignificante". HTML 5 li consente ancora, ma dichiara che la marcatura del testo in quel modo non ha significato .

<em>e <strong>d'altra parte dice solo che qualcosa è "enfatizzato" o "fortemente enfatizzato", lo lascia completamente aperto al browser su come renderlo. La maggior parte dei browser renderà emcorsivo e strongaudace come suggerisce lo standard di default, ma non sono obbligati a farlo (possono usare colori, dimensioni dei caratteri, caratteri diversi, qualunque cosa). È possibile utilizzare i CSS per modificare il comportamento nel modo desiderato. Puoi rendere emgrassetto se vuoi e stronggrassetto e rosso, per esempio.

<strong>e <em>sono astratti (che è ciò che le persone intendono quando dicono che è semantico). <b>e <i>sono modi specifici di rendere qualcosa di "forte" o "enfatizzato"

Analogia:

Entrambi <strong>sono <b>e <em>devono<i>

come

"veicolo" è "jeep"

Usiamo il <strong>tag per il testo che ha la massima priorità per scopi SEO come nome del prodotto, nome dell'azienda ecc., Mentre <b>semplice lo rende grassetto.

Allo stesso modo, usiamo <em>per il testo che ha la massima priorità per il SEO, mentre <i>per rendere il testo semplicemente corsivo.