Comment utiliser les éléments HTML Span et Div
Différentes balises à des fins différentes
Hamza Tarkkol/Getty Images
Deux et s'étend ne sont pas interchangeables dans la création de pages Web. Chacun a des objectifs différents, et savoir quand les utiliser vous aidera à développer des sites Web propres et faciles à gérer.
Utilisation de l'élément Div
Deux définir des divisions logiques sur votre page Web. UN div - abréviation de division - est essentiellement une boîte dans laquelle vous pouvez placer d'autres Éléments HTML qui vont ensemble. Une division peut contenir plusieurs autres éléments, tels que des paragraphes, des titres, des listes, des liens, des images, etc. Elle peut même contenir d'autres divisions pour fournir une structure et une organisation supplémentaires.
Pour utiliser le div élément, placez une ouverture balise avant la zone de votre page que vous souhaitez comme division séparée, et une fermeture taguer après :
|__+_|Si vous allez styliser cette zone avec CSS, vous pouvez ajouter un IDENTIFIANT sélecteur à la balise div d'ouverture :
|__+_|
Ou, vous pouvez ajouter un sélecteur de classe :
|__+_|Vous pouvez ensuite travailler avec ces éléments en CSS ou JavaScript.
Les meilleures pratiques actuelles tendent à utiliser des sélecteurs de classe au lieu d'ID, en partie à cause de la spécificité des sélecteurs d'ID. L'un ou l'autre est acceptable, cependant, et vous pouvez même donner un div à la fois un ID et un sélecteur de classe.
Divs ou sections ?
La div l'élément est différent deHTML5 section car il ne donne aucune signification sémantique au contenu inclus. Si vous ne savez pas si le bloc de contenu doit être un div ou un section , pensez à l'objectif de l'élément et au contenu.
- Si vous avez besoin de l'élément simplement pour ajouter des styles à cette zone de la page, vous devez utiliser le div élément.
- Si le contenu a un objectif distinct et peut se suffire à lui-même, envisagez d'utiliser le section élément à la place.
En définitive, les deux deux et sections se comportent de la même manière, et vous pouvez leur attribuer des attributs et les styliser avec CSS. Les deux sont des éléments de niveau bloc.
Utilisation des étendues
Envergure est un élément en ligne par défaut, contrairement à div et section éléments. La envergure L'élément est généralement utilisé pour envelopper un élément de contenu spécifique tel que du texte afin de lui donner un crochet supplémentaire que vous pouvez utiliser pour ajouter des styles. Sans aucun attribut de style, cependant, envergure n'a aucun effet sur le texte.
Une autre différence entre le envergure et div éléments est que le div l'élément inclut un saut de paragraphe, alors que l'élément envergure indique uniquement au navigateur d'appliquer les règles de style CSS associées à ce qui est entouré par l'élément Mots clés:
|__+_|Vous pourriez ajouter
|__+_|
ou similaire à la envergure élément pour styliser le texte avec CSS.
L'élément span n'a pas d'attributs obligatoires, mais les trois qui sont les plus utiles sont les mêmes que ceux de l'élément div élément:
Utilisation envergure lorsque vous souhaitez modifier le style du contenu sans définir ce contenu comme un nouveau élément de niveau bloc dans le document.
Par exemple, si vous souhaitez que le deuxième mot d'un h3 devenir rouge, vous pouvez entourer ce mot d'un envergure élément qui styliserait ce mot en tant que texte rouge. Le mot fait toujours partie du h3 élément, mais s'affichera en rouge.