Div et span permettent de regrouper différentes balises (textes, images, liens, ...) pour pouvoir positionner l'ensemble créé ou lui appliquer un style sur sa globalité.
Exemple : la partie ci-dessous dont le code source est à consulter ainsi que la partie style de l'entête.Dans cet exemple, le style de la classe « centrer » s’applique pour l’ensemble des objets contenant dans le bloc DIV, c’est à dire pour toutes les balises contenues entre DIV et /DIV. On a donc formé une zone de texte sur laquelle on applique une classe de style (au lieu d’appliquer cette classe de manière répétitive pour chacune de ces balises). Le résultat aurait été identique visuellement si on remplace la balise DIV par une balise SPAN.
La balise DIV (division) est une balise block alors que la balise SPAN (fusion) est inline ou en ligne. Les balises DIV peuvent contenir des balises SPAN et pas l'inverse (tout au moins en XHTML cf partie sur balises block ou inline. De plus DIV, comme c'est une balise block, génère un saut de ligne. Ces deux types de balises définissent une zone de texte à laquelle on peut donc attribuer un style. La balise SPAN est donc intéressante pour mettre en forme une partie d'une phrase ou d'un paragraphe.
Exemples :le texte est en continu et je ne souhaite pas voir apparaître de saut de ligne à l’intérieur de ce paragraphe tout en mettant une partie en valeur par une autre mise en forme.
Il est possible de placer ces zones au pixel près, de manière relative ou absolue mais aussi en définir la taille. La manière relative signifie placer l’élément par rapport à un autre élément, ce qui s’avère complexe au final et donc peut utilisé. La manière absolue est, quand à elle, largement utilisée car elle consiste à placer votre zone par rapport à un point fixe de votre page, généralement le coin haut à gauche. C’est donc sur la manière absolue qu’illustre notre exemple avec, en plus, la définition de la taille de cette zone. Les navigateurs essayerons de respecter cette taille dès lors où les objets de cette zone ne dépassent pas la taille souhaitée. Des superpositions partielles ou totales sont possibles.
Exemple :
un paragraghe placé à 90 pixels gauche et 830 du haut, et de 515 pixels de large et 300 de hauteur.
un lien après une image