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.
Il est plutôt utilisé pour regrouper le contenu afin qu'il puisse être facilement stylé à l'aide des attributs class ou id , pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut lang ), etc. Contenu de flux, contenu tangible.
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.
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.
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.
L'élément div ne possède pas d'attribut particulier. Il supporte les attributs universels comme l'ensemble des éléments HTML. Pour rappel, les attributs universels sont des attributs qui peuvent être ajoutés à tous les éléments HTML. Quelques exemples d'attributs universels communs : class , id , lang , style , title …
<span> L'élément HTML <span> est un conteneur générique en ligne (inline) pour les contenus phrasés. Il ne représente rien de particulier.
Définissez la taille de votre div avec les propriétés CSS width et height. Définissez la position pour vos titres en utilisant la propriété text-align . Utilisez la propriété CSS clear qui est directement liée à la propriété float. Elle définit qu'un élément doit être à côté ou au dessous des élément flottants.
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.
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 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;}.
La balise < TABLE > qui définit le début et la fin du tableau. La balise < TR > qui définit le début d'une ligne et la fin de cette ligne. La balise < TD > qui définit une cellule dans une ligne. Dans l'exemple ci-dessus, le tableau est composé d'une ligne contenant une cellule.
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> .
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).
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.
Pour afficher ou masquer dynamiquement une div en JavaScript, la solution la plus simple et efficace est de modifier la propriété CSS display de l'élément. Par défaut, la valeur de cette propriété pour une div est égale à block dans le code JavaScript. En la mettant à none, la division devient masquée.
Il faut que tu places un float:left sur tes trois div afin qu'elles flottent les unes par rapport aux autres.
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> .
Utiliser div en CSS artistique
Pour faire un carré avec la balise div , vous devez d'abord définir une balise div vide et lui attacher un attribut class dans le HTML. Dans le CSS, sélectionnez la div à l'aide de l'attribut class, ensuite définissez-lui une hauteur et une largeur égales.
<br> : l'élément de saut de ligne. L'élément HTML <br> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).
La liste numérotée HTML démarre avec une balise <ol> qui définit, comme le fait la balise <ul> pour la liste à puces, le début de la liste ordonnée. Chaque élément doit également être encadré par des balises <li></li>. Lorsque tous les éléments ont été cités, une balise </ol> vient clôturer la liste.
À quoi sert la balise HTML label ? La balise HTML label est particulièrement importante pour la clarté et l'accessibilité d'un site Web. Elle est utilisée dans les formulaires et ajoute une légende explicative ou une étiquette à des éléments tels que les champs de saisie, les boutons ou les cases à cocher.