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 de page avec un id ou class, mais j'aimerais savoir s'il y a des moments où l'un est préféré à l'autre.
div est un élément de bloc, span est en ligne.
Cela signifie que pour les utiliser sémantiquement, les div devraient être utilisées pour envelopper des sections d'un document, alors que les étendues devraient être utilisées pour envelopper 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, ainsi:
<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 une liste assez claire. Ce qui précède est toujours illégal, car <span> n'accepte que le contenu de la formulation 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'en-tê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 enveloppé dans un span, afin que je puisse modifier le style. Comme vous pouvez le constater, j'ai également enveloppé une 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 d’éléments définissant les structures de page communes, telles que article, section, navigation, etc. La section 4.4 du HTML 5 working draft les répertorie et donne des indications sur leur utilisation. HTML5 est toujours une spécification opérationnelle, donc rien n'est encore "final", mais il est fort douteux que ces éléments partent nulle part. Il y a un hack javascript que vous devrez utiliser si vous souhaitez styliser ces éléments dans une version antérieure de IE - vous devez en principe créer un de chaque élément à l'aide de document.createElement avant ces éléments. les éléments sont spécifiés dans votre source. Un certain nombre de bibliothèques s’occuperont de cela pour vous - une recherche rapide sur Google est apparue html5shiv .
Par souci d’exhaustivité, je vous invite à réfléchir 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 supposés avoir 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 au bon vieux temps où nous avions mis en retrait avec<blockquote>si le contenu était un devis ou non. - Alors, que faites-vous quand est 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 voulez juste que votre colonne de texte soit 400px de large 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 sans signification
<div>et<span>, car sinon, les utilisateurs recommenceraient à abuser des éléments qui ont une signification.
Il y a 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.
<div> est un élément de niveau bloc et <span> est un élément en ligne.
Si vous voulez faire quelque chose avec du texte en ligne, <span> est la voie à suivre car il n'introduira pas de sauts de ligne qu'un <div>.
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, qui s'apparente peut-être à une section d'un document ou à quelque chose d'autre:
<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 faux:
<span><p>This is a paragraph</p></span>
Le code ci-dessus n'est pas valide. Pour envelopper des é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 les endroits où les éléments de niveau bloc sont légaux.
De plus, ces règles sont fixées en (X) HTML et elles sont not modifié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>
La signification de "élément de bloc" est implicite mais jamais explicitement énoncée. Si nous ignorons toute la théorie (la théorie est bonne), voici 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 not doit être utilisé en ligne, il ne produira tout simplement pas l’effet souhaité.
Comme mentionné dans d'autres réponses, div par défaut sera rendu sous forme d'é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 que div se comporte comme un span et inversement.
L'un des styles utiles pour div est inline-block
Exemples:
J'ai utilisé inline-block pour un grand succès dans les projets Web de jeux.
Je dirais que si vous connaissez un peu d'espagnol, cette page , où est correctement expliqué.
Cependant, une définition rapide serait que div est utilisé pour diviser des sections et que span est utilisé pour appliquer une sorte de style à un élément contenu dans un autre élément de bloc, tel que div.
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 là où div ne le fait pas.
Je voulais juste ajouter un contexte historique à la façon dont il est venu à être span vs div
Histoire de span:
Le 3 juillet 1995, Benjamin C. W. Sittler propose une balise de conteneur de texte générique permettant d'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 sur la lisibilité, la signification. Bert Bos mentionne la nature d'extensibilité de l'élément à travers l'attribut de classe (avec des valeurs telles que la ville, la personne, la date, etc.). Paul Prescod craint que les deux éléments ne soient maltraités. Il s'oppose au texte mentionnant que "tout nouvel élément doit figurer sur un ancien" et d'ajouter "Si nous créons une balise sans sémantique, elle peut être utilisée n'importe où sans jamais se tromper. obliger les auteurs à baliser correctement la sémantique de leur document. Nous devons obliger les éditeurs d’éditeur à rendre ce choix explicite dans leurs interfaces. "
Dans le brouillon RFC qui introduit span:
Premièrement, un conteneur générique 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.
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 l’ajout de la prise en charge de l’élément HTML 3.0 DIV. Il est conservé dans HTML 3.2 en raison de son déploiement généralisé.
En un mot, les deux éléments sont nés 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 de bloc et d'affichage en ligne.
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.
Comme il n’existe pas de balise HTML appropriée 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/division de niveau bloc d'un document qui comporte un saut de ligne avant et après celui-ci.
Les en-têtes, les pieds de page, les navigations, etc. peuvent être utilisés comme balises div. Toutefois, 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 intégrés à un élément.
Rappelez-vous, fondamentalement et eux-mêmes n'effectuent aucune fonction non plus. Ils sont pas spécifiques à la fonctionnalité juste par leurs balises.
Ils ne peuvent être personnalisés qu'avec l'aide de CSS.
Maintenant que vient à votre question:
Une balise SPAN associée à un certain style sera utile si vous souhaitez conserver une ligne, par exemple un paragraphe, au format HTML. C'est en quelque sorte le niveau de ligne ou le niveau de déclaration 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, comme cela est dit, ne peut être visible que si elle est stylée et peut contenir de gros morceaux de code HTML.
DIV est le niveau de 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. Je vous remercie.