Quelle est la différence entre les balises HTML < div > et < span > ;?

Question

J'aimerais vous demander quelques exemples simples illustrant les utilisations de < div > et de < span > . Je les ai vus tous les deux utilisés pour marquer une section de page avec un id ou une classe , mais j'aimerais savoir s'il y a des moments où on préfère celle-ci l'autre.

Answer 1

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

Cela signifie que pour les utiliser sémantiquement, les divisions doivent être utilisées pour envelopper des sections d'un document, tandis que les étendues doivent être utilisées pour envelopper de petites parties 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 é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: A 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 obtenir 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 un contenu de flux.

Vous avez demandé des exemples concrets. C’est le cas de mon site Web sur le 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'entête". Puisqu'il s'agit d'une section, j'utilise un div (avec un identifiant approprié). À l'intérieur de cela, j'ai deux sections: la barre d'utilisateur et le titre de la page. Le titre utilise la balise appropriée, h1 . La barre d’utilisateur, en tant que section, est encapsulée dans un div . Dans ce cadre, le nom d'utilisateur est entouré d'une span , afin que je puisse modifier le style. Comme vous pouvez le constater, j’ai également placé un span autour de 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 large d’éléments définissant les structures de page communes, telles que article, section, navigation, etc. La section 4.4 de la Le brouillon de travail HTML 5 les répertorie et donne des indications sur leur utilisation. HTML5 est toujours une spécification fonctionnelle, donc rien n’est "final". Cependant, il est fort douteux que l’un quelconque de ces éléments aille n'importe où. Il y a un hack javascript que vous devrez utiliser si vous souhaitez styliser ces éléments dans une version plus ancienne d'IE - vous devez en principe créer l'un de chaque élément en utilisant document.createElement avant aucun de ces éléments. sont spécifiés dans votre source. De nombreuses bibliothèques se chargeront de cela - une recherche rapide dans Google a révélé html5shiv .

Answer 2

Juste pour être complet, je vous invite à y réfléchir comme suit:

• Il existe de nombreux éléments de bloc (sauts de ligne avant et après) définis en HTML, ainsi qu'un grand nombre de balises en ligne (aucun saut de ligne).
• Mais en HTML moderne, tous les éléments sont supposés avoir des significations : un < p > est un paragraphe, un < li > est un élément de la liste, etc., et nous sommes supposés utiliser la bonne balise pour le bon but - pas comme à l’époque où nous indentions avec < blockquote > si le contenu était un devis ou pas.
• Alors, que faites-vous quand il n'y a aucune signification pour la chose que vous essayez de faire? Il n'y a pas de signification dans une colonne de 400 pixels de large, n'est-ce pas? Vous souhaitez simplement que votre colonne de texte mesure 400 pixels de large, car cela convient à votre conception.
• Pour cette raison, ils ont ajouté deux éléments supplémentaires au code HTML: les éléments génériques ou sans signification < div > et < span > , car sinon, revenir à abuser des éléments qui ont une signification.

Answer 3

Il existe déjà de bonnes réponses détaillées ici, mais aucun exemple visuel, alors voici une illustration rapide:

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

Answer 4

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

Si vous voulez créer quelque chose avec du texte en ligne, < span > est la voie à suivre car il n'introduira pas de sauts de ligne dans lesquels < div > serait.

Comme l'ont noté d'autres personnes, certaines sémantiques sont impliquées dans chacune d'elles, notamment le fait qu'un < div > implique une division logique dans le document, similaire à une section d'un fichier. document ou quelque chose, à 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é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 insérer des éléments de niveau bloc, vous devez utiliser un autre élément (tel que < div > ). Par contre, < div > ne peut être utilisé qu'aux endroits où les éléments de niveau bloc sont légaux.

De plus, ces règles sont fixées en (X) HTML et ne sont pas altérées 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>

Answer 6

La signification de " élément de bloc " est implicite mais jamais explicitement déclaré. Si nous ignorons toute la théorie (la théorie est bonne), voici une comparaison pragmatique. Les éléments suivants:

<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 un non div ne devrait pas être utilisé en ligne, il ne produira tout simplement pas l'effet recherché.

Answer 7

Comme mentionné dans d'autres réponses, div sera par défaut rendu en tant qu'élément de bloc, tandis que span sera rendu en ligne dans son contexte. Mais ni l'un ni l'autre n'a de valeur sémantique; ils existent pour vous permettre d'appliquer un style et une identité à un contenu donné. En utilisant des styles, vous pouvez faire en sorte qu'un div se comporte comme un span et inversement.

L'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 pour un grand succès dans les projets Web de jeux.

Answer 8

Div est un élément de bloc et span est un élément en ligne et sa largeur dépend du contenu de lui-même, contrairement à ce que div

Answer 9

