9.2. The Span Element

Preferences - Do not show ads

The <span> element is used in the same way as the <div> element. The difference is that the <div> element is used to enclose one or more block elements (e.g. <p>, <h1> to <h6>, <table>, etc) while the <span> element is used to enclose a section (e.g. some text) in a block element.

The usage of the <span> tag is illustrated in the following two XHTML MP/WAP CSS examples. Both XHTML MP/WAP CSS examples give the same result in mobile phone browsers. The first example and the second example demonstrate the use of the <span> tag with the class attribute and the style attribute respectively.


(spanEg1.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      .wcss_class {
        color: blue
      }
    </style>
    <title>WCSS Tutorial</title>
  </head>

  <body>
      <h1><span class="wcss_class">Table of Contents</span></h1>
      <hr/>
      <p>
        <span class="wcss_class">WCSS Tutorial</span> Chapter 1<br/>
        <span class="wcss_class">WCSS Tutorial</span> Chapter 2<br/>
        <span class="wcss_class">WCSS Tutorial</span> Chapter 3<br/>
      </p>
  </body>
</html>


(spanEg2.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WCSS Tutorial</title>
  </head>

  <body>
      <h1><span style="color: blue">Table of Contents</span></h1>
      <hr/>
      <p>
        <span style="color: blue">WCSS Tutorial</span> Chapter 1<br/>
        <span style="color: blue">WCSS Tutorial</span> Chapter 2<br/>
        <span style="color: blue">WCSS Tutorial</span> Chapter 3<br/>
      </p>
  </body>
</html>


In the above two examples, the WCSS style rule "color: blue" is applied to the text enclosed in the <span></span> tags. The text outside <span></span> tags remains in its default color, that is black. The screenshots of the examples in mobile phone browsers are shown here:






Sony Ericsson T610





Nokia Mobile Browser 4.0


Previous Page Page 12 of 39 Next Page

Contents at a Glance (Click Here for Full Table of Contents)
Print this Web Page | | Back to Top

Feedback Form (Expand)

What do you think about this web page?






 WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page