I have recently begun using HTML 5 instead of XHMTL 1.0. The spec for HTML 5 is still a long way off from being a W3 “recommendation,” but I decided to switch to it because of “microdata”. Microdata, or Rich Snippets as Google calls them, are a way to mark up the information on your web site to be more machine readable, such as products or addresses. For example, you can use it to tell search engines that a portion of your page pertains to a specific product, pointing out exactly what makes up the name of the product, the price, its image, and so on. The following code example is pretty typical for an individual product’s info (obviously simplified for this example):

<div class="product">
	<div class="name">The Web Site Maker</div>
	<div class="price">$99.99</div>
	<div class="description">This is the incredible Web Site Maker. No longer
		do you have to get your hands dirty. This software contains a single
		button. Push to receive web site.</div>
	<img src="web-site-maker.png" alt="The Web Site Maker" />
</div>

However, a search engine doesn’t necessarily know what all that means. Google’s pretty scary and can probably decipher all that, but, with microdata, we can help by marking exactly what each bit of info means. As follows:

<div class="product" itemscope="itemscope" itemtype="http://schema.org/Product">
	<div class="name" itemprop="name">The Web Site Maker</div>
	<div class="price" itemprop="offers" itemscope="itemscope"
		itemtype="http://schema.org/Offer"><span itemprop="price">
		$99.99</span></div>
	<div class="description" itemprop="description">This is the incredible Web Site
		Maker. No longer do you have to get your hands dirty. This software
		contains a single button. Push to receive web site.</div>
	<img itemprop="image" src="web-site-maker.png" alt="The Web Site Maker" />
</div>

What is this itemscope and itemtype stuff, you may be wondering. These are attributes new to HTML 5, and thus the reason for switching to it. These attributes are legal on nearly any element and are used to mark up our data. The itemscope attribute is used to mark an element as the container for a particular item—in this case, a product. In the example, it means everything inside the element with the itemscope attribute is information about this particular product. It’s within the “scope” of this product. As an aside, you may notice that itemscope “equals” itemscope in the example. This is only because I am using the XHTML flavor of HTML 5. If you were using the HTML variant, you could just use itemscope on its own without the ="itemscope" portion.

After itemscope comes itemtype="http://schema.org/Product". As the name implies, it specifies the type of item for the machine reader to expect. “Product” is one of a plethora of types you can use, a list of which can be found at Schema.org.

Moving on, itemprop="name" obviously specifies the name of the product. “Name” is a property of the “Product” type. The Schema.org web site shows in detail the properties of each type, usually with examples, under their schemas section. Some properties, however, are more than a simple text value. Some are actually an itemtype of their own, such as the price of the product. It is not merely an itemprop="price" with a number inside, but an “Offer” type. So it is necessary to again add the itemscope and itemtype attributes. I also had to add an extra element—the span—inside the price div so I could apply the “price” property, a property of “Offer”.

The rest of the example is just made up of some additional itemprop attributes. After you’ve marked up your information, you can use Google’s Rich Snippets Testing Tool to make sure it’s marked up correctly.

If you’re already using some form of XHTML, it should be a pretty simple matter of changing the doctype and replacing your <meta http-equiv="content-type" content="mime-type; charset=utf-8" /> (or whatever you may be using) with a simple <meta charset="UTF-8" /> to convert to valid HTML 5. It’s not necessary to use the new elements such as header or section. Your old div elements will work fine. It’s probably not even desirable at this point to utilize the new elements thanks to the inability of Internet Explorer 8 and lower to display them without a hack.

Welcome to the future. I hope you can start using microdata (AKA Rich Snippets) to make the web a more semantic place. Don’t forget to check out Schema.org for all the supported types and their properties. Have fun, web wizards!

<!--[if !IE]>-->
<object data="movie.swf" type="application/x-shockwave-flash" width="725" height="235">
	<param name="movie" value="movie.swf" />
