Of Netscape 4.04 and Semantic Markup

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.

Semantic Markup

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.

semantic-news

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

It stands to reason that HTML5 features aren’t included in older browsers. These include the new (and awesome) JavaScript APIs for geolocation, link prefetching and fullscreen windowing.

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.

semantic-crossover-netscape

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.

Enter Modern.ie.

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.

semantic-vm-install

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.

semantic-vm-restart

It works! Incidentally, this is what the Google Homepage looks like with a 17 year old web browser. It’s… Uh… Beautiful.

semantic-vm-google

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!’.

semantic-vm-notepad

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.

semantic-vm-final

Conclusion

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.

About Matthew Hughes

Matthew Hughes is a software developer, student and freelance writer from Liverpool, England. He is seldom found without a cup of strong black coffee in his hand and absolutely adores his Macbook Pro and his camera. You should follow him at @matthewhughes.

1 comment

  1. Older versions of Windows simply ran on top of DOS. You could exit Windows 3, but also Windows 9x, to end up in DOS. Executing WIN (short for WIN.EXE) would start Windows from DOS. So yeah, restarting Windows and restarting your computer are two different things, vaguely comparable to how you can restart X on Linux without restarting your computer.

    As for unsupported elements simply showing their contents, that’s why scripts used to be written like this:

    <script type="text/javascript">
    <!--
    function bla() {
    //do something
    }
    //-->
    </script>

    Otherwise you’d have some rather strange looking contents in your browser without Javascript support.

Leave a Reply