Pourquoi devons-nous utiliser des divs?

Ce matin, alors que j'écrivais du html et du haml, il m'est venu à l'esprit que la façon dont les divs sont utilisés est ridicule. Pourquoi les divs ne sont-ils pas impliqués? Imaginez si cela:

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

était-ce:

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

Si la partie "classe div" de l'élément était supposée, le HTML serait plus sémantique et infiniment plus lisible avec les balises de fermeture correspondantes!

Ceci est similaire à HAML, où nous avons:

.content Hello, World!

Ce qui devient:

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

Il me semble que la seule chose qui devrait se produire pour que cela fonctionne dans les navigateurs est que les navigateurs pourraient commencer à interpréter chaque élément sans qu'une définition d'élément html existante n'implique <div class="<element name>">.

Cela pourrait être complètement rétrocompatible; pour les sélecteurs CSS et jQuery, etc., "div.hero-img" pourrait toujours fonctionner et être la syntaxe requise pour sélectionner les éléments.

Je connais la nouvelle spécification des composants Web, mais c'est beaucoup plus compliqué que ce qui est suggéré ici. Pouvez-vous imaginer à quel point il serait agréable de regarder la source d'un site Web et de voir du code HTML qui ressemble à ça?!

Alors pourquoi devons-nous utiliser des divs?

Si vous regardez la liste des éléments html5 de Mozilla , chaque élément a une signification sémantique, puis nous y arrivons <div>et il dit:

"Représente un conteneur générique sans signification particulière."

..et ensuite ils listent les éléments arbitraires qu'ils ajoutent à html5 comme <details>.

Bien sûr, si ce concept de divisions implicites était ajouté à la spécification html, il faudrait dix ans pour devenir standard, ce qui représente un million d'années en temps Web.

Je pense donc qu'il doit y avoir une bonne raison pour laquelle cela ne s'est pas encore produit. S'il te plait, explique moi!

Problème 1: espaces blancs

Je crois que cela n'a pas été soulevé en général. Cependant, une bonne raison pour laquelle cela ne s'est pas produit et ne devrait probablement pas se produire est que, white-spacesen CSS, classesdéfinissez plusieurs classes pour l'élément, tandis qu'en HTML, elles définissent attributes.

Expliquez (ou demandez à un navigateur d'analyser) le code suivant:

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

Est familyla définition d'une deuxième classe ou d'un attribut à l'élément HTML? Comme vous le voyez probablement à partir de l'analyseur de ce site, il pense que c'est un attribut.

Donc, si je veux <div class="pet family">, il n'y a aucun moyen de définir réellement deux classes, ce qui est l'une des deux principales raisons pour lesquelles j'utiliserais une classe au lieu d'un identifiant, de toute façon.

Problème 2: compatibilité ascendante!

L'utilisation de <div>s pour le moment nous oblige (au moins certains d'entre nous) à mettre correctement en retrait et à commenter notre code, ce qui est une bonne pratique pour tous les langages de programmation.

Au lieu de cela, transformer des blocs HTML en variables causerait une grande confusion aux nouveaux programmeurs quant à ce qui est et ce qui ne fait pas quelque chose de spécifique en HTML .

En outre, cela provoquera l'effet secondaire amusant que vous devriez commencer à comparer votre ancien code avec les nouvelles balises HTML5, juste pour vous assurer qu'elles ne sont pas arrivées avec le même nom que vous avez utilisé pour les classes de votre div ...

Le même problème s'applique à l' variablesutilisation reserved wordsdans certaines langues. PHP l'a résolu avec un signe dollar, donc une approche similaire en HTML se traduirait par quelque chose de pas beaucoup mieux que l'utilisation actuelle de <div class="something">.

Nous utilisons à la <div>place de tout ce qui vous plaît, car cela rend le traitement et le rendu par le navigateur plus faciles à réaliser.

