The html DIV tag: everything you need to know

This tutorial will explain everything you need to know about the <div> tag, including what it is, how it's used, and why the <table> tag was abandoned in favor of the <div> tag for coding HTML website templates.

Create your website now

A little history

Even though plain HTML has been used to craft visually stunning web pages from the beginning of web history, this was not its designated purpose. HTML was created to define the structure of text in webpages; it was never intended for use as a language of design. This was the purpose of CSS. Nonetheless, various HTML elements are still constantly used for design purposes.

So what exactly is the html <DIV> tag?

To put it plainly, the <div> tag defines a division within an HTML document. In fact, the term div is short for division. It is most commonly used in conjunction with CSS to format areas (divisions) of webpages. The <div> tag supports all of the HTML global attributes, and the attributes you will likely see used with it the most are style, class, and id. The respective examples are:

  1. <div style="color:#000000">Black text in here!</div>
  1. <div class="boldtext">
  2. CSS class "boldtext" will be applied in the contents of this div
  3. </div>
  1. <div id="main-wrapper">
  2. Content inside this div can be addressed with this unique id named "main-wrapper"
  3. </div>

Like most other html elements, the div element is written with a start (<div>) and an end tag (</div>), with the end tag containing a slash after its opening bracket.

It is a blocklevel element, which means it includes a line break above and below itself. As such, it is perfect for use when a blank line space is needed to separate the division content from the preceding and succeeding content or elements.

Common use of <DIV> tags

The <div> tag is a very common part of HTML and XHTML markup. Its most common use is for grouping elements together and then applying stylistic formatting to the entire element block by using CSS styles. For example, content contained within the following <div> would all be formatted according to the CSS class called "tab-panel", which in this imaginary case would format the text with blue font color and a grey background:

  1. <style type="text/css">
  2. .tab-panel {
  3. {
  4. color:blue;
  5. background-color:gray;
  6. }
  7. </style>
  8. <div class="tab-panel">
  9. <p>This is the tab panel content. It would consist of blue text with a grey background, since that's how the class "tab-panel" is defined in the style sheet.</p>
  10. </div>

Why not use the good old <TABLE> tag?

The <table> tag is useful for displaying information in... tables, and even though it should only be used for organizing tabular data, it has been used excessively for years in web pages to handle page layout. Countless web sites have page sections (columns, headers, footers, etc) positioned with <table>s.

While visually this is not a problem, semantically it is, and it causes web accessibility issues. The purpose of the <table> element is for displaying data in a tabular format, not for creating sections and positioning them on the page. CSS enables web developers to achieve the same layout appearance and functionality (and even more, like positioning an element over another one, something that cannot be achieved with <table>s), without misusing the <table> element.

One final detail concerning the use of <table>s in web templates, the HTML4 specifications did not consider its use valid (and even though it is valid in HTML5, the specs still recommend against the practice).

Pros and cons of coding the template layout using CSS styling with <DIV>s vs. to using <TABLE>s:

Pros:

  • Ability to control the layout of an entire website with just a few CSS files (or even one!).
  • Ease of implementing global changes to the website (changes in one CSS style immediately reflect on all pages that use it, which can be VERY useful when you have to change thousands of html pages).
  • Lack of excessive and redundant inline styling, resulting in smaller HTML pages.
  • Easier to read and understand by search engines (and even by humans, as the content "flows" in a more natural way).
  • Using <table>s can quickly lead to gummed up website layouts and increased download times.

Cons:

  • Cross-browser incompatibility - not all browsers do provide identical interpretation of CSS rules.
  • Problems with legacy browsers - some may not understand CSS at all or even support the same styles or CSS versions.
  • Learning curve - it takes time to learn anything new and requires effort to abandon the old habits.
  • Tables are "easier" (and probably faster) to code.

Now what? How do I code my website template only with DIVs and CSS?

"Tableless" templates have become a standard for several years now, with HTML handing web page structure and CSS handling appearance, style and positioning. So you don't have to reinvent the wheel every time!

Here are the most commonly asked templates designs and how they are coded (as simple as possible) with <div>s and CSS (please note that this site will constantly be updated with new material, so please check back often for new additions):

Do you want to build a powerful HTML website now?

Start building your own stunning website - programming free!

Wix.com provides a free, easy-to-use online platform that lets you create and publish your own unique website. Its powerful editing tools and customizable website designs make building a beautiful website easy.

You can even add eCommerce features and connect to YOUR domain (e.g. www.yourdomain.com).

Over 30 million users have created their website with Wix.

Choose out of more than a 100 designs and create your website now!

Create your website now

Contact us

Please don't hesitate to contact us if you have corrections or have spotted errors or omissions in this tutorial (and please check back often for improvements and additions).

If you have found this tutorial useful please share it on social media or link to it on your personal site/blog: