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
<table> tag was abandoned in favor of the
<div> tag for coding HTML website templates.
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
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:
<div style="color:#000000">Black text in here!</div>
CSS class "boldtext" will be applied in the contents of this div
Content inside this div can be addressed with this unique id named "main-wrapper"
Like most other html elements, the
div element is written with a start (
<div>) and an end tag (
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> 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:
<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>
Why not use the good old
<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
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
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
- 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).
<table>s can quickly lead to gummed up website layouts and increased download times.
- 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):
- (coming soon!) Simple fixed-width centered 2 column CSS layout
- (coming soon!) Simple fixed-width centered 3 column CSS layout
- Even more on the way...
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: