Mi stavo chiedendo quale sia la migliore pratica in merito alle div con sfondi e tag img. Capisco che i div con sfondi possano avere roba sopra e cosa no, ma se è il caso di avere solo un'immagine, qual è il metodo preferito? Forse una domanda migliore è ... i tag img sono obsoleti? Quando hai un'immagine che è un link dovresti usare un tag img o un div?Div con sfondi immagine e tag img
Grazie! Matt Mueller
Gli sfondi div devono essere proprio questo: immagini di sfondo per lo stile. I tag img dovrebbero essere per quando stai visualizzando un'immagine reale come un'immagine, per esempio stai mostrando un'immagine di qualcosa. dovresti usare un tag immagine e non un div bg
è l'immagine per il layout o il contenuto?
se l'immagine è di layout legato vorrei usare i CSS e l'abbiano in un div ... se il suo contenuto correlato vorrei averlo in un img ...
Speranza che aiuta!
L'etichetta IMG non è obsoleta. Lo usi con immagini dinamiche, che vanno e vengono dal tuo sistema.
Le immagini di sfondo su div sono utili quando si dispone di un set statico di immagini che fanno parte del progetto. A volte è possibile unirli in un'unica grande immagine per minimizzare il tempo di caricamento e il numero di richieste HTTP per la pagina.
Pensateci come il markup semantico:
Se si tratta di una "immagine" nella pagina, per quanto riguarda il significato della pagina, utilizzare il tag img.
Se si tratta di qualcosa che non è significativo per il significato della pagina, vale a dire. immagine di sfondo, usa un'immagine di sfondo su qualsiasi tipo di elemento (non solo un div).
Questa differenza davvero non importa di come la pagina viene visualizzata nella maggior parte dei browser, ma ha un significato diverso a coloro che non sono interpretare le immagini visivamente.
Provate ad immaginare come gli elementi saranno interpretati da ipovedenti.
Potrebbe anche esserci un comportamento leggermente diverso da parte dei motori di ricerca. Non so se i motori di ricerca acquisiranno immagini di sfondo per la loro ricerca di immagini. Se vuoi davvero che l'immagine esista, un tag img è più sicuro.
Precisamente: semantica. Ricorda inoltre che il tag 'img' ha l'attributo' alt'. Questo testo alternativo (ad esempio la descrizione dell'immagine) è utile per gli scenari in cui l'immagine ha un significato semantico e può essere utilizzato per motori di ricerca, applicazioni text-to-speech per le connessioni Internet ipoudenti e inadeguate. –
Senza contare che è facile da stampare. –
Un buon modo per vedere questo è visualizzare il tuo sito con i fogli di stile spenti. Scoprirai rapidamente che tutti i tag DIV con immagini di sfondo non vengono visualizzati. Tutte le tue immagini di tag IMG sono esattamente dove dovrebbero essere. Userei i tag DIV con immagini di sfondo per tutti gli aspetti della progettazione e del layout del sito e utilizzare i tag IMG per tutto il resto.
I tag IMG hanno proprietà alt e proprietà titolo. Questi sono usati al posto dell'immagine quando non carica o al posto dell'immagine nei browser di tipo solo testo o screen reader.
bene detto +1 – annakata