Je dirais que si vous connaissez un peu d'espagnol, consultez ceci page , où est correctement expliqué.

Cependant, une définition rapide serait que div est utilisé pour diviser des sections et que span est destiné à appliquer une sorte de style à un élément contenu dans un autre élément de bloc, tel que . div .

Answer 10

Je voulais juste ajouter un contexte historique à la façon dont il est devenu span vs div

Historique de span :

  

Le 3 juillet 1995, Benjamin C. W. Sittler propose un texte générique   conteneur pour appliquer des styles à certains blocs de texte.   Le rendu est neutre sauf si utilisé en conjonction avec un   feuille de style. Il y a un débat autour de versus   lisibilité, signification. Bert Bos mentionne la nature de l'extensibilité   de l'élément via l'attribut class (avec des valeurs telles que   ville, personne, date, etc.). Paul Prescod s’inquiète de ce que les deux éléments   sera abusé. Il est opposé au texte mentionnant que "toute nouvelle   l'élément doit être sur un vieil " et ajouter " Si nous créons une étiquette avec   pas de sémantique, il peut être utilisé n’importe où sans jamais se tromper. Nous   obliger les auteurs à baliser correctement la sémantique de leur document. nous   obliger les vendeurs d’éditeur à rendre ce choix explicite dans leur   interfaces. "

- Source (wiki W3)

À partir du brouillon RFC introduisant span :

  

Tout d’abord, un contrat générique           tainer est nécessaire pour porter les attributs LANG et BIDI dans           les cas où aucun autre élément n'est approprié; l’élément SPAN           est introduit à cet effet.

- Source (projet IETF)

Historique de div :

  

Les éléments DIV peuvent être utilisés pour structurer les documents HTML sous la forme d'une hiérarchie de divisions.

     

...

     

CENTER a été introduit par Netscape avant l’ajout de la prise en charge du   Elément HTML 3.0 DIV. Il est conservé en HTML 3.2 en raison de sa   déploiement généralisé.

Spécification HTML 3.2

En un mot, les deux éléments découlent de la nécessité d’un conteneur plus générique. Span a été proposé comme solution de remplacement plus générique pour un élément < text > dans le style du texte. Div a été proposé comme un moyen générique de diviser des pages et présente l’avantage supplémentaire de remplacer la balise < center > pour un contenu centré. Div a toujours été un élément de bloc en raison de son histoire en tant que diviseur de page. Span a toujours été un élément en ligne car son objectif initial était le style du texte. Aujourd'hui, div et span sont tous deux devenus des éléments génériques dotés respectivement des propriétés d'affichage par défaut du bloc et de l'inline.

Answer 11

En HTML, il existe des balises qui ajoutent une structure ou une sémantique au contenu. Par exemple, la balise < p > est utilisée pour identifier un paragraphe. Un autre exemple est la balise < ol > pour une liste ordonnée.

Lorsqu'il n'y a pas de balise appropriée disponible en HTML, comme indiqué ci-dessus, les balises < div > et < span > sont généralement utilisées.

La balise < div > est utilisée pour identifier une section ou une division de niveau bloc d'un document qui comporte un saut de ligne avant et après.

Les en-têtes, les pieds de page, les navigations, etc., peuvent utiliser des balises div. Cependant, ces balises ont déjà été fournies en HTML 5.

La balise < span > est utilisée pour identifier une section / division en ligne d'un document.

Par exemple, une balise span peut être utilisée pour ajouter des pictogrammes en ligne à un élément.

Answer 12

Rappelez-vous, fondamentalement, et eux-mêmes n’exécutent aucune fonction. Ils ne sont pas spécifiques sur les fonctionnalités uniquement par leurs balises .

Ils ne peuvent être personnalisés qu'à l'aide de CSS.

Maintenant que vous venez à votre question:

Une balise SPAN associée à un style sera utile si vous souhaitez conserver une ligne, disons un paragraphe, dans le code HTML. Il s’agit d’un type de niveau de ligne ou d’instruction en HTML.

Exemple:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

La fonctionnalité des balises DIV ne peut être visible que si elle est stylée et peut contenir de gros morceaux de code HTML.

DIV est le niveau du bloc

Exemple:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

Les deux ont leur heure et leur cas d'utilisation, en fonction de vos besoins.

J'espère que la réponse est claire. Merci.

Answer 13

< div > est un élément de bloc.  Comme quoi tous les paragraphes ou tout contenu écrit à l'intérieur d'une div, nous pouvons appliquer css à tous les éléments de la div. En donnant simplement du style en div seul.

< span > est un élément en ligne.

Ce que toutes les modifications CSS apportées ne reflètent que cet élément.

<div style="color:green;">

 <h1>Example of div and span</h1>
   <p>
    This is a paragraph within a div
     <span style="color: red;"> Paragraph with in span. </span>
   </p>
 </div>