<span> tag
- The span is similar to the div tag. Both of them divide the content into individual sections.
- The difference is that span goes into a refined level so that by using span a single character is formatted if required.
- It is used for text-level element and not for a block-level element.
- There is no line feed after the </span> tag.
- It is used as a selector in style sheet and it includes STYLE class and ID as its attribute.
- It is a CSS element and used purely to apply style.
- It has no effect when style sheet is disabled.
Example: Demonstration of span tag
<html>
<head>
<style type="text/css">
.typ1 A:link{text-decoration:none}
.typ1 A:visited{text-decoration:none; color: red}
.typ1 A:hover{text-decoration:underline; color:green}
.typ1 A:active{text-decoration:none; color:purple}
.typ2 A:link{text-decoration: overline}
.typ2 A:visited{text-decoration:overline; color: red}
.typ2 A:hover{text-decoration:underline; color:green}
.typ2 A:active{text-decoration:overline; color:purple}
</style>
</head>
<body>
<b> LINK AREA 1</b><br>
<span class="typ1">
<a href="color.html">welcome</a><br>
<a href="textcolor.html">login</a>
</span>
<br><br><b> LINK AREA 2</b><br>
<span class="typ2">
<a href="color.html">welcome</a><br>
<a href="textcolor.html">login</a>
</span>
</body>
</html>
Output:
- Here, <span> tag allowed the use of different link styles on the same page.
- It allows to define the separate area for certain link style.
- These link styles are working for all links within that area.
- There is no need to give separate style definition to each and every link in that area.
<div> element
- It divides the content into individual sections.
- <div> may contain paragraphs, headings, tables and other division also.
- Each section can have its own formatting.
- It is a block-level element which means that there can be a line feed after the</div>tag.
- The <div> elements useful for marking large section of a document.
Example: Demonstration of div tag
<html>
<head>
<style type="text/css">
.emb{border: double; font-variant:small-caps; border-color: green;color:red; width:250px;}
</style>
</head>
<body>
<h2>Example of div element</h2>
<div class="emb">The div is a block level element</div>
</body>
</html>
Output:
