Home Html Html Code for Grouping Content - Use of div and span element
A+ A-

Html Code for Grouping Content - Use of div and span element

Grouping Content  - Html Tutorial :

The <div> and <span> elements help you to group with each other number of elements to make segments or subsegments of a webpage.

Div Element - Grouping Content - Html Tutorial :

For illustration, you might possibly prefer to place all of the footnotes on a webpage inside a<div> element to specify that all of the elements inside that<div> element associate to the footnotes. You might possibly then add a style to this<div> element so that they show up implementing a specific set of style rules.

Example :

<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

This will certainly generate the following outcome:

Content Articles
Actual content goes here.....

 Span Element - Grouping Content - Html Tutorial :

The <span> element, conversely may be used to group inline elements only. Hence, if you have a portion of a sentence or paragraph which you would like to group with each other, you may use the element as follows .

Example :

<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

This will certainly generate the following outcome:

This is the example of span tag and the div tag alongwith CSS
These tags are typically combined with CSS to let you affix a style to a segment of a page.

The

and elements help you to group with each other number of elements to make segments or subsegments of a webpage.