Valore semantico dell'intervallo

https://stackoverflow.com/questions/278914

07-07-2019
|

Domanda

L'elemento span sembra essere esattamente come un div, ma a livello in-line piuttosto che a livello di blocco. Tuttavia, non riesco a pensare a nessuna divisione logica utile che può fornire l'elemento span.

Una singola frase, o parola se non contenuta in una frase, sembra essere la parte logica più piccola. Ignorando CSS, poiché CSS è solo per layout e non per significato semantico, quando lo span fornisce un valore semantico aggiuntivo tagliando una frase o una stringa di parole ?

Sembra che, in tutti i casi, altri elementi siano più adatti all'aggiunta di valore semantico, rendendo lo span un elemento puramente di layout. È vero?

Soluzione

Span può essere usato per aggiungere un significato semantico che non rientra nell'ambito dell'HTML. Questo può essere fatto usando classi che identificano determinati attributi. Ad esempio, se stai scrivendo un romanzo di fantascienza puoi usare lo span per identificare le parole inventate, perché potresti voler formattare queste in modo diverso o perché potresti volere che il correttore ortografico le ignori:

Quindi la procedura guidata ha richiamato gravenwist e gli disse di attaccare l'esercito in avvicinamento. Il & Lt; span class = & Quot; wizardword & Quot; & Gt; gavenwist & Lt; / span & Gt; resistito ma il wistwand era troppo potente.

Questo potrebbe essere visualizzato come

Quindi il mago fece appello al gravenwist e gli ordinò di attaccare l'esercito in avvicinamento. Il gavenwist ha resistito ma il bacchetta magica del mago era troppo potente.

Un altro buon esempio di questo genere di cose sono microformati , che consentono la creazione di strutture arbitrarie all'interno di HTML:

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

Il vantaggio di span, rispetto a div, è che gli span possono apparire quasi ovunque perché sono contenuti in linea e i div sono elementi a blocchi, quindi possono verificarsi solo all'interno di determinati altri elementi.

Altri suggerimenti

Un vantaggio molto utile sarebbe quello di contrassegnare i cambiamenti nella lingua. Per esempio.

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

Gli screen reader con funzionalità in più lingue potrebbero farne uso.

Quindi non sono presentazioni, solo generici. In effetti, gli span sono raramente di presentazione, fornendo un nome di classe semanticamente significativo, come & Quot; spelling-error & Quot; e non " grassetto-rosso-testo " ;.

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

Dipende completamente da ciò che vuoi esprimere. Se contrassegnare il nome per te ha un valore semantico (sia esso solo per avere un gancio per i CSS per formattare i nomi o estrarli usando un linguaggio di scripting), allora puoi usare un intervallo.

Uso SPAN molto quando voglio che JavaScript analizzi l'elemento e inserisca un valore all'interno del tag, ad esempio:

<span datafield="firstname"></span>

Avrebbe un valore inserito in un secondo momento, quindi in quel caso ha un significato, anche se solo un significato che decido di dargli. Il fatto che lo span altrimenti non abbia alcun effetto sul layout è l'ideale in quel caso.

span s può essere effettivamente portatori di informazioni semantiche sotto forma di class attributi. Questo è usato dai microformati.

I tag span hanno bisogno di un attributo class o id per dare loro un significato.

es. 0123 456789

Ignorando CSS, poiché ciò darà il significato semantico, quando si estende fornisce un valore semantico aggiuntivo di tagliare una frase o una stringa di parole?

Ignorando CSS (e altri markup non HTML), mai. L'unico scopo nella vita di & Lt; span & Gt; è portare markup che non puoi esprimere in HTML. Markup come & Lt; span style="dropCap" & Gt ;, che non ha un equivalente in HTML ma esiste nell'editoria stampata da centinaia di anni e che viene sempre applicato a un solo carattere: la prima lettera di un elemento (articolo, qualunque cosa), senza causare una pausa di parole (o alcuna interruzione più grande).

Sembra che in tutti i casi, altro gli elementi sono più adatti all'aggiunta valore semantico, rendendo la portata puramente elemento di layout. È vero?

Sì e no. L'unico valore reale di & Lt; p & Gt; è che è semanticamente neutrale. Cioè, a differenza ad esempio di & Lt; <=> & Gt ;, non fa nulla che si potrebbe desiderare di non avere quando lo si utilizza per portare altro markup. E ci sono volte, come & Lt; <=> & Gt; sopra, quando non vuoi altri effetti.

Se si desidera applicare regole di formattazione a parte del contenuto (ad esempio una singola parola o frase) di un tag. È possibile utilizzare il tag span. A volte viene chiamato formattazione senza tag.

Uso span nel mio EBNF - > Convertitore XHTML per applicare un formato diverso a valori letterali e token.

Gli elementi SPAN (e DIV) da soli sono generalmente considerati semanticamente neutri. Un buon approccio consiste nell'utilizzare il markup semantico il più appropriatamente possibile, ma a volte ti imbatti in situazioni in cui gli elementi html esistenti che forniscono un significato semantico (EM, STRONG, ABBR, ACRONYM, ecc, ecc.) Non sono semanticamente adatti per i tuoi contenuti. Quindi il prossimo passo è usare uno SPAN o DIV semanticamente neutro con un id o una classe semanticamente significativi.

Penso che stia chiedendo della differenza tra un div e un intervallo, e in realtà non esiste uno, a parte il comportamento predefinito.

È una questione di convenzioni. Quando si utilizza lo stile, div viene in genere utilizzato per delimitare le divisioni del contenuto, mentre span viene utilizzato per delimitare il testo incorporato. Potresti anche usare <=> ovunque o <=> ovunque, ma è utile pensarli come diversi, anche se è solo per convenzione.

In HTML potrebbe essere usato per i microformati. Ma poiché la specifica HTML effettiva è X HTML, non ha senso. Invece di:

<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>

Preferirei usare:

<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>

Il significato di SPAN è " si tratta di un intervallo (generico) di contenuto (ad es. testo) " ;. Confronta con DIV, che significa & Quot; questa è una divisione logica (cioè una sezione di documento generico) & Quot ;.

SPAN è principalmente un hook per appendere gli stili di (quindi puoi usare  invece di ).

Da le specifiche :

Gli elementi DIV e SPAN, insieme agli attributi id e class, offrono un meccanismo generico per aggiungere struttura ai documenti. Questi elementi definiscono il contenuto come inline (SPAN) o a livello di blocco (DIV) ma non impongono altri idiomi di presentazione sul contenuto. Pertanto, gli autori possono utilizzare questi elementi insieme ai fogli di stile, all'attributo lang, ecc., Per adattare l'HTML alle proprie esigenze e ai propri gusti.

Supponiamo, ad esempio, che volessimo generare un documento HTML basato su un database di informazioni sul cliente. Poiché l'HTML non include elementi che identificano oggetti come & Quot; client & Quot ;, & Quot; numero di telefono & Quot ;, & Quot; indirizzo e-mail & Quot ;, ecc ., utilizziamo DIV e SPAN per ottenere gli effetti strutturali e di presentazione desiderati. Potremmo usare l'elemento TABLE come segue per strutturare le informazioni:

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow