Qual è la differenza di resa tra un intervallo e un tag etichetta?

Question

Quindi capisco la differenza funzionale tra i tag span e label ... tuttavia sembra che ci sia anche una differenza di rendering tra i tag e non riesco a capire cosa sia? Qualcuno conosce la differenza di resa tra intervallo ed etichetta? Grazie

Answer 1

A parte gli stili di rendering predefiniti (l'etichetta è talvolta in grassetto in alcuni browser), la differenza importante è che un'etichetta deve essere collegata a un campo modulo (input, select, ecc.) Per LABEL che campo è. Quindi è "per" attributo. Non dovrebbe essere usato per altro tranne quello. Questo è particolarmente importante per quanto riguarda l'accessibilità con gli screen reader in quanto si aspettano che questo link esista.

Span è per un gruppo di testo a cui desideri applicare uno stile simile a. Span di default non ha uno stile applicato ad esso.

PS: Possa l'ira di Grayskull trovarti se ti catturo usando una scheda etichetta solo per rendere il testo in grassetto o qualcosa del genere. Ripeti dopo di me: "nessun campo di input, nessuna etichetta".

PPS: Siamo spiacenti, è uno dei miei più grandi fastidi con i markup di altre persone.

Answer 2

Non vedo differenze di rendering con i fogli di stile predefiniti in IE, Firefox, Opera o Chrome. È possibile che un browser possa scegliere di renderlo in modo diverso, ma è improbabile che sia una differenza significativa.

Il vantaggio principale di un'etichetta è che è possibile associarlo a un altro controllo di modulo (tramite contenimento o l'attributo for). Questo può avere vantaggi di accessibilità. In particolare nel tipico browser grafico è possibile fare clic sull'etichetta per mettere a fuoco il controllo associato (e spuntarlo, per checkbox/radio, il che è utile perché altrimenti è un bersaglio piuttosto piccolo da colpire). Ciò riproduce il comportamento del widget del modulo OS stabilito.