What is Div tag or element?

Div is a Semantic container. Div element is used to create a structure and meaningful to the HTML element. Div elements are no specific meaning, such as the span elements. Using these objects relate to each other than are combined. It’s usually been used the other attributes such as id, class etc. CSS style rules are used to apply formatting in a div element.

What is div tag or element?
Div is the short form of the division. It is a block level element. You can use it as a flow element of the container. By default div element is displayed as a paragraph in the most browsers.

Syntax:
<body>
<div>HTML codes…………………….</div>
<div> More HTML codes…………..</div>
<div>Even more HTML codes…..</div>
</body>

Differences between HTML4.01 – HTML5

Attributes:
The align attribute does not support in HTML5.

Attribute Value Description
align left
right
center
justify
This value not supported in HTML5.
Specifies the alignment of the content inside a <div> element.

Global Attributes: The <div> tag also supports all the global attributes described in-HTML Attribute Reference.

Event Attributes: The <div> tag also supports the entire event attributes described in- HTML Events Reference.

Specific Attributes
The <div> tag also supports following additional attributes:

Attribute Value Description
autofocus autofocus Specifies

Browser support:
Internet Explorer      :           Yes
Mozilla Firefox           :            Yes
Google chrome         :           Yes
Safari                           :           Yes
Opera                          :           Yes

CSS Settings by Default:

Most of browsers will display the <div> element with the following default values:

<!DOCTYPE html>
<html>
<head><style>div {display: block;}</style></head>
<body>
A div element is displayed like this:
<div>This is some content in a div element.</div>
You should Change the default CSS settings to see the effect.
</body>
</html>

Compatibility Notes:

The <div> align attribute does not support in HTML5 instead of use CSS.

CSS syntax: <div style=”text-align: center”>

In our CSS tutorial you can find more details about the div element.

Syntax
<div align=”left|right|center|justify”>

Attribute Values:

Left                :                       Left-align content
Right              :                       Right-align content
Center            :                       Center-align content
Justify           :                       Stretches the lines so that each line has equal width like in newspapers and magazines.

Below is an example of the div element:
HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Div elements as Paragraphs</title>
</head>
<body>
<h4>Div Interview Questions</h4>
<div style=”background-color: lightblue; padding: 4px; font-style: italic; font-weight: bold;”>

Q: What is div tag?
</div>
<div style=”background-color: #fa8b2a; padding: 4px 4px 4px 18px;”>
A: Div is a Semantic container.</div>
<div style=”background-color: #FFFF00; padding:4px; font-style=”italic”, font-weight=”bold”>
Q: Is div elements can be nested?</div>
<div style=”background-color: #00FF00; padding: 4px 4px 4px 18px;”>
A: Yes, div elements can be nested?</div>
</div>
</body>
</html>

Now div_elements.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

Display in Browsers:

Div Interview Questions

Q: What is div tag?

A: Div is a Semantic container.
Q: Is div elements can be nested?
A: Yes, div elements can be nested?

Div element is used to change CSS Properties.

Div element is also called container which contains the content. Div elements are the best place to set CSS properties. How to set css properties in a div element is shown below.

Example: Type the following codes in Notepad.

HTML Code:

<!doctype html>
<html>
<head>
<title>Div elements with css properties</title>
</head>
<body>
<div>
<h2 align=”center”>XHTML Interview Quesitons</h2>
<div style=”background-color: lightblue; padding:4x; font-style: italic; font-weight:bold”>
Q:What is the number one advantage of using XHTML?
</div>
<div style=”background-color: #fa4b2a; padding: 4px 4px 4x 20px;”>
A.XHTML documents are well-formed XMl documents. This allows your documents to be processed by any XML applications.</div>
<div style=”background-color: yellow; padding:4x; font-style: italic; font-weight:bold”>
Q: What is most difficult part when converting a HTMl document into an XHTML document?</div>
<div style=”background-color: silver; padding: 4px 4px 4x 20px;”>
A: The most difficult part is to make all elements are closed. XML documents requires that all elements must be closed with closing tag or with the extra “/” at the end of the opening tag.</div>
<body>
</html>

Now CSS settings.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

Display in Browsers:

Div elements with css propertiesXHTML Interview Quesitons

Q:What is the number one advantage of using XHTML?
A.XHTML documents are well-formed XMl documents. This allows your documents to be processed by any XML applications.
Q: What is most difficult part when converting a HTMl document into an XHTML document?
A: The most difficult part is to make all elements are closed. XML documents requires that all elements must be closed with closing tag or with the extra “/” at the end of the opening tag.

 

