<div> tag is one of
several important tags the developer places in every HTML document.
<div> tag sits inside the
<body> element, so it is
visible to the user.
Its primary purpose is to create a block or section within a document that can be styled and manipulated in its own way once named.
<div> section can contain
<div> elements, so some
refer to it as a container element.
Once blocks are placed in containers the complexity of styling takes on greater importance because styles of child elements inherit styles from their parent. That's where the term Cascading Style Sheets, or CSS, comes from.
This is the very reason beginners struggle when reading other people's
HTML code, because it's often filled with containers using multiple
<div> tag for HTML5 is a
two-part tag so it must be closed with the
There are typically many
tags within a document and to facilitate customized settings for each
individual element we should address styling first.
<div> tag is what is called
a block-level tag, as opposed to an inline tag. Block tags occupy their
own line vertically, so you can think of them including a carriage
return and sitting on their own line. An example is the
<h5> tag that contains the text
"Block versus inline tags" in this section's heading. See how it
occupies its own line?
An example of an inline tag is the
<strong> tag which will make text
bold, within the line, and without starting a new line.
There are three places code for styling can sit and below we see examples of all three.
|In the element itself||As an attribute to the element.||Low||Applies to that one element only.||To reuse you must repeat it in every element.|
|In the head||In
||Low||Style can be shared on the page. You only need to code it once for the HTML document.||Style specifications can be long which adds clutter. Cannot be shared with other documents.|
|In a separate CSS document||A CSS document (.css extension) linked with a
||High||The style document can be shared across multiple pages.||Developer must maintain multiple files.|
For an example of the third and most common styling approach, assume
gray-background has been
created in a linked stylesheet called
styles.css. The HTML code below would
create a block with a gray background color.
Technically, styling can be coded using all three methods, but the first two are generally frowned upon. In most cases styling should be coded in a separate CSS stylesheet, like this example illustrates.
As with all tags, global attributes can always be set, but no other attributes are required.
Each user-agent (browser) has its own stylesheet per se. This dictates
how that browser styles each element by default. The Chrome browser
<div> element using
the following specifications.
The default font is Times New Roman.
The following code will set up a document with internal styling within
Here we have an example of the second approach. Since it is common to
see styling code stretch across hundreds of lines, except for the most
simple HTML documents it is uncommon to see styling with the
<style> tag like here.
The following code illustrates how you might code styling as an
attribute to the
Again, in a one-off case, when you want to add style to one element alone, this approach is available, but is uncommon.
To illustrate how the
is a block-level tag, we first incorrectly try to color text red inline.
Second we show how a block's background color can be colored. Here for
convenience, we code the style within the
If you type or copy this into a text file and view it through a
browser, you will notice two points. First, because the
<div> tag is a block-level
element, it adds carriage returns around the red text where you might
not expect them.
Second, note how the gray shading takes up the whole width of the available space, or the whole block.
Our goal here wasn't to cover all aspects of styling, but some
knowledge is required to understand the purpose and use of the
<div> tag is a child to
and parent of other important HTML elements.
Have you seen our YouTube Channel yet? Subscribe here and see if the videos help you learn faster.
br /tag for line breaks, click Back.
h1tags work, click Next.