Question Quelle est la différence entre les balises HTML
et ?


Je voudrais demander quelques exemples simples montrant les utilisations de <div> et <span>. Je les ai vu tous les deux utilisés pour marquer une section d'une page avec un id ou class, mais je suis intéressé à savoir s'il y a des moments où l'un est préféré à l'autre.


449
2017-10-08 16:01


origine


Réponses:


div est un élément de bloc, span est en ligne.

Cela signifie que pour les utiliser sémantiquement, les divs doivent être utilisés pour envelopper des sections d'un document, tandis que les spans doivent être utilisés pour envelopper de petites parties de texte, des images, etc.

Par exemple:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Notez qu'il est illégal de placer un élément de niveau bloc dans un élément en ligne, donc:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... est illégal.


EDIT: À partir de HTML5, certains éléments de bloc peuvent être placés à l'intérieur de certains éléments en ligne. Voir la référence MDN ici pour une liste assez claire. Ce qui précède est toujours illégal, car <span> n'accepte que le contenu de phrasé, et <div> est le contenu de flux.


Vous avez demandé des exemples concrets, alors j'en ai pris un sur mon site de bowling, BowlSK:

<div id="header">
    <div id="userbar">
        Hi there, <span class="username">Chris Marasti-Georg</span> |
        <a href="/edit-profile.html">Profile</a> |
        <a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Ok, qu'est ce qui se passe? En haut de ma page, j'ai une section logique, "l'en-tête". Comme il s'agit d'une section, j'utilise un div (avec un identifiant approprié). J'ai deux ou trois sections: la barre d’utilisateur et le titre de la page. Le titre utilise la balise appropriée, h1. La barre d’utilisateur, étant une section, est enveloppée dans un div. Dans ce cadre, le nom d'utilisateur est enveloppé dans un span, afin que je puisse changer le style. Comme vous pouvez le voir, j'ai également emballé un span environ 2 lettres dans le titre - cela me permet de changer leur couleur dans ma feuille de style.

Notez également que HTML5 inclut un nouvel ensemble d'éléments qui définissent des structures de pages communes, telles que l'article, la section, la navigation, etc. Section 4.4 de la HTML 5 document de travail les listes, et donne des conseils quant à leur utilisation. HTML5 est toujours une spécification de travail, donc rien n'est encore "définitif", mais il est fort douteux que l'un quelconque de ces éléments ne se passe nulle part. Il y a un hack javascript que vous devrez utiliser si vous voulez styliser ces éléments dans une ancienne version d'IE - vous devez en créer un de chaque élément en utilisant document.createElement avant que l'un de ces éléments ne soit spécifié dans votre source. Il y a un tas de bibliothèques qui s'occuperont de cela pour vous - une recherche rapide sur Google est disponible html5shiv.


494
2017-10-08 16:03



Juste pour être complet, je vous invite à y penser comme ceci:

  • Il y a beaucoup d'éléments de bloc (sauts de ligne avant et après) définis en HTML, et beaucoup de balises en ligne (pas de sauts de ligne).
  • Mais en HTML moderne, tous les éléments sont censés avoir significations: une <p> est un paragraphe, un <li> est un élément de liste, etc., et nous sommes censés utiliser la bonne étiquette dans le bon but - pas comme dans l'ancien temps où nous avons mis en retrait en utilisant <blockquote> si le contenu était un devis ou non.
  • Alors, que faites-vous là-bas est aucune signification à la chose que vous essayez de faire? Il n'y a pas sens à une colonne 400px-large, est-il? Vous voulez juste que votre colonne de texte soit large de 400 pixels parce que cela convient à votre conception.
  • Pour cette raison, ils ont ajouté deux éléments supplémentaires au HTML: les éléments génériques ou dénués de sens <div> et <span>, parce qu'autrement, les gens reviendraient à abuser des éléments qui ont un sens.

329
2017-10-09 03:21



Il y a déjà de bonnes réponses détaillées ici, mais pas d'exemples visuels, alors voici une petite illustration:

difference between div and span

<div> est une balise de bloc, alors que <span> est une balise en ligne.


158
2017-10-07 18:02



<div> est un élément de niveau bloc et <span> est un élément en ligne.

Si vous vouliez faire quelque chose avec du texte en ligne, <span> est la voie à suivre, car il ne sera pas introduire des sauts de ligne <div> aurait.


Comme indiqué par d'autres, il y a une certaine sémantique impliquée avec chacun d'entre eux, le plus important est le fait qu'un <div> implique une division logique dans le document, semblable à peut-être une section d'un document ou quelque chose, un la:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

69
2017-10-08 16:03



La vraie différence importante est déjà mentionnée dans la réponse de Chris. Cependant, les implications ne seront pas évidentes pour tout le monde.

En tant qu'élément en ligne, <span> ne peut contenir que d'autres éléments en ligne. Le code suivant est donc faux:

<span><p>This is a paragraph</p></span>

Le code ci-dessus n'est pas valide. Pour envelopper les éléments de niveau bloc, un autre élément de niveau bloc doit être utilisé (tel que <div>). D'autre part, <div> ne peut être utilisé que dans des endroits où les éléments de niveau bloc sont légaux.

De plus, ces règles sont fixées en (X) HTML et sont ne pas altéré par la présence de règles CSS! Donc, les codes suivants sont aussi faux!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

28
2017-10-08 16:08



La signification de "élément de bloc" est implicite mais jamais explicitée. Si nous ignorons toute la théorie (la théorie est bonne), alors ce qui suit est une comparaison pragmatique. Le suivant:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

produit:

This paragraph has a span.

This paragraph

has
a div.

Cela montre que non seulement devrait une div ne pas être utilisé en ligne, il ne sera tout simplement pas produire l'effet désiré.


6
2018-03-08 19:56



Comme mentionné dans d'autres réponses, par défaut div sera rendu comme un élément de bloc, tandis que span sera rendu en ligne dans son contexte. Mais aucun n'a de valeur sémantique; ils existent pour vous permettre d'appliquer un style et une identité à n'importe quel morceau de contenu. En utilisant des styles, vous pouvez faire un div agir comme un span et vice versa.

Un des styles utiles pour div est inline-block

Exemples:

  1. http://dustwell.com/div-span-inline-block.html

  2. Affichage CSS: inline vs inline-block

j'ai utilisé inline-block à un grand succès, dans des projets web de jeux.


5
2017-10-08 16:07



Div est un élément de bloc et span est un élément en ligne et sa largeur dépend du contenu de soi où div ne le fait pas


3
2018-05-18 06:22