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

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.

• divest un élément de bloc
• spanest un élément en ligne .

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?

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 .

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.

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

<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.

<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>

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>

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é.

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.

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

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.

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.

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.

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.