The <div> html tag
Overview
In simple terms the <div> HTML tag stands for division. It is one of the most widely used tags in HTML today. With the use of CSS it allows virtually any design to be created. Prior to the <div> tag, layout was created using the <table> tag. Div based layouts are considered to be better than table based layouts due to a number of factors including accessibility and SEO. As mentioned CSS allows this tag to create virtually any layout, but due to differences between how internet browsers support CSS, a consistant result can be harder to acheive.When text is put between the opening and closing <div> tag it is displayed as a Division.
Basic Usage
<div>Some div text in here</div>
Any text between the opening and closing tag will be displayed as a Division.
Advance Usage
It is possible to style and add functionality to the <div> tag, this is done by adding an attribute to after the p in the opening <div> tag
Attributes allowed for the <div>tag include :-class, dir, id, lang, style and title.
In most cases class and id are used and its basic usage is shown below
<div id=”header”>Some div text</div>
With all attributes there is a space after the initial p then the attribute name, then an equal’s sign and the identifier of the attribute in double quotes.
Both id and class attributes refer to CSS styling of the element and is either stored in the <head> of the webpage on in an external file.
With id this usually refers to a single instance on a page where as class usually refers to a repeating element on a page, it is for this reason for the <div> tag may use either the id or class as an atribute.
The attribute style allows you to include css style information for a single <div> tag.
The dir attribute allows for left reading and right reading text, lang allows you to specify a language for the tag and title allows you to include extra information for a tag.
It is possible to attach scripts to tags, as well adding functionality to a webpage, these scripts tend to be written in Javascript and therefore outside the scope of this document
Examples
<div>Some div text</div> – basic usage example.
<div id=”header>Some div text</div> – Division which is styled by the id header.
<div class=”headerclass”> Some div text </div> – Division which is styled by the class headerclass.
<div id =”header” class=”headerclass”> Some div text </div> – Division which is styled by the class headerclass and the id header.
<div style="color:#F00">Some div text</div> – Division which has a custom colour of red.
<div dir="rtl">Some div text</div> – Division where the text reads from right to left.
<div lang="uk">Some div text</div> – Division where the language has been tagged as UK.
<div title="ptitle">Some div text</div> – Division where the tag has been titled ptitle.
Final Thoughts
Touching on just the surface of the <div> HTML tag it is easy to see how versatile it is. To take full advantage of it an understanding of CSS is an advantage.