HTML: Div Tag

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2013 All Rights Reserved Total Application Works


    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Div.html">
    DIV Tag </a>
    </table>
    </body>
    </html>


Introduction

The purpose of this tutorial is to show you how to write a HTML page using the DIV tag. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. In the following example, we will show you the code for our page examples that use the DIV tag. The <div> tag defines a division or a block/section in an HTML document. This tutorial assumes you have read the tutorial on Style . Figure 1 shows the optional attributes that can be used with the DIV tag. We will be using the inline style in the examples we display in this tutorial.

Attribute Value Description
align left
right
center
justify
Deprecated. Use styles instead.
Specifies the alignment of the content inside a div element
Figure 1: DIV tag: Optional Attributes


In the following Figure 2, we show the <DIV> tag and its attributes:

Attribute Value Description
class classname Specifies a classname for an element
dir rtl
ltr
Specifies the text direction for the content in an element
id id Specifies a unique id for an element
lang language_code Specifies a language code for the content in an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents
Figure 2: DIV tag: Standard Attributes

Div Element(s)

The <div> tag is a container that is used to place other tags. The <div> tag element is used to group other tags together. Use only the attributes listed in Figure 2 with your div element; anything else should be reserved for CSS.

In Figure 3 below, we have included the style attribute in order to color our div tag. The purpose for this is to bring a stronger emphasis for our readers.

Code Displayed in your browser
 
<body VLINK=white>

<div style="background: lightblue; 
         foreground: white">
<h5>Link to my page</h5>
<a target="_blank"href=
  "http://www.sumtotalz.com
/TotalAppsWorks/
ProgrammingResource.html">
"Total Application Works"</a>


</div>


</body>
Link to my page
Total Application Works
Figure 3: DIV tag: Background color


In the above Figure 3:
  • <body> - is the start of a container that holds the page content.
  • <div> - this element is used to block a section of text
    • style - specifies an inline style for an element
    • background - in this case, it is used to designate the background color
    • foreground - in this case, it is used to designate the color of the font
  • <h5> - start of a level 5 header
  • </h5> - end of a level 5 header
  • <a> - start of a link to other documents
    • target= - indicates where a resource will be displayed
    • _blank - opens the new document in a new window
    • href= - specifies the destination of a link
  • </a> - specifies the end of a link to other documents
  • </div> - specifies the end of a <div> block of text
  • </body> - indicates the end of the page content

Div element using style tag with border attribute

Code Displayed in your browser
 
<div STYLE="border: solid; border-width: 
       thin; border-color: blue ;">
 This is a good day...
</div>
 
 
This is a good day...
Figure 4: DIV tag: Style border color


In figure 4, the following elements and their attributes were used:

Element/Attribute Description
<div> this element is used to block a section of text
style Specifies an inline style for an element
border Is used to set the properties to draw around the object.
solid Specifies that the border is a solid line.
border-width Is used to set the width of the borderWidth property.
border-color Is used to set the color of the border.
</div> Specifies the end of the <DIV> definition.
Figure 5:

Other <Div> Resources

Below is a list of other <DIV> examples.

  1. The DIV II tutorial shows how create a horizontal and a vertical navigation menu.
  2. The DIV III tutorial shows how create a scroll bar.
  3. The DIV IV tutorial shows how use the ID attribute.
  4. The DIV V tutorial shows how use the CLASS attribute.
  5. The DIV VI tutorial shows you how to write a HTML page using the DIV tag, with the STYLE and CLASS attribute
  6. The DIV VII tutorial shows you how to write a HTML page using the DIV tag, with the STYLE and ALIGN attribute










HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works