In addition, a strong DOM provides you with numerous attributes and elements that you can make use of to style the content to your hearts desire. This gives you much more power and control with your CSS, and helps to greatly decrease your usage of extraneous divs and classes

A very quick way to improve your markup skills, and therefore the value of your content, is to expand your knowledge of HTML elements, and start making use of a few you might not have been aware of.

and

The fieldset element is used to group related controls and labels within a form. They are a great way to help make your form easier to understand, and more accessible for speech-navigated user agents.

It should be used in conjunction with the legend element to provide an even richer and more usable experience. The legend element basically defines a caption for the fieldset. Here’s an example of how you could use these elements in your markup:

3. Team Captain
4. Name
7. Player #2
8. Name

An often forgot element that you can start using immediately in your text is the q element. The q element is very similar to the blockquote element, but should be used in a different context. The blockquote element is meant to be used for longer, block-level quotes. The q element, on the other hand should be used for short quotes.

All major browsers, other than IE6 and IE7, will automatically insert quotation marks around the content within the q element, according to the HTML spec. There’s a few ways to work around this, but my favorite solution is the one proposed by Stacy Cordoni in an A List Apart article from 2006. Her solution is to remove the quotes from around the q element using the :before and :after pseudo-classes to even the playing field. Then, with each of the major browsers not rendering quotes, you can insert them directly into your markup, ensuring that all browsers render your quote the same.

• “Remember that drover, the one I shot in the mouth so’s the teeth come out the back of his head?“, asked Munny.

The cite element is used to identify a reference or citation to another source, like a book or another website. By default, each of the major browsers render the cite element in italics. Making use of our q element example, adding the cite element would give us something like this:

• “Remember that drover, the one I shot in the mouth so’s the teeth come out the back of his head?“, asked Munny.

The dfn element is used to markup the defining instance of a word or phrase. It’s important to note that it is not intended to markup the actual definition itself, but instead the word or phrase being defined. Most major browsers will render the content within the dfn element in italics, though of course you can alter that as you wish with CSS.

• The dfn element is used to markup the defining instance of a word or phrase.

and

Here’s one for anyone who writes any sort of articles online. You can use the ins and del elements to identify content that has been either inserted or deleted since the content’s publication. The ins element, by default, is underlined, and the del element, by default, is striked through.

• SXSW’s parties are a great time to booze it up with mingle with fellow developers.

The address element is slightly misleading. One would think you would use it to mark up a physical address, but that’s not necessarily the case. The address element is actually intended to contain the contact point for the document containing it. While this certainly could contain a physical address, it doesn’t have to. It could house any sort of contact information provided that it is contact information for the author and/or owner of the document in question.

For example, I could use the address element to provide my contact information since I am the owner of this article, like so:

• tim@timkadlec.com

By default, the address element is rendered in italics in each of the major browsers.

See For Yourself

If you’re interested, I put up a page with examples of each of the elements above. I did not apply any CSS, so you can see how each element is rendered by default in different browsers.

A Quick Look at Attributes

We’ve already seen how to set up the canvas element in HTML:

You’ve probably noticed that we’ve included an id attribute on our canvas element to make it easier for us to access the element in our Javascript. You can also apply other standard attributes like class, title or tabindex. Two other attributes, height and width, will also be used fairly regularly.

You can define the height and width as attributes in the canvas element, or you can use CSS to define the dimensions of your element. If you use CSS, however, your canvas will scale to meet the dimensions you define instead of simply resizing the area. Neither height nor width are necessary, however. If you choose to not define the size of the canvas element, then it defaults to a size of 300 pixels wide by 150 pixels high.

Roll Up Your Sleeves…

All of this so far has been pretty easy…but also boring. The canvas element’s real power, of course, is the ability to use Javascript to manipulate it. To do so, we have to get a rendering context using the getContext() function. The rendering context is what allows us to actually manipulate the content in the canvas element. The function is straight forward and easy to use:

1. var canvas = document.getElementById(‘canvas’);
2. var context = canvas.getContext(’2d’);

Currently, “2d” is the only defined context that we can obtain. In the future, it is not unreasonable to expect to see that expand and include support for a three dimensional drawing context. Of course in a real-world setting you’ll want to check to make sure the browser supports the getContext method in the first place. The canvas element is still relatively new and there will be a fair amount of browsers that will not support it.

