(16th August 2013)

Building for the modern web

Being Front End Developers we are constantly asked the same questions about how the web is evolving and the latest and greatest technologies.

  • What is HTML5?
  • What is CSS3?
  • What is jQuery?
  • Why do things look different depending on the Browser? 

Going back to basics

Although they have evolved tremendously over the last few years, the 3 fundamental components of Front End Web Development are still HTML, CSS and JavaScript.

  • The W3C sets and publishes the standards for HTML and CSS
  • ECMA International does the same for JavaScript
  • New standards are debated and discussed at great length
  • Browser manufacturers choose what standards to implement, and to what extent

Differences in support between Browsers means developers need must be flexible and to be mindful in how and what they code!

A Brief History

In the early 90s HTML was created as a tag-based “language” for marking up text documents. Shortly afterwards, a group of people formed the World Wide Web Consortium to maintain and advance the HTML specifications.


  • 1993: The first draft spec for HTML is published
  • 1995: HTML 2.0 spec published
  • 1997: HTML 3.2 and then HTML 4.0 published
  • 2000: XHTML spec published, based on XML 1.0
  • 2002: Work on XHTML 2.0 begins
  • 2004: Work begins on HTML 5
  • 2008: HTML 5 working draft
  • 2009: XHTML 2.0 is abandoned in favour of HTML 5
  • 2011: HTML 5 enters “last call” stage
  • 2014: HTML 5 expected to be finalized as a specification

What is all the fuss with HTML5?

 You have probably heard the term “HTML5″ used by companies like Apple and Google. It is the next evolution of HTML (Hyper Text Markup Language) which forms the backbone of almost every site on the Internet.

HTML4, the last major iteration of the language, was released in 1997 and has been tweaked so that it can handle the demands of the modern web.

HTML4 has been stretched so far beyond its initial scope to cope with modern demands. Plugins like Flash, Silverlight and Java come with a cost. Such deterioration in User Experience led Apple to drop support for some of these plugins entirely on iPhones and iPads.

HTML5 adds many new features and easily allows the rendering of these processor-intensive add-ons.

Assuming content providers and web site creators sign on (and many are), this means you won’t have to worry about installing yet another plugin just to listen to a song embedded in a blog or watch a video on YouTube. These add-ons will also work on devices that had previously not supported them.

What is semantic mark-up?

 It is important for a web developer to view a HTML document without any formatting applied (No images, CSS or JavaScript enhancement) so that the raw content is visible.

When you read it, does it make logical sense?

Do you understand:

  • Which parts are more important than others?
  • Which texts are headings?
  • Which parts are connected to each other?

If the answer is yes, the document is probably created in an understandable semantic way.

There are a number of benefits a site will gain with the use of good semantic mark-up in a HTML document.

  • The page will be more accessible to users viewing the document in an environment where CSS cannot be applied.
  • The page will be understandable to people having it read to them by a screen reader.
  • The page will rank better with search engines. Search engines can easily establish the importance of different elements.
  • Easier to maintain code, and to separate content (HTML) from presentation (CSS).
  • There will be less code, which isn’t cluttered by formatting, resulting in a faster loading page.

The way you create content has no relation to how you want it to be presented within your page.

Everything presentation related should be controlled through CSS.

  • Don’t use headings to make a font larger
  • Don’t use <blockquote> to indent text
  • List elements have a semantic meaning. (This doesn’t mean that all lists have to be presented with a bullet or number)

“It’s about meaning, not about looks”

The Internet Before CSS

HTML was first shipped with a few limited options for creating rich text.

Initially, browsers were text based (like command line or terminal), but graphical browsers were soon developed and enabled the birth of the modern web.

As HTML evolved, more tags and attributes were added that took advantage of these new graphical browsers.

A typical web page back then would feature a bright, solid coloured background, contrasting text, low-resolution images and usually some scrolling or blinking text.

In todays modern times this seems extremely primitive, but there was nothing to compare it to at the time.

Before the launch of CSS, authors applied styles to HTML pages by way of a few, limited tags and attributes. Some common ones were:



<U>, <B> and <I>


Each item on a page needed its own style attached to it, so making changes to lots of elements or pages quickly started becoming difficult, and pages started becoming messy.

We needed something better!

The Birth of CSS

CSS specifications fall under the World Wide Web Consortium (also known as W3C), one of many international standards organisations who keep things in check for the internet.

Cascading HTML Style Sheets (CHSS) was the earliest version, which first introduced the concept of creating a consistent approach to how pages were styled that HTML alone was incapable of.

