Divs et s'étend ne sont pas interchangeables dans la création de pages Web. Chacun sert à des fins différentes, et savoir quand les utiliser vous aidera à développer des sites Web propres et faciles à gérer.
Utilisation de l'élément Div
Divs définir des divisions logiques sur votre page Web. UNE 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. Il peut même avoir d'autres divisions à l'intérieur 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 voulez comme division distincte, et une fermeture
contenu de div
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 en 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 identifiant et un sélecteur de classe.
Divisions ou sections?
le div l'élément est différent du HTML5section car il ne donne aucune signification sémantique au contenu enfermé. Si vous ne savez pas si le bloc de contenu doit être un div ou un section, réfléchissez à la finalité de l'élément et à son 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 fin de compte, les deux div et sections se comportent de la même manière, et vous pouvez donner à l'un ou l'autre des attributs et les styliser avec CSS. Les deux sont des éléments de niveau bloc.
Utilisation des étendues
Portée est un élément en ligne par défaut, contrairement div et section éléments. le portée L'élément est généralement utilisé pour envelopper un élément de contenu spécifique tel que du texte pour lui donner un crochet supplémentaire que vous pouvez utiliser pour ajouter des styles. Sans aucun attribut de style, cependant, portée n'a aucun effet sur le texte.
Une autre différence entre le portée et div éléments est que le div l'élément comprend un saut de paragraphe, tandis que l'élément portée L'élément indique uniquement au navigateur d'appliquer les règles de style CSS associées à ce qui est entouré par le Mots clés:
Texte surligné et du texte non surligné.
Vous pourriez ajouter.
classe="surligner"
ou similaire au portée é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:
- style
- classer
- identifiant
Utiliser portée 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 voulez que le deuxième mot d'un h3 vers le rouge, vous pouvez entourer ce mot d'un portée élément qui styliserait ce mot en texte rouge. Le mot fait toujours partie du h3 élément, mais s'affichera en rouge.