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


543

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

Réponses:


582

Cela signifie que pour les utiliser sémantiquement, les div doivent être utilisées pour encapsuler des sections d'un document, tandis que les étendues doivent être utilisées pour encapsuler de 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 é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: Depuis 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>il accepte uniquement le contenu de phrasé et <div>est un contenu de flux.


Vous avez demandé des exemples concrets, alors celui-ci est tiré de 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="https://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é). À l'intérieur de cela, j'ai quelques sections: la barre d'utilisateur et le titre de la page réelle. Le titre utilise la balise appropriée, h1. La barre d'utilisateurs, étant une section, est enveloppée dans un div. À l'intérieur de cela, le nom d'utilisateur est enveloppé dans un span, afin que je puisse changer le style. Comme vous pouvez le voir, j'ai également enveloppé spanenviron 2 lettres dans le titre - cela me permet de changer leur couleur dans ma feuille de style.

Notez également que HTML5 comprend un large nouvel ensemble d'éléments qui définissent les structures de page communes, telles que l'article, la section, la navigation, etc.

La section 4.4 du projet de travail HTML 5 les énumère et donne des conseils quant à leur utilisation. HTML5 est toujours une spécification fonctionnelle, donc rien n'est encore "final", mais il est très douteux que l'un de ces éléments aille quelque 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 créer un de chaque élément en utilisant document.createElementavant que l'un de ces éléments 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 a révélé html5shiv .


5
Chris, il y a une erreur dans votre texte: même si vous définissez le style de l'intervalle sur «block», il est toujours illégal de l'enrouler autour d'un élément de niveau bloc!
Konrad Rudolph

7
Vous ne pouvez pas utiliser divet spansémantiquement car ils n'ont aucune signification qui leur est attachée. divest un élément de niveau de bloc générique sans signification tandis que spanest un élément inline générique sans signification.
2011

9
@apnerve Ils ont toujours une sémantique dans ce bloc vs éléments en ligne signifient différentes choses pour documenter le flux, à la fois du point de vue de l'analyse et du point de vue "lire cette source pour comprendre ce qui se passe".
Chris Marasti-Georg,

20
"La sémantique (du grec sēmantiká, pluriel neutre de sēmantikós) [1] [2] est l'étude du sens. Elle se concentre sur la relation entre les signifiants, tels que les mots, les phrases, les signes et les symboles, et ce qu'ils représentent, leur dénotata . " Les signifiants "div" et "span" représentent très certainement quelque chose. La spécification HTML a une belle répartition de ce que représentent les éléments de bloc et en ligne. w3.org/TR/html401/struct/global.html#h-7.5.3 . Le brouillon HTML5 les place même dans des groupes distincts: regroupement du contenu et sémantique au niveau du texte. dev.w3.org/html5/spec/Overview.html
Chris Marasti-Georg

16
Vous m'avez eu à "div est un élément de bloc, span est en ligne." :)
Matical

390

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 dans le HTML moderne, tous les éléments sont censés avoir des significations : a <p>est un paragraphe, an <li>est un élément de liste, etc., et nous sommes censés utiliser la bonne balise dans le bon but - pas comme dans l'ancien temps où nous indenté en utilisant <blockquote>si le contenu était une citation ou non.
  • Alors, que faites-vous quand il n'y a aucun sens à la chose que vous essayez de faire? Il n'y a aucun sens à une colonne de 400 pixels de large, n'est-ce pas? Vous voulez juste que votre colonne de texte ait une largeur de 400 pixels car 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>, sinon, les gens recommenceraient à abuser des éléments qui ont un sens.

20
Ceci est une bonne explication. Je me demande pourquoi cela n'a pas été accepté comme réponse.
2011

16
parce que c'est trop loin sur la page
Jason Sebring

12
Ce n'est pas parce qu'une bonne réponse n'a pas été acceptée que vous ne pouvez pas voter. +1 pour être une clarification utile.
CyberFonic

8
Bon à savoir, mais cela ne répond pas à la question d'origine, car il n'explique pas les différences entre les éléments div et span.
tehvan

216

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

différence entre div et span

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

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


16
Ils ont un effet différent sur la mise en page, même sans CSS! C'est la première fois que je vois ça montré!
GreenAsJade

2
Merci, j'ai voté pour cette réponse car elle répond très rapidement que div a une ligne suivante
Script Kitty

4
merci d'expliquer visuellement les débutants comme moi :-)
Aritra Chatterjee

73

<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>c'est la voie à suivre car il n'introduira pas de sauts de ligne <div>.


Comme noté par d'autres, il y a une sémantique impliquée avec chacun d'eux, plus particulièrement le fait qu'un <div>implique une division logique dans le document, semblable à peut-être une section d'un document ou quelque chose, a 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>

1
les divs peuvent être faites en ligne (display: inline;) et vice versa pour span mais c'est la meilleure explication. Ce sont des balises wrapper, span est généralement utilisé pour les phrases ou le texte en surbrillance, div pour les sections.
Ross

3
Je suis conscient du fait que vous pouvez modifier cela avec CSS, mais cela introduit une autre technologie. Le HTML peut se suffire à lui-même, et quand il le fait, un div n'est pas en ligne et il n'est pas destiné à l'être dans sa forme pure.
Jason Bunting

Existe-t-il un bon livre expliquant comment utiliser correctement les éléments html dans différentes situations.
mko

@mko - Je ne sais pas, pour être honnête. L'expérience est le meilleur professeur. En fin de compte, il n'y a pas de «bonne» réponse, en soi, il y a simplement ce qui fonctionne pour votre situation et vos besoins. ;)
Jason Bunting

