HTML div tag


Description:

The HTML div tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.

The difference between the div tag and the span tag is that the div tag is used with block-level elements whilst the span tag is used with inline elements.

HTML div elements acquire their potential when used together with Style Sheets, as they are very useful to assign a set of presentational attributes to entire blocks of content.

Another good use for it, and maybe the most important, is designing a document's layout. DIVs come to replace the old way of setting the layout of a document, that used tables to arrange the distribution of content. These table layouts mean a missuse of the HTML table element, which purpose is to represent tabular data.

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Differences Between HTML 4.01 and HTML5:

The align attribute not supported in HTML5.

The align attribute is deprecated in HTML 4.01.

Difference between HTML and XHTML:

The align attribute of <div> is deprecated in HTML as well as in XHTML.

Examples:

there are some examples of use of the HTML div element, assigning presentational properties to other inline and block level elements.

Note how the first DIV is floating to the right of the content. This feature is very helpful when designing a page's layout.

Code View
<div style="float: right;">Monday, 14th February 2011</div>
<div style="font-size: 2em;">HTML <em>div</em> element.</div>
<div style="color: green;">
<p>This element is very useful when designing tableless layouts.</p>
<p>Don't forget to check its reference on Mytoptutorials.com.</p>
</div>
Monday, 14th February 2011
HTML div element.

This element is very useful when designing tableless layouts.

Don't forget to check its reference on Mytoptutorials.com.

 

 

HTML – Div inside of Div:

Placing <div> elements inside of other <div> elements allows these elements to be further subdivided.

HTML Div Subdivision:

Code
<div title="Example Div Element" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
  <div title="Subdivision Div Element" style="color: #FF0000; border: 1px dotted black;">
    <h5>Section 1</h5>
    <p>This paragraph would be your content paragraph…</p>
    <p>Here's another content article right here.</p>
  </div>
  <br />
  <div title="Subdivision Div Element" style="color: #FF00FF;border: 1px dashed black;">
    <h5>Section 2</h5>
    <p>This paragraph would be your content paragraph…</p>
    <p>Here's another content article right here.</p>
  </div>
</div>

 

View
Section 1

This paragraph would be your content paragraph…

Here's another content article right here.

 

 

 

Section 2

This paragraph would be your content paragraph…

Here's another content article right here.

 

 

 

 

This concept is the foundation of which most web pages are now built. HTML documents that are properly divided and subdivided are easy to maintain and modify.

Attributes:

Attribute Value Description
align left
right
center
justify
Deprecated Defines alignment of the content enclosed in div tag.

Standard Attributes:

Attribute Description
class Document wide identifier
dir Specifies the direction of the text
id Document wide identifier
title Specifies a title to associate with the element.
style Helps to include inline casecadubf style sheet.
lang Sets the language code.

Event Attributes:

Attribute Description
onclick Script runs when a mouse click
ondblclick Script runs when a mouse double-click
onmousedown Script runs when mouse button is pressed
onmouseup Script runs when mouse button is released
onmouseover Script runs when mouse pointer moves over an element
onmousemove Script runs when mouse pointer moves
onmouseout Script runs when mouse pointer moves out of an element
onkeypress Script runs when key is pressed and released
onkeydown Script runs when key is pressed
onkeyup Script runs when key is released
Responses are currently closed, but you can trackback from your own site.

Comments are closed.

Designed for Mytoptutorials.com