HTML - L'etichetta <div>

  »   Tag speciali  »   HTML Tutorial - Using The Div Tag

L'etichetta div non è altro che un contenitore per altri tag. Ecco alcuni degli attributi del div:

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

Il resto degli attributi di solito non sono usati, il loro lavoro è stato sostituito dal CSS.

Qua puoi trovare un esempio:

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>Title here</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

Title here

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.

L'etichetta div è molto più facile da usare del tag table, per cui si raccomanda di usarlo tutte le volte che si ha bisogno.

HTML - L'etichetta div - La sua semplicità

Uno dei motivi per cui è facile da usare è l'introduzione di nuove informazioni che ne facilitano l'utilizzo e ve le esemplificheremo.

In questo esempio, abbiamo aggiunto alcuni nuovi campi alla pagina esemplificata sopra.

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>Titolo HTML</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>Secondo titolo HTML</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

Titolo HTML

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.

Secondo titolo HTML

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.