Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

The Div Tag for Page Divisions

Dividing the Page with the <div> Tag

The <div> tag is used to establish separate divisions or areas of your page. It is one of the most powerful elements in xhtml, as it is essential for positioning the design of your page using CSS.

Positioning will not be discussed in this tutorial, but gaining a solid understanding of the <div> tag now, will make it easier to learn more advanced positioning if and when you decide to learn more.

The id Attribute

The id attribute can be used with any tag element, but to identify and define an area of your page, the <div> tag can be used.

Facts about id’s:

  • The value for the id attribute must be used only once on your page. It is a unique identifier.
  • Keep in mind that the id value is case-sensitive. "Top" is different from "TOP" and also different from "top" – it is easiest to use all lower case letters.
  • Do not use spaces or any special characters as the id value. You may use letters, digits (1 thru 9), dashes (-), and underscores (_) but you must start the id value with a letter.

Defining Divisions

Working with the example file created from prior tutorials, examine the page displayed in your web browser. How is the page organized? (view my example 7coding.html file if you haven’t created one of your own yet.)

  • heading, content, email, footer
  • heading, italian, chinese, chocolate, email, footer
  • heading, content, footer

Divisions can be detailed, simple, or somewhere in between; there are no wrong answers when defining the divisions of your page. It’s all relative, like art appreciation!

Please view the 9coding.html file and take a look at the source code. Three <div> tags have been added, with ids for heading, content and footer. You will notice I kept the ids in each <h2> tag for italian, chinese, and chocolate. I have added detailed xhtml comment explanations.

Understand that the <div> tags added to my example files are not visually displayed on the page when viewed in a web browser. The true visual power of the <div> tag will not be known until CSS is implemented.

Do not be frustrated if you do not fully understand every bit of the code; just think of this as an example you can refer to again in the future.

Applying Divisions to Your Own Web Page

Practice using the <div> tag by adding specific divisions to your own web page. You may find it it easier to work with a brand new file, or you can work with the same file used in past tutorials.

It doesn’t have to be anything fancy; work slow, and validate after every edit. Errors that are found early, are easier to fix.

For another example of web page division using the <div> tag, please view my div.html file.

