Perché dobbiamo usare le div?

Problema 1: spazi bianchi

Credo che questo non sia venuto in generale. Anche se, una buona ragione per cui questo non ha e probabilmente non dovrebbe accadere è perché white-spaces in CSS classes definisce più classi per l'elemento, mentre in HTML definiscono attributes .

Spiega (o chiedi a un browser di analizzare) il seguente codice:

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

family è la definizione di una seconda classe o di un attributo all'elemento HTML? Come probabilmente vedi dal parser di questo sito, pensa che sia un attributo.

Quindi, se voglio <div class="pet family"> , non esiste un modo per definire effettivamente due classi, che è uno dei due motivi principali per cui utilizzerei comunque una classe invece di un id.

Problema 2: compatibilità diretta!

Utilizzando <div> s al momento, ci costringe (almeno alcuni di noi) a indentare e commentare correttamente il nostro codice, che è una buona pratica per tutti i linguaggi di programmazione.

Invece, trasformare i blocchi HTML in variabili causerebbe grande confusione ai nuovi programmatori quanto a cosa è e cosa non sta facendo qualcosa di specifico in HTML .

Inoltre, causerà il buffo effetto collaterale che dovresti iniziare a confrontare il tuo vecchio codice con i nuovi tag HTML5, solo per assicurarti che non siano venuti con lo stesso nome che hai fatto per le tue classi div ...

Lo stesso problema si applica a variables utilizzando reserved words in alcune lingue. PHP l'ha risolto con un segno di dollaro, quindi un approccio simile in HTML risulterebbe in qualcosa di non molto migliore rispetto all'utilizzo corrente di <div class="something"> .

Usiamo <div> invece di ciò che solletica la tua fantasia perché rende più facile l'elaborazione e il rendering da parte del browser.

Come controesempio, XML consente la creazione di qualsiasi nome di tag che si desidera. La possibilità di creare nomi di tag arbitrari ha un costo di elaborazione. I parser XML devono creare un dizionario dei tag usati all'interno di un documento come parte di / mentre sta analizzando il documento.

Utilizzando <div> i browser sanno che c'è un container lì e che può ignorare il contenitore o passarlo ad un altro strumento della catena che potrebbe fare qualcosa con il contenitore.

È una questione di definizione. Se si utilizza XHTML, che è puro XML, quindi completamente definito, è possibile utilizzare il proprio spazio dei nomi, qui ad esempio tramite un prefisso q: :

<q:hero-img>
    <img src="http://whatever.com/this.jpg"></q:hero-img>

Sesiusassel'XMLperconvertirein(X)HTML,sisarebbecompletamenteliberidigeneraredalproprioHTML"HTML" a tag libero con <div class="hero-img"> .

Si suggerisce di consentire agli autori Web di aggiungere nomi di elementi arbitrari all'HTML per scopi privati (non standardizzati). Questo ha un grosso problema: renderà pericoloso aggiungere nuovi elementi allo standard HTML, poiché vari autori potrebbero già utilizzare lo stesso nome di elemento per scopi privati, modificando quindi retroattivamente la semantica della pagina. Le persone non si accontentano quando le nuove versioni dei browser interrompono le pagine Web esistenti, quindi questo è un no-go.

Lo stesso problema è con l'uso di nomi di attributi arbitrari per scopi privati. Questo è il motivo per cui HTML5 richiede il prefisso "data-" per gli attributi di uso privato, quindi non entrano in collisione con i nuovi attributi nello standard.

Div e span sono definiti come elementi semanticamente neutri, il che significa che puoi usarli per scopi privati senza temere che la semantica cambierà nei browser futuri. Certo, richiede qualche altro carattere per aggiungere un nome di classe, ma la compatibilità diretta ne vale la pena.

Uno degli elementi chiave di HTML è in realtà con elementi di tag predefiniti. Ecco perché.

La classe div = è un modo per aggirare questa "limitazione".

Ed è per questo che non vedi quelle costruzioni "implicite".

Il tuo esempio mostra una proprietà perché i div non sono così ridicoli.

<div class="hero-img">
  <img src="http://whatever.com/this.jpg"></div>

Hai,correttamente,nonchiusoiltagimg.Alcunitag,comeimg,br,hrealtrinonhannoalcuncontenutoepertantonondevonoesserechiusi.Ilparserlosa.

Iltagdiv,d'altraparte,dovrebbeesserechiuso,inquantocontienecontenuto.Sehaiappenacreatoiltuotag,ilparsernonavrebbeideasedovesseaspettarsicheiltagfossechiusoomeno.

Ilmotivopercuialcunielementidevonoesserechiusiealtrinonprovengonodall'ereditàSGML,chequestopostdelblogdescriveinmodoappropriato: link

Lo scopo di un elemento div è la struttura da solo. Ti consente di raggruppare elementi in un unico elemento comune. Non ha nulla a che fare con lo spazio bianco, la velocità, il rendering, la semantica o qualsiasi altra cosa. Ti aiuta con i CSS in termini di stile e javascript in termini di selettori. Se lo cambi in un altro elemento, cambi lo scopo.

Creare il proprio elemento con nome, come si mostra, ha un problema in quei motori di ricerca e altri strumenti non saprebbero cosa significano i tuoi elementi. Che cos'è un "eroe-img" e in che cosa è diverso dalla mia "immagine dell'eroe" e come dovrebbe gestirlo la mia API quando visito la tua pagina? Come dovrebbe un browser gestire quell'elemento? È a livello di blocco o in linea? Troppe domande.