Il ne faut cependant pas la confondre avec l'élément div qui n'a aucune valeur sémantique. Les deux ne sont pas interchangeables. La section regroupe un ensemble de contenu d'une même thématique, ou bien un ensemble d'éléments offrant une fonctionnalité spécifique dans une application web.
Notes d'utilisation
S'il est plus pertinent que le contenu soit à part, on utilisera l'élément <article> . L'élément <section> ne doit pas être utilisé comme un conteneur générique : c'est le rôle de <div> , notamment lorsque le sectionnement du contenu sert uniquement la mise en forme.
L'élément section
Un cas classique d'utilisation de section est le cas d'une page de présentation d'une entreprise. Sur ce type de pages, il y a généralement une partie dédiée à la présentation de l'activité de l'entreprise, une autre partie pour l'équipe, etc.
La balise HTML div, pour « division », est un élément de bloc qui a vocation à contenir d'autres éléments : un div HTML regroupe du contenu à l'intérieur de ses balises < div > < /div >. Le div HTML est un conteneur générique : sa fonction est structurante, il n'a aucune valeur sémantique.
Utiliser div dans les mises en page web (Web Layouts)
Vous utiliserez principalement la balise div pour regrouper du contenu similaire de façon à pouvoir le mettre en page facilement. Un bel exemple de ceci est d'utiliser div pour regrouper différentes sections sur une page web.
La grande différence entre les éléments div et span va concerner ce qu'ils vont pouvoir contenir : un élément div va pouvoir conteneur plusieurs éléments et va donc nous servir de conteneurs d'éléments tandis que l'élément span va nous servir de conteneur pour une partie du contenu d'un élément et va donc être utilisé ...
La balise div permet de diviser et de séparer les contenus en HTML. Comme le conteneur div n'a aucune signification sémantique propre, son utilisation n'est recommandée que lorsque d'autres éléments ne peuvent pas être utilisés.
Lors du clic sur le bouton, on récupère la valeur de la propriété display du div. Si la valeur est display: none, on la change en display: block pour afficher la div, et inversement. Résultat : le clic sur un bouton permet d'afficher ou de masquer la div.
On place une div en position relative en avec la valeur de la propriété : relative. La différence entre position absolue et position relative est à la façon dont la position est définie. Pour une div en position relative, elle est calculée d'après sa position originale dans la page.
Un menu fixe
La règle la plus intéressante ici est la règle ' position: fixed ', qui fait que le DIV reste fixe à l'écran. Les règles ' top: 50% ' et ' right: 0 ' déterminent où le DIV est affichée, en l'occurrence: 50% en bas par rapport au bord haut de la fenêtre, et à une certaine constante du bord droit (0px).
3. Division ou subdivision d'un ouvrage écrit : Un traité comprenant plusieurs sections. 4. Partie d'une voie de communication : Une section d'autoroute en réparation.
<article> : l'élément de contenu d'un article. L'élément <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication).
<main> L'élément HTML <main> représente le contenu majoritaire du <body> du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application.
Pour que tes 2 div soient côte à côte, tu dois les mettre dans une autre div ayant l'attribut class="maDiv". Et dans la CSS, tu crées la classe . maDiv {display: flex;}.
Il faut que tu places un float:left sur tes trois div afin qu'elles flottent les unes par rapport aux autres.
Code (x)html
Le principe est très simple : on divise chaque élément de la page par un div . La page se divise en quatre sections, chacune correspondant à une zone précise de la page : Un en-tête : div id="entete" Un menu : div id="menu"
pour aligner à droite : <div style="text-align: right;padding-right: 10px">… </div> (ce qui laisse une marge de 10 pixels à droite) ; pour centrer : <div style="text-align: center">… </div> .
Vous l'avez compris, les <div> c'est un peu comme les Lego : en les assemblant, on peut créer des structures visuellement percutantes ! Rien ne vous interdit d'assigner un lien à une <div> : il suffit bien entendu de l'encadrer avec les balises <a> et </a> .
Il te faudra simplement faire un lien dedans, et lui dire en CSS de prendre toute la taille disponible (et lui donner la propriété display: block;, également). Il faudrait voir le contenu qu'il doit y avoir dedans.
Grâce à des propriétés CSS, il est possible de faire en sorte que l'image s'adapte automatiquement aux dimensions de la div pour être visible entièrement sans déborder. Pour que l'image adapte ses dimensions à celles de la div, il faut utiliser les propriétés max-width et max-height.
Comment centrer un élément <div> verticalement et horizontalement avec Flexbox. Flexbox reste la meilleure façon de centrer un élément tant horizontalement que verticalement. Voilà, c'est tout ce que vous devez savoir pour centrer les éléments de la meilleure façon qui soit. Maintenant, allez-y, centrez-moi tout ça!
Par contre, <div> étant un élément n'ayant aucun sens sémantique, il ne doit en effet pas être utilisé en lieu et place d'une balise appropriée (sémantiquement) au contenu. Là, ça peut poser des soucis en terme de référencement, par exemple si tu utilise <div>Mon joli titre</div> au lieu de <h1>Mon joli titre</h1>...