À titre de contre-exemple, XML permet la création de tout nom de balise souhaité. La possibilité de créer des noms de balises arbitraires a un coût de traitement. Les analyseurs XML doivent créer un dictionnaire des balises utilisées dans un document dans le cadre de / pendant l'analyse du document.

En utilisant des <div>navigateurs, sachez qu'il y a un conteneur et qu'il peut ignorer le conteneur ou le transmettre à un autre outil de la chaîne qui peut faire quelque chose avec le conteneur.

Vous proposez d'autoriser les auteurs Web à ajouter des noms d'éléments arbitraires au HTML à des fins privées (non standardisées). Cela a un gros problème: il sera dangereux d'ajouter de nouveaux éléments au standard HTML, car plusieurs auteurs peuvent déjà utiliser le même nom d'élément à des fins privées - modifiant ainsi rétroactivement la sémantique de la page. Les gens ne sont pas contents lorsque de nouvelles versions de navigateurs cassent des pages Web existantes, c'est donc un non-go.

Le même problème concerne l'utilisation de noms d'attributs arbitraires à des fins privées. C'est pourquoi HTML5 impose le préfixe "data-" pour les attributs à usage privé, afin qu'ils n'entrent pas en collision avec de nouveaux attributs dans la norme.

Div et span sont définis comme des éléments sémantiquement neutres, ce qui signifie que vous pouvez les utiliser à des fins privées sans craindre que la sémantique ne change dans les futurs navigateurs. Bien sûr, il faut quelques caractères supplémentaires pour ajouter un nom de classe, mais la compatibilité ascendante en vaut la peine.

Votre propre exemple affiche une propriété pour laquelle les divs ne sont pas si ridicules.

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

Vous n'avez pas correctement fermé le imgtag. Certaines balises, telles que img, br, hret d' autres n'ont pas contenu, et ne sont donc pas à être fermés. L'analyseur le sait.

La divbalise, en revanche, est censée être fermée, car elle contient du contenu. Si vous venez de fouetter votre propre balise, l'analyseur n'aurait aucune idée s'il devrait s'attendre à ce que la balise soit fermée ou non.

La raison pour laquelle certains éléments doivent être fermés et d'autres non provient de l'héritage SGML, que ce billet de blog décrit bien: http://www.colorglare.com/2014/02/03/to-close-or-not- to-close.html

C'est une question de définition. Si vous utilisez XHTML, qui est du XML pur, donc entièrement défini, vous pouvez utiliser votre propre espace de noms, ici par exemple via un préfixe q::

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

Si vous utilisiez XML pour convertir en (X) HTML, vous seriez entièrement libre de générer à partir de votre "HTML" HTML libre avec <div class="hero-img">.

Dans certaines balises, un attribut d'espace de noms avec votre propre URL (factice):

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

L'un des éléments clés du HTML est réellement d'avoir des éléments de balise prédéfinis. C'est pourquoi.

La classe div = est un moyen de contourner cette "limitation".

Et c'est pourquoi vous ne voyez pas ces constructions "implicites".

Le but d'un élément div est la structure seule. Il vous permet de regrouper des éléments sous un élément commun. Cela n'a rien à voir avec l'espace blanc, la vitesse, le rendu, la sémantique ou quoi que ce soit d'autre. Il vous aide avec CSS en termes de style et javascript en termes de sélecteurs. Si vous le changez en un autre élément, vous changez le but.

Créer votre propre élément nommé, comme vous le montrez, a un problème dans la mesure où les moteurs de recherche et autres outils ne sauraient pas ce que signifiait votre élément. Qu'est-ce qu'un "hero-img" et en quoi est-il différent de mon "hero-image" et comment mon API doit-elle gérer cela lorsque je visite votre page? Comment un navigateur doit-il gérer cet élément? Est-ce au niveau du bloc ou en ligne? Trop de questions.

En général, les balises div sont utiles pour appliquer une division ou une section dans une page Web. Vous pouvez utiliser une balise div comme conteneur dans lequel d'autres éléments peuvent être appliqués. Cela aidera également à appliquer CSS et certains scripts sur un élément particulier.