tag

The div tag is not more than a container for other tags. Here are some of the div’s attributes:

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

The rest of the attributes are not usually used, their job is taken by the CSS.

Here is an example of using the <div> tag:

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.

The div tag is much easier to use than the table tag, so for that it is recommended to use it as many times as you need.

HTML – The div tag – easy to modify

One of the reasons for which it is easy usable is introducing new info with ease and we will exemplify this to you.

In this example, we have added some new fields to the page exemplified above.

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>HTML 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>
	<h4>Second HTML 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

HOME | CONTACT | ABOUT | SITEMAP

HTML 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.

Second HTML 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*