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

Question

Je voudrais demander quelques exemples simples montrant l’utilisation de et . J’ai vu les deux utilisé pour marquer une section d’une page avec un ou , mais je suis intéressé à savoir si il y a des moments quand on est préférable à l’autre.

Answer 1

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

Cela signifie que pour utiliser du point de vue sémantique, les divs doit être utilisé pour envelopper des sections d'un document, alors que l'envergure devrait être utilisé pour envelopper les petites portions de texte, d'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 bloc de niveau élément dans un élément inline, donc:

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

...est illégal.

Vous avez demandé des exemples concrets, est donc celui de mon bowling site web, BowlSK:

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

Ok, ce qui se passe? En haut de ma page, j'ai une logique, la section "en-tête". Depuis cette section, j'utilise un div avec l'id. Dans ce cadre, j'ai un couple de la section de la barre d'utilisateur et le titre de la page. Le titre utilise la balise appropriée, h1. La userbar, étant une section, est enveloppé dans un div. Dans ce cadre, le nom d'utilisateur est enveloppé dans un span, de sorte que je peux changer le style. Comme vous pouvez le voir, j'ai aussi enveloppé d'un span autour de 2 lettres dans le titre - ce qui me permet de changer leur couleur dans ma feuille de style.

Notez également que le HTML5 comprend un vaste ensemble de nouveaux éléments qui définissent la commune de la page de structures, telles que l'article, article, nav, etc. L'article 4.4 de l' HTML 5 de travail projet de listes, et donne des conseils quant à leur utilisation. HTML5 est encore un travail spec, donc rien n'est "final", mais il est très peu probable que l'un de ces éléments n'importe où. Il y a un javascript hack que vous devrez utiliser si vous voulez le style de ces éléments dans certaines anciennes version d'IE - vous avez besoin de créer un de chaque élément à l'aide de document.createElement avant de l'un quelconque de ces éléments sont spécifiés dans votre source. Il y a un tas de bibliothèques qui vont prendre soin de cela pour vous - une recherche rapide sur Google tourné html5shiv.

Answer 2

Juste par souci d'exhaustivité, je vous invite à penser comme ceci:

• Il y a beaucoup d'éléments de bloc (retours à la ligne (avant et après), défini dans le code HTML, et beaucoup de tags (pas de retours à la ligne ().
• Mais en moderne HTML tous les éléments sont censés avoir des significations: un <p> est un paragraphe, une <li> est un élément de la liste, etc., et nous sommes censés utiliser le bon tag pour la bonne cause-pas comme dans les vieux jours, quand nous en retrait à l'aide de <blockquote> si le contenu a été un devis ou pas.
• Alors, que faites-vous quand il n' est pas de sens à la chose que vous essayez de faire? Il n'y a aucun sens à 400px de large colonne, est-il? Vous voulez que votre colonne de texte à 400px de large car qui convient le mieux à votre conception.
• Pour cette raison, ils ont ajouté deux autres éléments HTML: le générique, ou dénué de sens, les éléments <div> et <span>, parce que sinon, les gens vont revenir à abuser les éléments qui ont du sens.

Answer 3

Il existe déjà des bonnes réponses détaillées ici, mais pas d’exemples visuels, alors voici une illustration rapide :

est une balise de bloc, tandis que est une balise inline.

Answer 4

<div> est un bloc d'élément et d' <span> est un élément inline.

Si tu voulais faire quelque chose avec certains de texte en ligne, <span> est le chemin à parcourir, car il n'introduirons pas de sauts de ligne qui un <div> serait.

---

Comme indiqué par d'autres, il y a quelques sémantique implicite avec chacun d'eux, le plus significatif est le fait qu'un <div> implique une division logique dans le document, qui s'apparente peut-être à une section d'un document ou d'une chose, d'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>

Answer 5

La vraie différence importante est déjà mentionné dans de Chris réponse. Toutefois, les implications ne sera pas évident pour tout le monde.

Comme un élément inline, <span> ne peut contenir 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 bloc au niveau de l'élément doit être utilisé (comme <div>). D'autre part, <div> ne peut être utilisé dans des endroits où les éléments de niveau bloc sont légales.

En outre, ces règles sont fixées en (X)HTML et ils sont pas modifiées par la présence de règles CSS! Donc, les codes suivants sont également mal!

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