</object>
<!--<![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="725" height="235">
	<param name="movie" value="movie.swf" />
</object>
<![endif]-->

Definitely a pain, but I’ve found no other way around it.

Also in my search for a solution, I discovered that our old pal Internet Explorer does not let you append anything but param elements to object elements in Javascript. That was pretty frustrating. Don’t try that. It doesn’t work.

If you’ve done much web work before, you’ve probably, at some time or another, had to use an iframe. It’s not pretty, but sometimes it’s the only choice, such as embedding a widget from another site or displaying things such as real estate listings. One of my biggest problems with it is that it doesn’t exist in the spec for XHTML Strict! It exists in Transitional, but I don’t like to use it. That may be good enough for some developers, but certainly not for me. How about you?

In Internet Explorer 8 (and possibly IE7, but I have not tested it) and Firefox, you can use the object element to embed a web page just like an iframe; however, IE gives it a thick, lovely border that seems impossible to remove. Here’s the trick: employing IE’s conditional comments, use an iframe for IE and an object for everything else. Here’s an example:

<!--[if !IE]><!--><object data="http://www.bliznet.com/" type="text/html" width="320" height="240"></object>
	<!--<![endif]-->
<!--[if IE]><iframe frameborder="0" src="http://www.bliznet.com/" width="320" height="240"></iframe>
	<![endif]-->

Valid XHTML Strict! Make sure to keep your settings the same across both elements to keep it consistent.

Happy coding!

You may have noticed that with the embed code from my YouTube article that Flash movie preloaders don’t work in Internet Explorer, and the movie has to load entirely before it even displays at all. This is because Internet Explorer requires a different attribute and the removal of another in the object tag to let preloaders work properly. However, with different attributes, the Flash movie will not display at all in Firefox, so we must use Internet Explorer’s conditional comments to utilize two different opening object tags. Behold:

<!--[if !IE]>--><object data="yourmovie.swf" type="application/x-shockwave-flash"
	width="320" height="240"><!--<![endif]-->
<!--[if IE]><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	width="320" height="240"><![endif]-->
	<param name="movie" value="yourmovie.swf" />
	<param name="quality" value="high" />
</object>

The first line is the original that works in both IE and Firefox but doesn’t allow preloaders in IE. The second is the IE-only method that works with preloaders. Note the lack of a data attribute and the addition of a classid attribute.

Well, there you have it. Venture forth and embed Flash validly with preload animations!

• Use h1 as your page title; use h2 and on appropriately as sub-headings on the page. This provides an outline of your document.
• Use lists (dl, ol, ul) instead of manually placing numbers or bullets.
• Use address for any contact information on your page, including physical address, email address, phone numbers, and whatever else you would consider to be contact info.
• Use table on data best represented in rows and columns. Use thead and th to markup the column headings and tbody for the data itself.

Check the HTML spec for additional meaningful elements and get to work!

You can use the W3′s handy Semantic Data Extractor tool to test your new semantic web site to give you an idea of how it would be seen by software.

That does it for now. See you next time! Until then, read SEO and Validation.

Most of the embed code I see for Flash movies is invalid, usually containing the non-existent embed element or some-such. Even the code provided by YouTube for embedding videos contains embed. This can easily be thrown out and will—probably most of the time—instantly make your code valid.

Here’s an example (in XHTML) of a valid Flash embed that works in at least IE6+, Firefox, and Safari:

<object data="flash.swf" type="application/x-shockwave-flash" width="320" height="240">
<param name="movie" value="flash.swf" />
</object>

That’s all there is to it. Adjust the parameters and add additional param elements as necessary. If your Flash movie requires variables, just add an extra param as follows:

<param name="flashvars" value="arg1=foo&amp;arg2=bar" />

If you place additional elements inside the object element, it will act as a fallback, displaying if the Flash plugin isn’t installed. For example:

<object data="flash.swf" type="application/x-shockwave-flash" width="320" height="240">
<param name="movie" value="flash.swf" />
<img src="fallback.jpg" alt="Flash Didn't Load!" />
</object>

That’s all for now. Happy coding!

Clear as mud, right?

As promised this will be about onpage and under the hood SEO basics. Starting at the top (of the html) we have the……… nope not the title, first let’s take a look at the Doctype. What does the Doctype have to do with SEO? Almost nothing but why not start out by telling the spiders what type of page you attempted to make and what type of code you are trying to write? It can’t hurt and might help them parse the page better. If you aren’t sure what the Doctype is then run over to the web standards authority and check it out and also read SEO and Validation.

OK, now the Title, what makes a good title? How is it used? The title will show in the title bar of most web browsers. There are not really any good statistics I’m aware of for how many people look at page titles when they are on your site but when they search, they are generally served your title in the Search Engine Results Page (SERP). We also know that Google, Yahoo, and Bing look at and put enough weight on your page title that it really matters. You can change your page title and only your page title and watch some of your search positions change, that’s how important the title is. If that’s true then why not SPAM the title? Simple, if I need a jack and the search results at position 4 is Jack : Lift : Heavy : Duty : Ultimate : Hydraulic and the position 5 result is The Ultimate Heavy Duty Hydraulic Jack by the JackMan then which one do you think gets more clicks? Another reason to make good titles is because the algorithms are very good at detecting SPAM and chances are you will do more harm than good if you just create stuffed titles. Moving on let’s decide what the page is about and craft a good title for humans and bots. For humans we need to strive for a complete sentence that makes sense and draws attention or demands action. Pick the topic of the page and try to get the main keywords or phrase in the first half of the title. Wow! All that in less than 70 characters including spaces, good luck. Good titles can be  a challenge but you will be rewarded for your effort. Try it, pick a product or service and try creating a title that would make you click it. After all, that is the goal, we want clicks because clicks equal traffic.

What about the page description meta tag? The search engines will most likely use your description to form the SERP description. Don’t copy the title, don’t use special characters. Include the main keywords or phrase for the page content. There is no penalty per se for a short description but you might be missing out on some keyword opportunities. Too little content could get a bot generated description that misses the point of your page. Take the opportunity to sell your product, service, or idea and use between 30 and 150 characters as a guideline.

The once powerful and now dusty and often forgotten keyword meta tag can still be useful so don’t completely neglect it. Put in your secondary keywords and key phrases, the ones that aren’t in your title and description. Limit duplicate words in phrases to 3. You can even include common typos. You can use up to 500 characters as a guideline but that’s probably more time than it deserves. I can’t tell you what search engine spyders still look at the keywords meta but there is some indication that Bing (Formerly MSN – Live Search) will grade your keywords but the weight is probably very low.

Well, I’m out of time so we will get to heading element, page content and copy writing in the next chapter.