HTML - balise <div>

  »   HTML  »   Tutoriel HTML - Utiliser la balise Div

La balise div n'est rien de plus qu'un conteneur pour d'autres balises. Voici quelques attributs de div:

  • id
  • class
  • title
  • style
  • height
  • width

Le reste des attributs n'est généralement pas utilisé, leur fonction est assurée par le CSS.

Voici un exemple d'utilisation de la balise <div>:

html<div id="my_menu" align="right">
	<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>
</div>

<div id="my_content" align="left" bgcolor="white">
	<h4>Titre ici</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Demo

Titre ici

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

La balise div est beaucoup plus facile à utiliser que la balise tableau, donc il est recommandé de l'utiliser à chaque fois que vous en avez besoin.

HTML - La balise div - facile a modifier

Une des raisons pour laquelle elle est facile à utiliser est parce qu'elle permet d'introduire de nouvelle information facilement, nous illustrerons cela pour vous.

Dans cette exemple, nous avons ajouté quelques nouveaux champs à la page illustrée ci-dessus.

html<div id="my_menu" align="right">
	<a href="#">HOME</a> | 
	<a href="#">CONTACT</a> | 
	<a href="#">ABOUT</a> |
	<a href="#">SITEMAP</a>
</div>

<div id="my_content" align="left" bgcolor="white">
	<h4>Titre HTML ici</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	<h4>Second titre HTML ici</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

Demo

Titre HTML ici

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Second titre HTML ici

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.