Writing JavaScript-Friendly HTML

Because you'll be using JavaScript to manipulate the objects within a document, you want to write your HTML in a way that can be easily used by your scripts. That basically means writing modern, standards-compliant XHTML and using CSS to separate the document's structure from its presentation.

When we say modern XHTML, we don't just mean documents that pass W3C validation using the Web tool at validator.w3.org. We also recommend thinking ahead to what you are likely to do with a page and adding appropriate tags and attributes that will make it easy to access objects with JavaScript. What sort of markup, you wonder? Glad you asked.

Structure, presentation, and behavior

CSS (Cascading Style Sheets) is a standard layout language for the Web that controls typography, colors, and the size and placement of elements and images. Your XHTML documents should have external style sheets defining the styles used within the document. Your JavaScript should also be in an external document, one that contains only JavaScript code.

When split up this way, your sites will contain three types of text files:

• XHTML: contains the content and structure of the page

• CSS: controls the appearance and presentation of the page

• JavaScript: controls the behavior of the page

When you do this, it becomes straightforward to make changes to your siteeven changes with site-wide effects.

Divs and spans

If you're used to the classic style of HTML, where you threw everything into tables and played with spacer GIFs until it all fell into more-or-less the layout you wanted, some of this will be new to youso here's a quick overview to bring you up to date.

XHTML contains two tags that are just starting to get the attention they deserve: <div> and <span>. They're used to break up your content into semantic chunks, that is, chunks that have a similar meaning. Things inside a single table cell or paragraph may or may not have anything in common, but the content within each <div> and <span> should.

Why use one over the other? A <div> is a block-level element, that is, there's a physical break between it and the elements above and below it. A <span> isn't block-level; instead, it's inline, so you can apply it to, for instance, a single phrase within a sentence.

We're not saying that you need to junk everything you've ever learned about HTMLfar from it! But add these two tags to your toolkit of solutions, and you'll be surprised how often you use them.

Classes and ids

Inside your XHTML document, you'll mark up your content by breaking it down into those meaningful chunks. From there, you'll still need to identify those pieces of content where you want to change their presentation or behavior. For that, you'll primarily use two attributes: class and id. These attributes can be used by both CSS and JavaScript; a CSS style sheet uses those attributes as part of rules to define the appearance of a page, and the JavaScript file can use those attributes in code that affects the behavior of elements on the page.

• A class identifies an element that you may want to use more than once. For example, let's say that you're doing a page for a movie theater. You can define a class for the movie titles, specifying that the titles should be 14 pixel, bold, and dark blue.

  .movieTitle {
    font: bold 14px;
    color: #000099;
  }
  

  You should then wrap each movie title on your page with a tag specifying the class of the title style, like so:

  [View full width]
  <p>We're currently showing <span class="movieTitle"> The Aviator</span> and <span 
  class="movieTitle"> The Outlaw</span>.</p>
  

• An id identifies an element that is unique to that document. For example, if you only use the name of the movie theater once on your page, you can create a style rule using an id to define how the theater's name will look, like this:

  #theaterName {
    font: bold 28px;
    color: #FF0000;
  }
  

  Then, when it's time to show the name of the theater, all you do is add that id attribute to the tag to get the effect:

  <h1 id="theaterName">The Raven Theater Presents:</h1>
  

  What goes for CSS in the above examples also applies to JavaScript. Once we've assigned classes and ids to our divs and spans (and to any other elements as well), we can then modify those elements: not just their appearance with CSS, but also their behavior with JavaScript. And that's a topic that will take up the rest of this book.