logon2 Blog

When I moved across to XHTML a few years ago, the transition was mostly quite easy. Using thesse logical rules got me though 90% of the transition:

1. Close all tags, use lower-case tags, use lower-case attributes and maintain nesting order.
2. Markup is for content, CSS is for presentation. That one was easy.
3. Use the right tag for the right job (in the right place) and make things accessible.

However, one thing that can’t be covered by a general rule is the complete removal of tags. Most removed tags were non-standard and started out as proprietary – like <marquee> and the tag we’re going to talk about, <embed>.

The <embed> tag was used to ‘embed’ objects (plugins) into a web page. Even though it’s not a standard tag, it had become the de facto method of inserting an object (like a Flash object, or a video) into a web page. You’ll notice that the code YouTube, PhotoBucket and other sites provide for you uses the <embed> tag and therefore this practice is known as “embedding”. Even though these sites still use it, that doesn’t mean you have to. “Embedding” objects without using is actually very easy and cross-(modern)browser compatible. Dear reader, please meet the HTML5 and XHTML-compliant <object> tag.

Valid HTML5 and XHTML Flash Tag

Rather than explaining it to you first, I’ll show you the before and after of some YouTube “embed” code.
Before:

<object width="425" height="344">
	<param name="movie" value="http://www.youtube.com/v/bz8Pv-QeNQI&hl=en_GB&fs=1&"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<embed src="http://www.youtube.com/v/bz8Pv-QeNQI&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

After:

<object type="application/x-shockwave-flash" style="width:425px; height:344px;" data="http://www.youtube.com/v/bz8Pv-QeNQI&amp;hl=en&amp;fs=1">
	<param name="movie" value="http://www.youtube.com/v/bz8Pv-QeNQI&amp;hl=en&amp;fs=1" />
	YouTube Video, flash required.
</object>

Basically, this is all you have to do:

• Add a type attribute to the object, and set its value to "application/x-shockwave-flash"
• Add a data attribute to the object and set its value the param "movie" had as its value – or simply the path of the SWF
• Use CSS to set the width, height and position
• Maintain other params that you want, or delete the ones you don’t want

See, it works:

Actually for some reason it doesn’t work on my iPhone…

That is all, happy (valid) coding.

Did you like this post?
Send to a friend

This entry was posted on Wednesday, February 24th, 2010 at 17:49 and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.