HTML
HTML Div and Span tags
HTML tags are used in the creation of web pages. Div and Span tags are quite common in website pages. You can see them at lot of places in the web page code. It is important to know what these tags are to understand the web page content and the structure. They both are used to group related elements of web page.
The division tag is called div tag. It divides the content of the page into blocks. So, it is the block-level tag. The block-level element has width of entire page or parent container. The content can be text, headers, footers, images etc. It groups multiple html tags. The opening tag is represented as <div> and the closing tag is represented as </div>. The closing tag is required. The content after <div></div> will be in a new line.
Example:
<div id=”hdr”>
<h1>Header1</h1>
<h2>Header2</h2>
</div>
Span tag is inline and is used to change part of inline content. So it is an inline tag. An inline element only occupies the space of the content and does not occupy the entire page width as in div tag. Also it doesn’t create a new line. It can be used to group elements for style. Class or id attribute can be used with span tag to style using CSS or JavaScript.
Example:
<span style=”color:green”>span example</span>green color
The drawback of div and span tags is that the purpose of the content is not clear. In case of other tags, for example the <p> tag denotes that it is a paragraph, the <h1> tag denotes it is header with maximum size etc; but in case of div and span tags it is not conveyed what the content is.
The div and span tags should be used only where they are absolutely necessary. As both these tags are generic elements and do not convey the purpose of the content, it is better to use them where required.
<!DOCTYPE html>
<html>
<head>
<title>Div and Span</title>
<link rel=”stylesheet” type=”text/css” href=”css1.css”>
<style>#d1{color:blue}</style>
<style>.c1{color:green}</style>
<!–<style>.c1{color:green}</style>–>
</head>
<body>
<!–Div tag is used to group multiple html tags–>
<Div style=”border:3px solid Red”>This is Div Test.</Div>This is after Div
<div id=”d1″>
<h1>This is header1</h1>
<h2>This is header2</h2>
</div>
<div id=”d2″>
<h1>This is header3</h1>
<h2>This is header4</h2>
</div>
<div class=”c1″>
<h1>This is class1</h1>
<h2>This is class2</h2>
</div>
<div class=”c1″>
<h3>This is class3</h3>
<h4>This is class4</h4>
</div>
<!–span tag–>
<p>This is <span style=”border:3px solid;color:Red”>Span test.</span>This is after span</p><br>
<span class=”s1″>This is span class 1</span><br><br>
<span class=”s2″>This is span class 2</span>
</body>
</html>