span and div tags

<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:
span
  • 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:
div
▲