The One and Only

Now that we have a rendering context, let’s make use of it by starting to draw something to the canvas. The canvas element only natively supports one shape and that is the rectangle. Don’t panic….you’ll see later that there are plenty of methods available for us to create everything from a basic circle to very complex abstract shapes.

For now though, we’ll keep it simple and just make a rectangle. We have three functions that are available to use for this: fillRect(), strokeRect(), and clearRect(). The functions do pretty much exactly what you would think based on their names. fillRect() draws a filled rectangle; strokeRect() draws a rectangle with border, or stroke, around it; and clearRect() clears the area and makes a fully transparent rectangle. To make it even more simple, each of the functions takes the exact same parameters. Let’s take for example the following line of code:

• context.fillRect(0,0,50,75);

As you can see, the function takes four parameters. The first two define the starting point of the shape, the x and y coordinates. Thankfully the coordinates follow common sense. The origin or (0,0) is the top left of the canvas element. So (0,10) would be at the top and 10 pixels from the left.

The next two parameters are the width and height of the canvas element. In this case, I made a rectangle that is 50 pixels wide and 75 pixels high. So the result of the above line of code is a 50 pixel by 75 pixel, filled rectangle in the top left corner of the canvas element. To get a good idea of the results of each of the rectangle functions, we’ll use the following code (we’ve also set the height and width attributes on our canvas element to 125 pixels each) :

1. context.fillRect(0,0,50,50);
2. context.clearRect(25,25,50,50);
3. context.fillRect(50,50,50,50);
4. context.strokeRect(75,75,50,50);

The result, as you can see here, is four overlapping rectangles. Remember, you’ll need Firefox (1.5+), Safari, or Opera (9+) to view it. As you can see, the clear rectangle clears out the area it covers. The stroke rectangle, on the other hand, doesn’t clear out the area, so you can see the filled rectangle through it.

Next Time

Next time around, we’ll start to look at some of the other functions available, and how we can use those functions to start making a variety of shapes…not just simple rectangles. To wet your appetite a bit in the meantime, have a look at another great example of how the canvas element can be used.

What Is It, and Who Supports It?

The canvas element was originally implemented in Safari, and then became standardized in the HTML5 specification. The element allows developers to dynamically draw onto a blank ‘canvas’ in a website. Thankfully, you don’t have to wait to play around with this element. Currently, you can find support for it in Firefox (version 1.5 and newer), Safari, or Opera (version 9 and newer). In addition, you can twist IE’s arm a bit thanks to Google and Mozilla. Google has created ExplorerCanvas, a script that allows your canvas scripts to work in IE. For more intensive applications, Mozilla created has created an ActiveX plugin for IE to bring canvas support to the widely used browser. So, there’s little reason why you can’t start using it today….Google Maps does!

Unfortunately, there is some discrepancy in the way browsers support the canvas element right now. For example, in Safari, the canvas tag works a lot like the img tag…it doesn’t require a closing tag. In Safari, you can close the element like so:

In Firefox, however, the canvas element requires a closing tag:

The problem comes in with alternate content. In Firefox, we can simply throw our alternate content in between the opening and closing canvas tags. If the browser doesn’t support the canvas element, then the alternate content displays. In Safari, the content displays regardless. There are a few ways you can hack around this however, including this one presented by Matt Snider.

Why It’s Cool

The canvas element is not meant for static images…though it can certainly be used to do that. The real power of it comes when we make use of Javascript to manipulate the canvas element and create dynamic visualizations like data charts and graphs, interactive diagrams and games. In fact, there are a couple impressive Javascript game recreations that have already been developed that make use of the canvas element. You can already play Mario Kart, Super Mario, and an incredibly addicting game called Ooze.

The canvas element is a great example of where implementation precedes standardization. Safari implemented it, then Firefox and Opera caught on, and now the WHAT-WG is incorporating it into the HTML5 specification. Once implemented, it provides us with a standardized, cross-browser means to dynamically display data and react to user events in a way that previously required Flash.

What’s Coming Up

Next time around, we’ll start to look at the canvas element in more detail including the attributes available. We’ll also start diving into some Javascript and some of the methods provided by the DOM to interact with the canvas element.