So what's next with the web? Will we see the next big thing come when CSS3 gets adopted? Will there be a revolution on the Internet when browsers support XHTML 2? No, of course not. These things might make life easier for us, but they aren't going to change what we can do right now. We already have all the tools we need.

Even XUL or XAML will just make things easier. They're not going to change what is possible. We can do anything right now using JavaScript, CSS, HTML and (for the really tricky stuff) Flash. We can communicate to the server in real time with XMLHTTPRequest or Flash Remoting. We can make complex interfaces that update themselves. Nearly anything that is possible in a desktop application, and so much more, is possible on the web.

So what does this mean? It means we're not waiting for anything except new ideas. Whatever the coolest, greatest new thing will be in 2010 will probably have been possible right now, if only we could have thought of it.

It's only our perception that changes over time. For example, Google Maps used technology that was there for years to do something very useful, and it pushed the limits of what we thought were possible in a web page. And it didn't take long for Microsoft and Yahoo to roll out their imitations. We could have had maps like this years before, if only someone would have thought of it.

It'll take some time to explore what other possibilities exist in the technology we have available. But there's no need to wait around. Let's see what's possible today.

Okay, some time ago I posted onAfterPaste, a way to run some code after pasting. You can actually do the same thing with any event. Let's say you want to put an onclick handler on a submit button, but you don't want the function to execute until after the form is submitted. You may want to close the window after launching a new window or submitting a form, but putting window.close() in the onclick would prevent the form from being submitted. Then, do this:

function onAfterClick (e) {
     window.close();
}

var submit= document.getElementById('submit');
submit.onclick = function(e) {
     setTimeout(function() {
          onAfterClick(e);
     }, 1);
}

That's it. It's like the browser processes the click handler, then goes and does it's default click behaviour, then executes the timeout function. So it's almost a kind of magic.. but not really. Anyway, setTimeout is a great tool for making things happen at the right time.

The U.S. has granted a patent (via) to a design company, Balthaser Online, for Rich Internet Applications, including AJAX, Flash and Java.

Reading the abstract in the actual patent closely, it seems to me they've only patented the creation of rich applications from over the Internet. Their main product, Balthaser:fx, is used to create Flash movies over the web. This seems to fit my interpretation. However, the news article I linked to suggests the patent might include all rich internet applications.

What does this mean for the web? Who knows. It'll be up to this company, and the U.S. courts, to decide what this patent includes and doesn't. Nonetheless, I think this is another great example of why software patents are total bullshit.

That's right, Google's Toolbar PageRank seems to be updating today. It seems really uneven though. Some pages are updated, others aren't. Perhaps it'll take some time to finish updating. Currently this site is still sitting at a PR2. Let's see what happens by the end. :)

By the way, you can see the different PageRank values with this Live PageRank tool. It'll give you an idea of how your pages are doing across different data centres, and compare Toolbar PageRank to "Live" PageRank. Good luck!

Update: Live PageRank is now a thing of the past. It is reporting 0 for every domain, and Matt Cutts doubts this will ever change. Well it was fun while it lasted.

Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything. Why would you want to do this? Depending on the tag, the content in the tag can be interpreted in a certain way. Here are some examples.

Header tags

If you use <h1> instead of <div class="header">, and <h2> instead of <div class="subheader">, et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.

This works both ways: don't use header tags for anything except headers, especially not increasing your font size or outlining your search engine keywords. This way, your page can be parsed for structure (you can do this with the W3C HTML Validator). This structure can then be used by screen readers or other tools to build a table of contents for your page.

Form labels

The <label> tag is so sadly forgotten. It's not immediately clear what the point of using it is, so very few web pages take advantage of it. The label tag is used to identify a label for an input field, for example "E-mail Address". It can either be used be wrapping it around the text and input field like: <label>First Name: <input name="fname"/></label>, or it can be used with the for attribute like so: <label for="fname">First Name:</label> <input id="fname" name="fname"/>.

Why use the label tag instead of <div class="label">? Well, it's shorter and cleaner. But it also let's screen readers and other tools identify the text associated with an input field. Without using the label tag, it can be very difficult for some people to know what is supposed to go into your form fields.

Tables

These days, everyone's moving away from using tables. This is great because tables aren't intended for structuring the way your web page looks. But tables still have a very important purpose. Any time you need to display data that would go in a spreadsheet, tables are here to help.

When using tables, there are a number of tags and attributes that aren't widely used, but are very important for accessibility. Use the summary attribute to give a longer summary of the data in the table. Use the <caption> tag to give a brief title to the data. Use <th> tags to identify the column and row headers in your table. Then, you may want to use the headers attribute on the <td> tags to identify which headers apply to that cell. For more examples and details on accessibility with tables, see the W3C's Accessibility Guidelines.

Lists

Lists are the new tables. Whereas tables are intended for grids of data, lists are intended for lists of content. This is great for us, because most web pages are essentially lists of different things. For example, look at this site. On the front page, I have a list of blog entries in the centre. On the sides, I have lists of links (archive, categories, et cetera), and the sides themselves are lists of lists. If I had used tables, I would've been saying "this stuff on the left has something to do with the stuff in the middle", but it doesn't, really. By using lists, I'm simply saying "this stuff is a list of items that have something to do with each other", which they do.

You have three types of lists to choose from, but choose wisely. There are Ordered Lists (<ol>), Unordered Lists (<ul>), and Definition Lists (<dl>). Only use Ordered Lists when the entries have some kind of order. Only use Definition Lists for definitions (eg. for a glossary). Use Definition Lists any time you need name/value pairs, or when you need to break your list up into sections. The rest of the time, Unordered Lists are a safe bet.

Lists not only give structure to your page, they're incredible handy for styling. You can just put an id or class on the outer tag (eg. <ul>), then style both the outer tag, and the inner <li> tags.

Conclusion

Try to use the full variety of HTML tags whenever possible. Sometimes you'll be stuck with using <div> tags, but try to limit them to whenever you can't find a suitable HTML equivalent. At the same time, try to avoid using HTML tags for anything except their intended purpose. By doing this, your HTML will be cleaner, and its structure will be more readable and understandable -- not just to people but to screen readers, search engines, and other programs and tools.