27 Comments

  1. Comment by Hector on August 22nd, 2006

    Very nice write up. Very helpful. Do you have any examples of implementing the tag with like a right column and left column for navigation bars. I would like to see an example if you do. Thanks. Keep up the good work.

  2. Comment by debbie T on August 22nd, 2006

    Thank you for writing, Hector.

    Glad to hear you enjoyed the tutorials so far.

    As for 2 and/or 3 columns, no, there aren’t any positioning tutorials at this time.

    I really need to add a resources page, with my favorite links, but unfortunately, due to another project I am involved in, this tutorial site has been put on hold for a little while. I hope to get back into it soon though!

    But if you search on google for “2 column css” – (or something like that) you will find lots and lots of tutorials and examples.

    Also, here is a wonderful resource site:
    http://websitetips.com/

  3. Comment by Gopinath on July 8th, 2007

    Any plans to write article on positioning divisions?

  4. Comment by debbie T on July 10th, 2007

    Hello Gopinath! Thank you for commenting.

    Unfortunately, I don’t have plans for additional tutorials right now. Real world projects have taken a lot of my time. But hopefully someday soon!

  5. Comment by Trish Stanek on July 30th, 2007

    Debbie, I really liked your website.
    I need help with this website (listed above).
    I was wondering if you could look at it and give suggestions. I want the navigation bar to scroll with the content just on the right. I have it in a frameset right now. Do I have to put the navigation bar and the other pages into a table to get it to scroll only on the right? How do I do that. Help please? Trish Stanek

  6. Comment by debbie T on July 30th, 2007

    Hello Trisha,

    Yes, you would need to remove the frame on the left and move the navigation to the main area on the right.

    You could use a table, sure.

    Good luck!

  7. Comment by Ritesh on August 5th, 2007

    Hi,
    I am in process of designing my website, but am not able to decide weather to use the div tag and implement it with a css or not. acutually i need your help in understanding how the laying out a webpage works using the div tag and css….
    thanks

  8. Comment by debbie T on August 6th, 2007

    Hello Ritesh.

    I highly recommend the book CSS Anthology by Rachel Andrew. It will give you the basics you need to work with the div tag.

    I wish you lots of luck!

  9. Comment by Jai on September 11th, 2007

    Hi,

    I am designer I need full basic level of div tags and also how to make full site with div tag..lession

    Thanks

  10. Comment by Bino on September 19th, 2007

    Hi
    i heard that divs are more attracted to crawl by search engines than tables. is that true?

  11. Comment by debbie T on September 20th, 2007

    Hello Bino!

    It isn’t that the div tags are more attractive, it is that they are easier to crawl because the spiders can find the content more readily. When a site has tons of nested tables, it just makes it harder to find the true content.

    Plus, with div tags, you can “position” your most important content first, and sections like navigation, headers, and footers can be “positioned” after.

  12. Comment by Mike on September 29th, 2007

    Hey neat web site you have here.

  13. Comment by Sraj on October 13th, 2007

    Hi..Tutor

    I want to design a webpage using without tables..with div tag…please explain the tutorial where can i find…

    Thanking you
    Raj..

  14. Comment by Abhay on November 14th, 2007

    Very Nice information about div tag…
    But I’m willing to learn tableless designing using div tag…
    If any body help me in that please contact me
    Thanks & Regards,
    Abhay Mandal

  15. Comment by jayakumar on December 3rd, 2007

    Hi I didn’t have any websites, I want to learn allthings, but I have not permission to learn these things in office, I have no system in room..how can I learn this please advise

  16. Comment by Mahantesh on December 26th, 2007

    can you give me the list of attributes using under div tag.

  17. Comment by sheetal on March 4th, 2008

    hi
    please let me know how to use the div tag in dreamweaver

  18. Comment by suresh on April 12th, 2008

    hello sir

    I am suresh as webdevloping i would like creat and tag use on html and creating menu also totaly create div tab bass and also use standard css code any online tuturial site so plz contact my mail id thank of all

    plz soon me reply

    thanks
    suresh dhamgaye

  19. Comment by Janco van der Merwe on April 21st, 2008

    suresh dhamgaye – go to http://www.tizag.com and look for the CSS / HTML Tutorials

    Debbie T –> Gr8 Info, thanx

  20. Comment by selvasekhar on May 20th, 2008

    gud information na, something can u explain briefly yaar

    cheers
    selvasekhar

  21. Comment by Reejab Pakibad on July 22nd, 2008

    Cheers kind sir, and much humble beginnings.

    I receive with gratitude your learnings my teachers, may your forsyth be blessed with copulous peaches.

    I regretfully dificulties am faced with many during my development of website. Please could help you provide, but without time to teach tutorial. knowledge must pass direct into my learnings without delay.

    Please provide access point where supreme Div tags skill may pass my head into direct. I am prepared to offer my Ear hole for such uses, allowing access to where data can be embedded.

    Thank you kind sir, I shall awaiting further details.

  22. Comment by hok on October 11th, 2008

    i love this site

  23. Comment by ketan sharma on October 31st, 2008

    Hi,

    I am designer I need full basic level of div tags and also how to make full site with div tag..lession

    Thanks

  24. Comment by krupa on November 3rd, 2008

    hi debbie
    nice write-up. im a web designer and i wanna start building my sites using totally. please write more on how to implement the tags and basic page divisions or kindly refer to tutorials which can explain it.
    tnx

  25. Comment by Joe Tippytoes on November 22nd, 2008

    Thanks for the page.

    All you people that write in this little box asking a million questions, mostly very general, are funny.

  26. Comment by Jay Huemann on November 24th, 2008

    I am going through your site again and am learning more the second time. I guess I need more then one time through.

    I have just tried the div tag and am now getting errors when I try and validate. I actually copied your div tag as is from your div.html but I still can not get it to validate.

    Can you help please? Can you look at http://www.huemanns.com/test.html

    Thanks for all of this,
    j. Huemann

  27. Comment by debbie T on November 24th, 2008

    Your page validates for me just fine