Ce qu'il faut utiliser à la place des éléments div en HTML5

J'ai lu dans la spécification HTML5 que le générique div étiquette ne doit être utilisé comme "dernier recours", quand un élément plus spécifique n'est pas disponible. Par exemple, les balises header, footer et section sont privilégiées pour le regroupement du contenu thématique.

Mais il semble que la grande majorité des sites utilisent encore div comme le premier élément. Ma question est, comment et dans quels contextes est-il approprié d'utiliser un div? Et qui d'autres éléments doivent être utilisés à sa place?

Je suis à la recherche de réponses sur la base de la spécification plutôt que des opinions personnelles. Merci!

La grande majorité des sites web ont été construits avant le HTML5 est devenu largement accepté. Avez-vous regardé les specs pour les nouveaux éléments? Leurs objectifs sont assez clairs.
C'est un très bon article je suis tombé sur html5doctor.com/you-can-still-use-div

OriginalL'auteur hawkharris | 2014-02-25

  1. 8

    Il n'y a pas quelque chose qui prend la place de <div> (theres une raison encore dans les specs), mais HTML5 a plus d'éléments qui sont plus spécifiques.

    En plus de <header>, <footer>, et <section> il y a:

    • <nav>
    • <article>
    • <aside>
    • <main>
    • <details>
    • <summary>
    • <figure>
    • <dialog>
    • <menu>
    • et plus!

    Fondamentalement, tout nouvel élément HTML5 peut prendre la place d'un <div>.

    Quand devez-vous utiliser un div? Vous avez répondu vous-même:

    lorsqu'un élément plus spécifique n'est pas disponible

    MDN a un L'élément HTML5 liste qui contient tous les standards HTML5 éléments, et indique quels sont les éléments nouveaux avec HTML5.

    Ces offre aucun avantage en dehors d'être plus explicite pour le lecteur de code?

    OriginalL'auteur Alpha Codemonkey

  2. 2

    La chose à retenir est que div balise est toujours une partie de HTML5 et ce n'est pas obsolete, encore.
    Cependant, div élément a été abusé beaucoup avec HTML4, et à juste titre car il n'y a jamais eu aucun suppléants. Maintenant que le HTML5 a inclus quelques grands nouveaux éléments structurels, div est plus la meilleure option pour la création de modèles.

    Le principal inconvénient de div est que l'élément n'a pas de sens en raison de laquelle la création de demande de prêt mises en page est très difficile. Les nouveaux éléments structurels introduits en HTML5 sera sûrement d'une grande aide avec ce problème.

    La section élément le plus susceptible d'être utilisé plus que les autres éléments structurels, comme header, footer etc. principalement parce qu'il n'est pas spécifique comme les autres. Aussi il n'ya aucune limite quant au nombre d'éléments de structure, vous pouvez ajouter, mais la chose à retenir est que section n'est pas complète div de remplacement.

    div a encore un rôle à jouer dans HTML5. Il est idéal pour regrouper des éléments similaires ainsi que diviser les éléments en tant que de besoin. Aussi section ne doit pas être utilisé juste pour le style, car section n'était pas destiné à être un wrapper.

    OriginalL'auteur Hemant

  3. 1

    La raison header, section, footer, et d'autres éléments tels ont été créés est d'aider au référencement dans les css et les langages de script. W3C regardé le plus courant IDs les développeurs web ont été à l'aide de divs et fait les nouveaux éléments HTML5 en conséquence. La raison divs et Id est largement considéré comme une mauvaise pratique est parce que tous ces attributs finit par encombrer le code. Et comme nous le savons tous, encombré de codage conduit à des erreurs et des erreurs.

    Où les utilisez-vous? C'est assez explicite. Prendre la header par exemple. C'est l'usage le plus courant est le haut de la page web. Clic droit sur le dépassement de pile logo en haut et en vue de la source. Ils sont en fait à l'aide d'un div avec un ID de 'tête'. Techniquement, c'est une mauvaise pratique.

    D'une grande utilité pour divs est de créer un wrapper autour de l'ensemble de votre contenu comme celui-ci. 

    <div id="wrapper">
    <!--content-->
</div>

    Vous pouvez y faire référence dans le css pour centrer:

    #wrapper{margin:20px auto;}

    Espérait que cela l'a aidé à!

    OriginalL'auteur crazyjedi98