In 1996, Cascading Style Sheets were introduced in an effort to solve these problems by separating the visual styles being applied to HTML mark-up.

CSS is a web-based mark-up language used to describe the look and formatting of a website to the browser, most commonly used in HTML pages. It can be written in a number of different places, but the most common (and best practice) is to use a separate file and include it in your HTML pages.

CSS is extremely flexible and allows single styles to be applied to multiple elements across any pages where the CSS file is included.

So what is CSS3?

Developers will already have a good understanding of CSS3, the latest and greatest standard that’s all the rage with modern websites and the browsers we use to view them.

For everyone else, you may have heard the buzz about CSS3 – but do you know what it is, how it works and why it matters?

“CSS” is an acronym for Cascading Style Sheets

“CSS3” simply refers to the latest version of CSS, with additional capabilities far beyond the scope of the first two generations.

With its modular structure, CSS3 allows developers to build content-rich web pages with relatively lightweight code.

  • Fancier visual effects
  • Better user interface
  • Cleaner pages that load faster than ever before.

CSS3 is the presentation layer of a web page and gives desktop style layout to these pages by using graphic elements such as:

  • Drop shadows
  • Gradients
  • Border effects
  • Multi-column layouts
  • and much more…

Who supports CSS3

Internet Explorer seemingly ignored most of the capabilities of CSS3, but with IE9, all of the major browsers finally embraced the technology allowing developers to fully utilise the features of CSS3 regardless of platform.

Of course, users on older browsers won’t be able to take full advantage of this without upgrading.

Over time, we will all be using CSS3 compliant browsers and many of the old, complicated methods of developing websites will start to fade out.

And then we had JavaScript

The web’s favourite language turns 18 this year.

Developed in 1998 by Brendan Eich at Netscape it was originally called Mocha then changed its name to LiveScript before JavaScript finally stuck. It was widely adopted very soon after its inception.

Around 2006, its popularity exploded as developers began to take advantage of emerging libraries and frameworks such as Mootools, Prototype and jQuery.

These libraries allowed us to write cross-browser compatible code quickly, and the surge led to huge advances in JavaScript performance.

jQuery makes it easy

A new developer today might be forgiving for thinking that JavaScript is jQuery, due to its overwhelming popularity and versatility.

This immensely popular library is used on over 65% of websites in the world today, but what exactly does it do?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It is a free, open source, cross-browser and CSS3 compliant.

jQuery is very compact JavaScript code that enables developers to create critical UI functionality by writing very small amount of code.

Some of the benefits include:

  • Improved performance of the web application
  • It helps to develop cross-browser compatible web pages
  • Clean and condensed JavaScript code
  • It is fast
  • It can be extended to implement customized behaviour
  • Understanding simple JavaScript syntax is enough to be able to use jQuery
  • Large online support network

So why do sites look different depending on the browser?

When a print designer gives their page a 5mm border, selects Pantone colour 451 and the font Gill Sans 15 point, they can be sure their audience will see their design exactly as they planned it.

Print designers have a great deal of control over their medium. In contrast, the web designer has no absolute control and designing for the web is consequently very different. There are a wide range of external factors that will affect how a web page will look to the user.

The user’s computer system:

  • The type of hardware and software you use on your computer will affect how a web page is displayed.
  • PC’s and Macs use a different dots-per-inch (dpi) measurement which means text usually displays larger on a PC.
  • Text is ‘antialiased’ on Macs which gives a smooth appearance whereas only the most recent PC operating system does this.
  • PC and Mac also use different screen brightness’s (gamma), and this means that designs will look lighter on a Mac.
  • Different operating systems use different sets of ‘widgets’ – things like buttons and text boxes on forms, and scroll bars on pages – so these elements will also look different depending on the platform you use.

The way you have set your preferences will also influence how a page is displayed.

  • The screen resolution you choose will dictate how big everything looks and how much will fit on a page. The most common screen resolution settings being 1024×768.
  • It is usually impossible to tell what preferences a user has set on their computer. The way a page displays is often down to the users settings.

As if there weren’t enough things conspiring to affect the web designer’s masterpiece, the web browser also wants to get in on the act.

Each web browser looks at the code used and tries to interpret how the page should be displayed. Some browsers will display the page exactly as the designer intended and others won’t.

Some browsers will add default styles to elements. To stop this happening the designer must turn these default styles off.

Display discrepancies are a fact of life for Front End Developers. By using web-standard code and semantic mark-up many of these issues can be dealt with and the increasing standardisation of the web will undoubtedly help in this respect.

Unless we all use the same computer systems with the same preferences there are always going to be some differences.