HTML DIV Tutorial – Learning the basics of HTML
HTML Div Tutorial
HTML DIV TUTORIAL - INTRO
The definition of the HTML
<div> tag is that it divides the HTML document into sections. The following
tutorial will explain why the <div> tag is important and how it should be used.
Proper usage of the <div> tag is fundamental to good HTML coding; the <div> tag
is one of most powerful tools available to a Web developer.
The key to understanding the
<div> tag is that it does not carry any semantic meaning. To give you a
contrasting example, the <p> tag is used to specify paragraphs of text. As
another example there is the <strong> tag, which is used to provide emphasis.
Although both of those tags can be used to modify the layout of a HTML document,
part of their purpose is to give meaning to different elements on the page. The
<div> tag, and its cousin, the <span> tag, do not, on their own, give any
meaning to their content. The usefulness of this quality will become apparent as
you read on through this tutorial.
HTML DIV TUTORIAL - CSS
One of the most popular uses of
<div> is to use it in combination with Cascading Style Sheets (CSS). CSS is a
means of specifying the layout and style of different elements on the web-page.
CSS can be used to specify just about any aspect of layout you could think of.
Font size, font color, background color, borders, margins and text alignment are
some of the things you can change with CSS.
The HTML <div> tag allows you
to specify the areas of your document you wish to control with CSS. You may have
four paragraphs that you want to center on the screen. What you might do is put
them all within a pair of <div> tags and use CSS to make the content of those
tags centered.
As the name suggests, use your
<div> tags to divide your page up into different layout sections. Once you have
done this, use CSS to specify the layout for those sections. Thus by combining
the HTML <div> tag with CSS, you can build an unlimited variety of page layouts.
HTML DIV TUTORIAL -
SEMANTICS
Another purpose of the <div>
tag is to implement Web semantics. When people talk about Web semantics, or the
semantic Web, they are talking about labelling the different elements of a web
page so that a machine would be able to interpret the meaning behind them.
As mentioned in the beginning
of this tutorial, the <p> tag can be used to signify a paragraph. So a machine
reading a HTML page would know that the text inside the <p> tags represents a
paragraph. What if you wanted to mark a more specific piece of information, like
say a phone number? Unfortunately there is no <phone> tag, but this is where
<div>, which has no prescribed semantic meaning, comes into play.
To explain, any <div> tag may
carry an id or class attribute. Thus you might write, <div class="phone"> or
<div id="mary_phone">. In this way, very specific semantic information can be
embedded into your HTML document.
HTML DIV TUTORIAL -
SCRIPTING
Another extremely important use
for HTML <div> tags is to implement client-side scripting. Client-side scripting
can be used to create animated buttons, scrolling text, drop down boxes, and
many other engaging functionalities for your web-page. Typically when we talk
about client-side scripting, we are talking about JavaScript.
Now, say you would like
something interesting to happen when the user moves the mouse over a certain
graphic on the page. You would like some piece of text to change depending on
the graphic that the mouse has moved over. This is possible in JavaScript, but
the JavaScript must be able to 'target' the piece of text somehow.
What can be done is the area
where the text is to be changed can be contained within a <div> tag. The <div>
tag is given an id, say, for example, <div id="text_target">. Now the JavaScript
is will be able to take control of the text in that area of the page, by looking
for a <div> tag with an id of "text_target".
So you see, proper <div> tag
usage is essential for any JavaScript programmer.
DIV vs SPAN
Now, one last piece of
information before I conclude this tutorial -- when to use a <span> tag and when
to use a <div> tag.
What you should know is that
<div> tags are block level elements that are used to divide up whole sections of
HTML. The <span> tag, however, are in-line level elements, they only span across
small amounts of content, typically words or phrases. For instance, a <span> tag
might be used to make a word red in color, or to give it an underline. The
crucial thing to remember is that a <span> tag can only contain other in-line
elements, while a <div> tag can contain both in-line and block elements. Because
of this, a <span> tag cannot contain images, tables or forms. However <span> is
still used for the three purposes described above: to style with CSS, to give
semantic meaning to web-page content, and to target web-page content with
JavaScript. Practice all three of these purposes with both <div> and <span> and
one day you will become a HTML master.
Thank you to Alex Hutton for this "HTML DIV Tutorial" article.
|
