In order for your site to be strict XHTML compliant there can’t be any target attributes for links, it isn’t a supported attribute. I can see why this is a good idea but it’s also annoying at the same time. It doesn’t make sense for when you are linking to an external vendor or site for someone to open in a lightbox or within your own site.

There are two ways around this, say f standards and put the target attribute in there anyways or make javascript do it for you.

With the methods below specify rel=”external” on any links you would like to open in a new window or behave like a target=”_blank”.

<a rel="external" href="http://google.com">Google Rocks.</a>

jQuery

$(function(){
  $('a[@rel$='external']').click(function(){
    this.target = "_blank";
  });
});

Prototype

Event.observe(window, 'load', function() {
    $$('a[rel="external"]').each(function(link){
        if(link.readAttribute('href') != '' && link.readAttribute('href') != '#'){
            link.writeAttribute('target','_blank');
        }
    });
});

I use the following code to demonstrate what the content of a web site is going to look like.  This goes over the typical HTML elements within a page, you might need to add more for your specific site but this should get you started.  This code can also be used as a demo to a designer on what styles you need made within the design file before it starts development.

<h1>The H1 tag looks like this</h1>
<p>The paragraph after an H1 looks like this</p>
 
<h2>The H2 tag looks like this</h2>
<p>The paragraph after an H2 looks like this</p>
 
<h3>The H3 tag looks like this</h3>
<p>The paragraph after an H3 looks like this</p>
 
<h4>The H4 tag looks like this</h4>
<p>The paragraph after an H4 looks like this</p>
 
<h5>The H5 tag looks like this</h5>
<p>The paragraph after an H5 looks like this</p>
 
<ol>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ol>
 
<ul>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ul>
 
<blockquote>A blockquote looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. 
</blockquote>
 
<code>
A code looks like this. Nullam nec dolor. In, A code looks like this. Nullam nec dolor. In
</code>
 
<span>
This is what a span tag looks like
</span>
 
<a href="">A basic link </a>
 
<p>
A long paragraph. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. <a href="">A link in the middle of a paragraph</a> Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</p>
 
<p>
Another long paragraph stacked below the one above. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</p>

I recently had to style textboxes on a site and didn’t want to use anything that involved a hack or workaround.  What I ended up with is a pretty simple solution, you just have to wrap every textbox in the background image you would like. This could technically work for all of your other form elements as well, the process would be very similar.

First you need to apply a CSS global clear.  If you aren’t already using something like this then you are causing yourself way to many headaches with trying to get your site to work in all browsers.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: arial;
    vertical-align: baseline;
    background: transparent;
}
:focus {
    outline: 0;
}

Then add the style that displays the background image for the textbox

.background{background: url(/images/layout/text-field.jpg) no-repeat;}

Then add the class for textboxes.

.text{
	margin:0px 0px 0px 8px;
	width: 145px;
	height: 17px;
border: none;
	background:transparent;
	color: #666;
}

adjust your styles as needed.

Then to get your textbox to appear it needs to be like this…

<div class="background">
<input id="name" class="text" name="name" type="text" /></div>

which should output this… (might need to adjust the margin for the input box)

Just watched Ian Hickson’s demo of html 5 and since it’s over an hour thought it would be helpful to just type these out.

Video Tag
It’s been known for a while that there will be a video tag now instead of working with an embed and object tag.  Below is a possible use of using a video tag.  Notice that the keyword “controls” is what puts the controls on the video to control playback.  They aren’t very pretty at the moment but very cool to have video controls already on top of a movie rather than having to skin it with a player.  Another one is the autoplay where previously it would have been autoplay=true it is now just the keyword autoplay.

Another nice addition to the video tag is that once we can stop/start/pause etc a video by just referencing that html element.  See Below.

$('video').play()
$('video').stop()
$('video').pause()

Local Storage
Can save and open data locally. Think of a multipage form where you are normally storing data as you go but it is stored server side typically.  This is a way to store everything client side with easy access to your data.   Data is saved amongst pages, similar to cookies or session data. Local storage is more similar to a cookie while session storage is very similar to session data in that the data only lasts as long as the browser’s session.

localStorage.setItem(key,value);
localStorage.openItem(key);
localStorage.myvar; <!--Accessing directly by key-->

Drag and Drop
Drag and drop is now built into html.  You can utilize functions drag and drop. Ian mentioned that the API wasn’t that great yet but very cool to see this kind of behavior included already.

Actions on hash change
Can fire scripts on hash change. Hash meaning the anchor tag of a link.  So when you click a link that references page.html#first you can now act on it.

Modifications to inputs
There’s now an input type=”range” which gives you a slider bar. You use the oninput attribute to take action on anything that is happening with the slider bar.

There’s also now an input type=date! Once you set this it gives you a calendar date picker. Very similar to all of the javascript date pickers that are currently used. This will be very beneficial when having date fields.

Output tags
You can create output tags and give it a name and print your output to there instead of doing document.getElementById(’output’).  It would be nice to see a $() implementation to access elements to compliment the very archaic document.getElementById();.  It sounded like currently this is only supported within forms.

<output name=”main”></output>
main.value = “my new value”;

Validation
input type=email can now be automatically validated as an email address.  The css style :validated can used to style what invalid input looks like such as a red background or border. It uses active validation too so as you type it validates the email and lets the user know when it is valid.  Typically we have to code this in js and attach an observer to the field for this same behavior.

To validate a required field in a form the keyword required just needs to be specified within the input tag. The autofocus keyword is also used to focus on load, this is put in the input tag.

DataLists
New input type <datalist> lets you set predefined values that the user can select from but the user can then also enter their own value.  The field displays as a textbox and upon click or typing it shows the available options, if the user doesn’t want to use those then they can type their own option.

• ondrop, ondrag, ondragover added as event handler for objects. Some of those have been supported previously in safari and IE.
• URL fields pull urls straight from your history.
• The script and style tag no longer needs language or type.  Not a huge improvement but nice to get rid of it.
• Can interact with content within frames such as passing variables and other actions needed.