Perché dobbiamo usare i div?

Questa mattina, mentre stavo scrivendo un po 'di html e di haml, mi è venuto in mente che il modo in cui vengono utilizzati i div è ridicolo. Perché i div non sono impliciti? Immagina se questo:

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

era questo:

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

Se la parte della "classe div" dell'elemento fosse assunta, l'HTML sarebbe più semantico e infinitamente più leggibile con i tag di chiusura corrispondenti!

Questo è simile a HAML, dove abbiamo:

.content Hello, World!

Che diventa:

<div class='content'>Hello, World!</div>

Mi sembra che l'unica cosa che dovrebbe accadere perché questo funzioni nei browser è che i browser potrebbero iniziare a interpretare ogni elemento senza una definizione di elemento HTML esistente come implicita <div class="<element name>">.

Questo potrebbe essere completamente compatibile con le versioni precedenti; per i selettori CSS e jQuery ecc., "div.hero-img" potrebbe ancora funzionare ed essere la sintassi richiesta per selezionare gli elementi.

Conosco le nuove specifiche dei componenti Web, ma è significativamente più complicato di quanto suggerito qui. Riesci a immaginare quanto sarebbe piacevole guardare la fonte di un sito web e vedere HTML come quello ?!

Quindi perché dobbiamo usare i div?

Se guardi l'elenco degli elementi html5 di Mozilla , ogni elemento ha un significato semantico, quindi arriviamo a <div>e dice:

"Rappresenta un contenitore generico senza significato speciale."

..e poi elencano gli elementi arbitrari che stanno aggiungendo a html5 come <details>.

Ovviamente, se questo concetto di div impliciti fosse aggiunto alle specifiche html, occorrerebbero dieci anni per diventare standard, ovvero un milione di anni nel tempo web.

Quindi immagino ci debba essere una buona ragione per cui questo non è ancora successo. Per favore, spiegamelo!

Problema 1: spazi bianchi

Credo che questo non sia emerso in generale. Tuttavia, una buona ragione per cui ciò non è stato e probabilmente non dovrebbe accadere è perché white-spacesin CSS classesdefiniscono più classi per l'elemento, mentre in HTML definiscono attributes.

Spiegare (o chiedere a un browser di analizzare) il seguente codice:

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

È familyla definizione di una seconda classe o di un attributo all'elemento HTML? Come probabilmente vedrai dal parser di questo sito, pensa che sia un attributo.

Quindi, se voglio <div class="pet family">, non c'è modo di definire effettivamente due classi, che è uno dei due motivi principali per cui userei una classe anziché un ID, comunque.

Problema 2: compatibilità diretta!

Usando <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 su cosa sia e cosa non stia facendo qualcosa di specifico in HTML .

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

Lo stesso problema si applica variablesall'uso reserved wordsin alcune lingue. PHP lo ha risolto con un segno di dollaro, quindi un approccio simile in HTML si tradurrebbe in qualcosa di non molto meglio dell'uso attuale di <div class="something">.

Usiamo al <div>posto di qualsiasi cosa stuzzichi la tua fantasia perché semplifica l'elaborazione e il rendering da parte del browser.

Come contro-esempio, XML consente la creazione di qualsiasi nome-tag desiderato. La possibilità di creare nomi di tag arbitrari comporta un costo di elaborazione. I parser XML devono creare un dizionario dei tag utilizzati all'interno di un documento come parte di / durante l'analisi del documento.

Utilizzando i <div>browser, sappi che esiste un contenitore e che può ignorarlo o passarlo a un altro strumento della catena che potrebbe fare qualcosa con il contenitore.

Stai suggerendo di consentire agli autori Web di aggiungere nomi di elementi arbitrari a HTML per scopi privati ​​(non standardizzati). Questo ha un grosso problema: renderà pericoloso aggiungere nuovi elementi allo standard HTML, perché vari autori potrebbero già utilizzare lo stesso nome di elemento per scopi privati, modificando in modo retroattivo la semantica della pagina. Le persone non si rallegrano quando le nuove versioni dei browser interrompono le pagine Web esistenti, quindi questo è un no-go.

Lo stesso problema riguarda l'utilizzo di nomi di attributo arbitrari a scopi privati. Questo è il motivo per cui HTML5 impone il prefisso "data-" per gli attributi di uso privato, quindi non si scontreranno 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 timore che la semantica cambierà nei browser futuri. Certo, per aggiungere un nome di classe sono necessari alcuni caratteri in più, ma ne vale la pena la compatibilità diretta.

Il tuo esempio mostra una proprietà per cui i div non sono così ridicoli.

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

Non hai chiuso correttamente il imgtag. Alcuni tag, come ad esempio img, br, hr, e altri non hanno alcun contenuto, e non sono quindi da chiudere. Il parser lo sa.

Il divtag, invece, dovrebbe essere chiuso, poiché contiene contenuti. Se hai appena creato il tuo tag, il parser non avrebbe idea se dovrebbe aspettarsi che il tag venga chiuso o meno.

Il motivo per cui alcuni elementi devono essere chiusi e altri non provengono dall'eredità SGML, che questo post del blog descrive in modo corretto: http://www.colorglare.com/2014/02/03/to-close-or-not- to-close.html

È 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>

Se utilizzassi XML per convertire in (X) HTML, saresti completamente libero di generare dal tuo vero HTML "HTML" con tag libero <div class="hero-img">.

In alcuni tag un attributo dello spazio dei nomi con il tuo URL (fittizio):

xmlns:q="http://..."

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

Div class = è un modo per aggirare questa "limitazione".

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

Lo scopo di un elemento div è la sola struttura. Ti consente di raggruppare elementi in un unico elemento comune. Non ha nulla a che fare con spazi bianchi, velocità, rendering, semantica o altro. Ti aiuta con CSS in termini di stile e javascript in termini di selettori. Se lo si cambia in qualsiasi altro elemento, si modifica lo scopo.

Creare il proprio elemento con nome, come si vede, ha un problema nel fatto che i motori di ricerca e altri strumenti non saprebbero quale significato hanno avuto gli elementi. Che cos'è un "eroe-img" e in cosa differisce dalla mia "immagine di eroe" e come dovrebbe gestirla la mia API quando visito la tua pagina? Come dovrebbe un browser gestire quell'elemento? È a livello di blocco o in linea? Troppe domande.

In genere, i tag div sono utili per applicare la divisione o la sezione in una pagina Web. È possibile utilizzare un tag div come contenitore in cui è possibile applicare altri elementi. Aiuterà anche ad applicare CSS e alcuni script su un elemento particolare.