30

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 erroné:

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

Le code ci-dessus n'est pas valide. Pour encapsuler des éléments de niveau bloc, un autre élément de niveau bloc doit être utilisé (tel que <div>). En revanche, <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 ne sont pas altérées par la présence de règles CSS! Les codes suivants sont donc également erronés!

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

7
@Faizan En quoi est-ce pertinent? C'est également faux: tous les navigateurs ne produiront pas des résultats cohérents pour ce balisage. Selon le doctype que vous utilisez (et, encore une fois, le navigateur), cela peut même ne pas fonctionner du tout, et conduire plutôt à une erreur de validation.
Konrad Rudolph

Je vois que certains navigateurs sont suffisamment efficaces pour exécuter du code invalidé. c'est pourquoi cela a fonctionné. Pouvez-vous me recommander un bon validateur pour HTML.?
Faizan

6
"Soyez conservateur dans ce que vous faites et libéral dans ce que vous acceptez" en.wikipedia.org/wiki/Robustness_principle
jldupont

5
Bienvenue à la cantine de soupe. Les navigateurs utilisant du HTML non valide sont la raison même pour laquelle les analyseurs HTML très optimisés ne sont pas la norme. Chaque navigateur digne de ce nom (c'est-à-dire compatible avec le «HTML») utilise une bibliothèque (interne) de type «soupe» pour le rendre agréable au goût.
Ack

8

La signification de "l'élément de bloc" est implicite mais n'a jamais été explicitement indiquée. Si nous ignorons toute la théorie (la théorie est bonne), 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 un div pas être en ligne utilisé, il suffit de ne produira pas l'effet désiré.


6

Comme mentionné dans d'autres réponses, par défaut divsera rendu comme un élément de bloc, tandis spanqu'il 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 donné. En utilisant des styles, vous pouvez faire un divacte comme un spanet vice-versa.

L' un des styles utiles pour divest -inline-block

Exemples:

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

  2. Affichage CSS: inline vs inline-block

Je connais inline-blockun grand succès dans les projets web de jeux.


3
S'ils n'avaient pas de valeur sémantique, il n'y en aurait qu'un. L'une est censée être une division au niveau du bloc - l'autre, une travée en ligne
Chris Marasti-Georg

3

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 où div ne le fait pas


3

Je dirais que si vous connaissez un peu d'espagnol pour regarder cette page , où est bien expliqué.

Cependant, une définition rapide serait divde diviser des sections et spand'appliquer un type de style à un élément dans un autre élément de bloc comme div.


Pas besoin de connaître l'espagnol, la version anglaise est <span> - HTML | MDN .
user34660

3

Je voulais juste ajouter un contexte historique à la façon dont il y a eu spanvsdiv

Histoire de span:

Le 3 juillet 1995, Benjamin CW Sittler propose une balise de conteneur de texte générique pour appliquer des styles à certains blocs de texte. Le rendu est neutre, sauf s'il est utilisé conjointement avec une feuille de style. Il y a un débat autour de versus sur la lisibilité, le sens. Bert Bos mentionne la nature d'extensibilité de l'élément à travers l'attribut class (avec des valeurs telles que ville, personne, date, etc.). Paul Prescod craint que les deux éléments ne soient abusés. Il est opposé au texte mentionnant que "tout nouvel élément devrait être sur un ancien" et ajoutant "Si nous créons une balise sans sémantique, elle peut être utilisée n'importe où sans jamais se tromper.Nous devons obliger les auteurs à étiqueter correctement la sémantique de leur document. Nous devons obliger les éditeurs à rendre ce choix explicite dans leurs interfaces. "

- Source (w3 wiki)

De l'ébauche RFC qui présente span:

Premièrement, un conteneur générique est nécessaire pour transporter 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 (IETF Draft)

Histoire de div:

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

...

CENTER a été introduit par Netscape avant d'ajouter la prise en charge de l'élément HTML 3.0 DIV. Il est conservé en HTML 3.2 en raison de son déploiement généralisé.

Spécification HTML 3.2

En un mot, les deux éléments sont nés du besoin d'un conteneur plus sémantique générique. Span a été proposé comme remplacement plus générique d'un <text>élément pour styliser le texte. Div a été proposé comme un moyen générique de diviser les pages et a eu l'avantage supplémentaire de remplacer la <center>balise pour le contenu d'alignement central. Div a toujours été un élément de bloc en raison de son histoire en tant que diviseur de page. La portée a toujours été un élément en ligne car son objectif initial était le style de texte et aujourd'hui, div et span sont tous deux devenus des éléments génériques avec respectivement des propriétés de bloc et d'affichage en ligne par défaut.


2

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

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

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

Des exemples d'utilisation des balises div sont les en-têtes, les pieds de page, les navigations, etc. Cependant, en HTML 5, ces balises ont déjà été fournies.

le <span> balise 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.


2

Rappelez-vous, fondamentalement, et eux-mêmes ne remplissent aucune fonction non plus. Ils ne sont pas spécifiques aux fonctionnalités uniquement par leurs balises .

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

Maintenant que j'en viens à votre question:

La balise SPAN avec un certain style sera utile pour conserver une ligne à l'intérieur, par exemple dans un paragraphe, en html. Il s'agit d'une sorte de niveau de ligne ou de niveau d'instruction en HTML.

Exemple:

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

La fonctionnalité de balise DIV, comme indiqué, ne peut être visible que sur un style, peut contenir de gros morceaux de code HTML.

DIV est au 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 quand ils doivent être utilisés, en fonction de vos besoins.

J'espère que la réponse est claire. Je vous remercie.


La réponse idéale que je cherchais.
PHPFan
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.