Last week, I made a bet.
The bet was made with one of my friends. The prize was a cup of coffee. The challenge was to see if HTML5 semantic markup would work on an older browser.
How old, you ask? Netscape 4.04. Y’know. The one released in 1997.
Before we carry on, we should probably talk about Semantic Markup.
Have you noticed how news websites are pretty much all the same? If you read an article on the websites of the BBC, Al Jazeera, CNN… Whatever… You’ll notice that they all follow the same structure. You’ve got a main article. You’ve got a navigation bar. You might have an infobox on the side of a page. Pretty samey.
It used to be that you would create a Div element for each of these sections. This worked fine, don’t get me wrong. That said, it wasn’t a perfect solution. It lacked a certain elegance, and more importantly, the ID used in the Div element wouldn’t be standard across all websites. This wasn’t especially search-engine friendly.
As a result, semantic markup was created. Now, instead of creating a div for commonly used elements in a web page, you can just use a tag specifically created for that aspect of a web page, such as ‘section’, ‘aside’, ‘nav’ and ‘article’. You can probably guess what these do.
The creation of Semantic Markup has been awesome for developers; having improved code quality and readability and makes websites more readable to search engines too. There’s really no reason to not be using semantic markup right now. Or is there?
Semantic Markup and Older Browsers
But what about semantic markup? Unlike most of the features recently introduced to the HTML standard, semantic markup doesn’t actually do anything in the browser. Rather, it’s just a bunch of tags that act as a container for other tags based upon a logical grouping.
As a result, it stands to reason that an older browser shouldn’t have too many issues rendering content enclosed within two semantic tags.
With respect to this particular bet, I predicted that whilst the browser wouldn’t understand what a <section> tag is, it would just treat it as broken markup; skipping to the valid markup enclosed within and rendering it in the browser. Amusingly, this would result in the same results as if running semantic markup on a modern browser which explicitly support it.
My pal took a slightly different view, expecting the browser wouldn’t render it. Period. That’s a fair point, especially when you consider that Semantic Markup was only recently introduced into the HTML specification and Netscape 4.04 was released when I was six years old.
Running Netscape on a Mac
This is harder than you might think.
I first tried using Netscape with CrossOver Mac. This commercially supported implementation of WINE (an open-source compatibility layer for Windows applications) allows you to create ‘bottles’ which implement a number of key Windows DLLs. It is in these bottles where you can install Windows applications and run them on your Mac or Linux computer.
Whilst Netscape installed perfectly (using both a Windows XP and Windows 98 bottle), I couldn’t get it to run without it immediately crashing to the desktop. I had to try something different.
Few web developers would be seen dead using Windows as their main development platform. Despite this, Internet Explorer stubbornly clings to life; retaining a 50% market share. As a result, Microsoft is on a PR offensive and trying to woo the affections of developers by giving anyone who wants it a free Windows VM, where they can test their applications against Internet Explorer.
I grabbed myself a free Windows XP virtual machine, fired up Oracle VirtualBox and set about installing Netscape on it.
Curiously, after having installed Netscape, I am asked if I would like to restart Windows or restart my computer. Because those are two obviously different questions.
It works! Incidentally, this is what the Google Homepage looks like with a 17 year old web browser. It’s… Uh… Beautiful.
Testing My Hypotheses
I started off by writing a simple little HTML document (using Notepad. Blegh). Inside the Body tags, I included an Aside and Section tag. Inside of these, I included two P tags each saying ‘Hello World!’.
To recap, if my hypothesis was right, I’d see ‘Hello World!’ printed to the screen twice. However, if I was wrong, nothing would happen.
As you can see in the screenshot below, my prediction was correct. For the sake of fairness and to prove that no shenanigans took place, you can see the contents of ‘View Source’ next to the browser window.
This was a fun trip down memory lane. I’ve actually got quite fond memories of Netscape Navigator, having had my first internet experience using it on a slightly shaky PowerMac with an even shakier ISDN connection. The 90s, eh?
That said, there’s a takeout message from this experiment. Namely, there’s figuratively no good reason to not be using semantic markup right now. Seriously, none.
It’s also ridiculously easy to transform your site into nice, modern, semantic HTML. I’ve written about it extensively in a book for MakeUseOf, as well as in a personal blog post.
I think I’ve earned my coffee. I’ll have a double espresso please.
Enjoy this article? You should follow me on Twitter.