Is div element can be floated?

If you want to float the div block, then you can use the float CSS property. Here is an example of floating div element.

Example: Type the following codes in Notepad.

HTML Code:

<!doctype html>
<html>
<head>
<title>Floated Div elements</title>
</head>
<body>
<h4>XHTML Interview Quesitons</h4>
<div style=”background-color: silver; width: 550px; height: 210px; padding: 12px”>
<div style=”float:left; width:240px”>
<div style=”background-color: #eeeeee; padding: 4px; font-style: italic; font-weight:bold”>
Q:What is the number one advantage of using XHTML?
</div>
<div style=”background-color: #fa4b2a; padding: 4px 4px 4x 20px;”>
A.XHTML documents are well-formed XMl documents. This allows your documents to be processed by any XML applications.</div>
</div>
<div style=”float:right; width:300px”>
<div style=”background-color: #eeeeee; padding: 4px; font-style:italic; font-weight:bold”>
Q: What is most difficult part when converting a HTMl document into an XHTML document?</div>
<div style=”background-color: #ffeeff; padding: 4px 4px 4x 20px;”>
A: The most difficult part is to make all elements are closed. XML documents requires that all elements must be closed with closing tag or with the extra “/” at the end of the opening tag.</div>
</div>
</div>
</body>
</html>

Now floated_div.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

Display in Browsers:
<!doctype html>

Floated Div elements

XHTML Interview Quesitons

Q:What is the number one advantage of using XHTML?
A.XHTML documents are well-formed XMl documents. This allows your documents to be processed by any XML applications.
Q: What is most difficult part when converting a HTMl document into an XHTML document?
A: The most difficult part is to make all elements are closed. XML documents requires that all elements must be closed with closing tag or with the extra “/” at the end of the opening tag.

 

Is div elements can be Nested?

Yes, Mainly div elements in different levels of CSS to determine CSS properties exhibits more flexibility. Here is an example of Nested element.

HTML Code:

<!doctype html>
<html>
<head>
<title>Nested Div elements</title>
</head>
<body>
<h4>XHTML Interview Quesitons</h4>
<div style=”background-color: silver; width: 400px; padding: 12px”>
<div style=”background-color: #eeeeee; padding: 4px; font-style: italic; font-weight:bold”>
Q:What is the number one advantage of using XHTML?
</div>
<div style=”background-color: #fa4b2a; padding: 4px 4px 4x 20px;”>
A.XHTML documents are well-formed XMl documents. This allows your documents to be processed by any XML applications.</div>
<div style=”background-color: #eeeeee; padding: 4px; font-style:italic; font-weight:bold”>
Q: What is most difficult part when converting a HTMl document into an XHTML document?</div>
<div style=”background-color: #ffeeff; padding: 4px 4px 4x 20px;”>
A: The most difficult part is to make all elements are closed. XML documents requires that all elements must be closed with closing tag or with the extra “/” at the end of the opening tag.</div>
</div>
</div>
</body>
</html>

Now nested_div.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below

Display in Browsers:

XHTML Interview Quesitons

Q:What is the number one advantage of using XHTML?
A.XHTML documents are well-formed XMl documents. This allows your documents to be processed by any XML applications.
Q: What is most difficult part when converting a HTMl document into an XHTML document?
A: The most difficult part is to make all elements are closed. XML documents requires that all elements must be closed with closing tag or with the extra “/” at the end of the opening tag.

 

Div style and color:

Div element using the style attributes by using color, background color rules from the CSS Properties can be applied content color and background color in div element.

Example: Type the following codes in Notepad.

HTML Code:

<!doctype html>
<html>
<body>
<div style=”opacity: 0.5; position: absolute; left:50px; width:300px; height:150px; background-color:#40B3DF;”></div>
<div style=”font-family:verdana; padding:20px;  width:300px; border-radius:10px; border:10px solid #EE872A;”>
<div style=”opacity: 0.3; position: absolute; left:120px; width:100px; height:140px; background-color:#8AC007;”></div>
<h3>Look style and colors</h3>
<div style=”letter-spacing:12px;”>Manipulate Text</div>
<div style=”color:#40B3DF;”>Colors<span style=”background-color:#B4009E; color:#ffffff;”>Boxes</span></div>
<div style=”color:#000000;”>and more….</div>
</div>
</body>
</html>

Now div_color.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

Display in Browsers:

Look style and colors

Manipulate Text
ColorsBoxes
and more….

 

Leave a Reply

Your email address will not be published. Required fields are marked *