HTML: A Brief History

Long ago in the far off land of Switzerland something very interesting began, and Al Gore wasn’t there.

1989 Tim Berners-Lee proposes an Internet based hypertext system for sharing documents between disparate operating systems while working as a contractor at CERN (European Organization for Nuclear Research). If you’re interested CERN is derived from Conseil Européen pour la Recherche Nucléaire.
1991 The first publicly available description of HTML. It consisted of 18 elements greatly influenced by SGML (Standard Generalized Markup Language).
1993 First proposal of HTML as a specification to the IETF (Internet Engineering Task Force). At the same time Dave Raggett was working on what he referred to as HTML+ (Hypertext Markup Format) while working for HP (Hewlett-Packard) in Bristol, England.
1994 IETF creates the HTML Working Group.

World Wide Web Consortium (W3C) was also formed by Berners-Lee at the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS).

1995, November 24 HTML 2.0 published as the first specification of the language.

1995, November 25 Form-based file upload
1996, May Tables
1996, August Client-side image maps
1997, January Internationalization
1996, December 16 CSS Level 1 published as W3C Recommendation
1997, January 14 HTML 3.2 published as W3C Recommendation.

The HTML Working Group had been closed in September of 1996 and all future development fell under the auspices of the W3C.

1997, December 18 HTML 4.0 published as W3C Recommendation.

There were three variations:




1998, May 12 CSS Level 2 published as W3C Recommendation
1999, December 24 HTML 4.01 published as a W3C Recommendation.
2011, June 7 CSS3 Color Module Recommendation
2011, September 29 CSS3 Selector Level 3 Module Recommendation
2011, September 29 CSS3 Namespaces Module Recommendation
2012, September 19 CSS3 Media Query Module Recommendation
2014, October 14 HTML5 published as a W3C Recommendation.

The large gap between HTML 4.01 and HTML5 saw the W3C strike off in a new direction incorporating elements of XML with HTML thus creating XHTML. They continued to work in this direction until a fissure arose in 2004 and members from Apple Computers, Mozilla Foundation, and Opera Software formed the Web Hypertext Application Technology Working Group (WHATWG). They pursued a specification they referred to as HTML5. On April 10, 2007 WHATWG proposed that the W3C adopt their HTML5 specification as the starting point for the newest recommendation. On May 9, 2007 the W3C’s new working group accepted the proposal.

2016, November 1 HTML 5.1 published as a W3C Recommendation.

Styling the Humble Checkbox Using CSS

The checkbox has been a staple in the world of HTML forms since day one and for the most part has remained unchanged. HTML 4 introduced the label tag which can be associated with a checkbox using an id attribute in the checkbox and the for attribute within the label. That way you don’t have to click directly on the checkbox, simply clicking the label will select or deselect it.

If the checkbox looks any different today compared to 20+ years ago it’s only because the browser renders it that way.

A typical form with several checkboxes would look like this:


And the code to generate the page looks like this:


Four simple checkboxes with labels. Nothing fancy but they could be simply by applying a little style using CSS.

Take a look at the same four checkboxes after a CSS makeover:


The HTML to generate the page has changed a little, but not all that much:


You’ll notice the label is still there but it has been emptied and moved after the input tag. We’re using it to create the circles and it is an easy task because the id associates the label with the checkbox. In place of the standard label we’re using a span tag to tell us what the checkbox represents.

All the heavy lifting is being done by an external stylesheet using one class selector, one element selector, and a few attribute selectors.


First up we shape the div tag that contains each checkbox. We size it, color it, round off the corners, and position it. The relative positioning is necessary because items within it will be absolutely positioned and need a point of reference.

Next up we create the narrow gray line the circles move along. It’s nothing more than empty content that has been sized, absolutely positioned, and colored.

Now we can start working on the circles, both outer and inner, and we will use our empty labels to accomplish this. They will be positioned, sized, stacked and shaped. Oh yeah, and one last item, a CSS3 transition that will allow the circles to shift when they are clicked.


The :after pseudo class will be the vehicle used to create the inner circle.


The last three selectors are all attribute selectors aimed at the [type=checkbox]. The first one hides the regular checkbox. The second one moves the label (our circles) 34 pixels from its current position when the checkbox is clicked. The last selector changes the inner circle color when clicked.

A pretty amazing change and all done with a little CSS slight-of-hand.

CSS Clearfix: Three Lines and a Breakdown

Occasionally the learning curve in web design can be gentle. Other times it’s a sharp right angle and once in a while it’s just a nasty hair-pin curve. How you perceive these curves is just that, your perception. You know, this morning you feel as sharp as a tack and late in the afternoon you feel as dull as a butter knife.

Clearing floated elements has been one of those butter knife curves for me. True confession time…it hasn’t been a gentle or sharp curve, it’s a I know it works so I haven’t devoted brain time to understand it curve. Was that out load? They say confession is good for the soul.

Let’s break it down and see why it’s necessary and why it works.


The code above results in the page below. Two nested containers inside an outer wrapper. That outer wrapper should be 100% of the pages width, as tall as whatever it contains (height: auto), and it has a light gray background color.

Inside the wrapper are two boxes that should each be 30% of the wrappers width, 100 pixels in height, and have a phthalo green background color which is 70% opaque.


But there is a slight problem, the background color of the wrapper is missing. That’s because floated elements don’t follow the pages normal flow rule. They are removed to float left or float right which means the wrapper now believes it has no content. The height: auto of nothing is…nothing. No content, no background color.

The fix, or clearfix as it has been designated comes to the rescue. Three simple statements that make things right based on a pseudo class, a display property, and the clear property.

CSS has introduced many pseudo (false) classes in its last two versions :before and :after being included in that list. Both of these pseudo classes are useless without its content value. What are we inserting before or after? In the typical clearfix code the content can either be an empty string or a single space. We just need some content in our wrapper that is not floated and it will be placed after any existing content.

That leaves our display: block property-value pair. Using the rules established in the Block Formatting Context by the W3C block formatted elements will contain their floated children and cannot extend past the bottom edge of the block.

The code below shows our added clearfix and below it is the resulting web page showing the missing background color of the wrapper.




A Printer Friendly Version

“You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you.”1

The endnote, if you take the time to read it, will tell you the article this references was written in 2002. Fourteen years later and we are still faced with far too many pages with a printer icon or the ubiquitous “click here for a printer friendly version”. Makes you wonder what we have learned during those years.

The ability to include a stylesheet specifically for print media has existed since CSS 1 released in 1996 and was refined with CSS 2 as a published recommendation in 1998. The <link rel=”stylesheet” href=”print.css” media=”print”> highlighted attribute can be added to a linked external stylesheet. That statement informs the browser the stylesheet is to be used when printing or when viewing the pages content in print preview.

If you would rather not create a separate stylesheet for print media there is the option of adding a @media print section to your existing stylesheet. Any specific rules for printing a page can be added to this media query block.

@media print    {

  header {

  background: none;

  color: #000;



Using a separate print stylesheet also affords us the opportunity to use those interesting units of measure CSS offers like pt for fonts or in/cm for margins. We don’t use them because they don’t make any sense in a world of varying screen sizes. It makes consistent design improbable. The printed page on the other hand is consistent in size and is perfect for points, picas, inches, centimeters, or millimeters.

Most of the time designers for the web feel the content is only going to be viewed in a browser. The printed page isn’t a consideration. But it stands to reason if we design pages to adapt to varying screen sizes we should also take print into consideration. The printed web page needs to be addressed in this time of responsive design, usability, and accessibility.

Here are a few additional resources on the subject.

 CSS for print tutorial

6 Things I Learned About Print Stylesheets From HTML5 Boilerplate

10 Tips for Better Print Style Sheets

Tips And Tricks For Print Style Sheets

1Meyer, Eric (5/10/2002). CSS Design: Going to Print [Article]. Retrieved from

Using a CSS Reset

One of the frustrations designers have been feeling for some time now stems from web design by committee, or design via theme. Many web sites today are WordPress sites with a theme and some content. Just add words and you have an instant site. Then comes the task of modifying the site and trying to make heads or tails of the built-in CSS. Have fun! And we won’t talk about accidently removing content that hoses the database that breaks the site…Arg! But I digress. Sometimes that frustration can come from the browser itself. Did you know that your browser, user-agent, has its own stylesheet and it is first in line to style everything until you step in?

CSS reset to the rescue.

At least that is the way many people feel. Let me, the designer, decide what things should look like and you, the browser, step aside so I can do my job.

To demonstrate we will be using the first chapter of Mary Shelly’s Frankenstein and three different interpretations of a CSS reset. Here is what the page looks like as rendered by Google Chrome and its stylesheet.


The HTML is simple and straightforward. A couple of headings and a series of paragraphs. Everything about the page, font, text color, background color, line height, heading size and weight are all set by the browser stylesheet.


The first reset we will use was designed by Vladimir Carrer back in 2010 and is a minimal approach to resetting the user-agent styles. It contains 5 declarations and modifies 18 elements, barely. Two of the declarations deal with tables and we aren’t using any tables.


The end result looks like this:


The primary things you will notice include the weight of the two headings has been returned to normal and the document margins and padding are set to zero. So little change it’s almost not noticeable. “I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.”  – Vladimir Carrer

The next reset was created by Russ Weakly back in 2010. It is a little more involved but still changes little within our document.


The end result looks like this:


The largest benefit to our document using this stylesheet is the elimination of margins from the top of headings and paragraphs. In essence what is left is “space-below” which makes it easier to control these elements.

The last reset we will investigate today is the shortest but involves the largest changes. It is mentioned in Jason Cranford Teague’s book CSS3. The premise is to reset the most important styles using the universal selector. It changes 10 properties on everything.


The end result looks like this:


It almost resembles a document with no tags, therefore, no styles. The thing to keep in mind here are the 10 properties that have been altered and what we want those new settings to be. A reset returns design control to our hands and that is generally what a designer wants.

This reset works well for small to mid-sized sites but can create a lot of work for large sites.

Is It Time for a New Browser?

viv_icon_256Microsoft_Edge_logo_256    logo256


When it comes to the topic of web browsers one phrase comes to mind, oh how the mighty have fallen. In the 23 years since the release of Mosaic, “the world’s first popular browser”, we have seen several major contenders rise to the top.

In 1994 the same people that developed Mosaic started a company named Netscape and released Netscape Navigator. Its growth was phenomenal as the popularity of the web was just taking off. Microsoft jumped on the band wagon in 1995 with Internet Explorer. During these early years Netscape dominated with as much as 90% of the market. Then and before you knew it the first browser war was being waged.

Microsoft bundled Internet Explorer with their Windows 98 operating system and said it was free which forced Netscape to stop charging for their browser. Within a matter of a couple of years the numbers were completely reversed and Internet Explorer had a 90+% market share.

Meanwhile in Norway a small browser named Opera was released in 1996. You’ve heard of it…right?

The two major players continued to battle it out when Apple decided it was time to introduce their own browser for their operating system. Safari made its debut in 2003 and was available for both Apple and Windows computers from 2007 until support for Windows was dropped in 2012.

Unfortunately neither Opera nor Safari seemed to be offering much competition to the now reigning browser, Internet Explorer. Quietly behind the scenes, Netscape had launched the Mozilla Foundation in order to introduce the open-source model to the world of browsers. It resulted in the release of Firefox in 2004. From the time of its release until its peak at about 28% in 2011 Firefox chipped away at Internet Explorer’s dominance.

Google, I assume you’ve heard of it, released Chrome in September of 2008. With chinks in its armor already showing from battling Firefox, Chrome piled on Internet Explorer as well. It probably didn’t help that Internet Explorer had been sitting on its browser duff and most web developers considered it to be a pain to work with. Oh yeah, and there were at least 4 different versions still being used.

Somewhere along in May of 2012 Chrome passed Internet Explorer as the top dog browser and as it continues to rise…Internet Explorer continues to fall.

So, the title of this article said something about a new browser. Truth be told we have several new choices.

If you have moved over to Windows 10 Internet Explorer is no longer installed by default. Microsoft’s new browser is called Edge and is a light-weight standards compliant application built on a new engine that has removed support for legacy technologies like ActiveX.

Pale Moon is an open source browser for usage on a Windows or Linux operating system.

“Pale Moon offers you a browsing experience in a browser completely built from its own, independently developed source that has been forked off from Firefox/Mozilla code, with carefully selected features and optimizations to improve the browser’s speed*, resource use, stability and user experience, while offering full customization and a growing collection of extensions and themes to make the browser truly your own.”

The newest of the new would be Vivaldi, released on April 6, 2016. Started by former Opera CEO Jon Stephenson von Tetzchner, it exists due to dissatisfaction with the direction Opera has chosen to move.

“Fast forward to 2015. The browser we once loved has changed its direction. Sadly, it is no longer serving its community of users and contributors — who helped build the browser in the first place.

So we came to a natural conclusion: we must make a new browser. A browser for ourselves and for our friends. A browser that is fast, but also a browser that is rich in functionality, highly flexible and puts the user first. A browser that is made for you.” – Jon Stephenson von Tetzchner

Exciting times are upon us again. Change is something we fight yet we fail to remember that change in inevitable. It was Netscape. It was Internet Explorer. It is Chrome. What’s next?

CSS3 Multiple Columns

Doing a basic web page text layout using more than one column has been much more of a chore than it ever should have been. In the early days of web design almost everything was built using tables. Actually tables inside tables inside tables. Along comes HTML 4.0 with its companion CSS but we still continued using tables. Why, because our browsers weren’t compliant.

It should have been easy because CSS introduced the float property. Take two div tags and float them side by side and we have the basic design concept of two columns. Eventually browsers did embrace CSS and what it offered but it still could have been easier.

Finally CSS3 has addressed the problem with a breakthrough simple solution. We now have a series of column properties that will allow us to divide our content into as many columns as we need.

Columns have been used in printing for a variety of reasons one of which is keeping text lines short enough to make reading easier. No long lines so you need your finger to trace down to the beginning of the next line. Lines of a length that we can read as a thought and not just a group of words.

That line length is generally considered to be between 65 and 90 characters. Taking that into consideration we can look at the first chapter of Mary Shelly’s Frankenstein laid out in full screen.


The html is simple and straight forward.


By adding just a few lines of code to our CSS file (still using the necessary browser prefixes) we can ask the browser to flow the text into as many columns as we need.


I have chosen to set the column width property but we could also have used column-count and set its value to 2, 3, 4 or however many columns necessary.


In a commented area about our section settings you can see the list of CSS3 column properties. Count, gap, rule, and width are the primary choices. Column-span would allow us to span the title across multiple columns. Time will tell how much longer we need to use the browser prefixes but as long as they are included multiple columns are finally easy to implement.

Cropping Images with CSS

There are times when you want to focus on a specific area of a photograph but don’t need a separate, cropped version of the picture. CSS offers an approach that will maintain the complete, original image but allow you to crop, mask, or clip your picture.

Let’s begin with a simple example. This page includes a full-size image of a young lady sipping a cold beverage on a beautiful spring day.


Using CSS3 Instead of JavaScript

CSS3 has been in development since 1998, that’s right, 1998. Both CSS1 and CSS2 became standards in quick succession, December of 1996 for CSS1, and May of 1998 for CSS2. One of the main differences between CSS3 and its predecessors is the use of documents or “modules” to contain different components of the specification. Some examples would include media queries, level 3 selectors, level 3 color, and multi-column layout. These modules progress at different rates and are largely dependent on browser support.

There are two specific modules we are going to take a look at today: transforms and transitions.

Transforms can be 2D or 3D and allow you to scale, rotate, move, or skew an object.

Transitions allow you to change properties smoothly from one value to another, over a measured duration.

These two modules in combination allow us to perform basic hover effects that in the past were only doable using JavaScript. The advantage of using CSS is twofold: less code, and slightly better performance since animating a transform occurs in the GPU.

If you are concerned about browser support we have included screen captures from All is well as long as your users/clients have progressed beyond IE9.



Our demonstration will begin with a simple list that will be styled to look like a couple of sticky notes.


To make our sticky notes appear to be hand written we would like to use a font that looks that way, hand written. CSS3 makes that easier now because of the addition of web-fonts. For years we were stuck using the same fonts over and over again. Now it’s as easy as going to Google Fonts, selecting something from their list of over 700 fonts, clicking the quick use button, copying a link and pasting it into the head of your web page. Just use the name of the font supplied by Google in your stylesheet and you are good to go.


We’ll also add a drop shadow to give a sense of dimension to our notes. You’ll notice a prefix being used for this code. With 5 browsers vying for your attention and each of them progressing at a different pace they have taken to using slightly different syntax. This prefix is necessary for a given browser in order for your style to work. Eventually all browsers will use a standardized syntax, but for the time being we will include the prefix to guarantee success.


With some basic styles in place our page should look like this.


Now we want our sticky notes to appear randomly placed which means they shouldn’t look straight or level. That’s where transform comes into play. We’ll take each note and rotate it and use relative positioning from CSS2 to move them up or down. We are also using the CSS3 pseudo class nth-child to select which list item we are styling.


Our page now looks like this.


The over-all effect we are looking for is a zoomed in, straightened view of our sticky note. To accomplish this we will use the CSS2 pseudo-class hover. It will allow us to scale our note using transform and then time and smooth that transformation using transition.




Preserving White Space Using CSS

We find it easy working with white space in today’s generation of applications. In word processing pressing the spacebar, tab key, enter, return, or even shift+ enter and what they deliver are all things we have grown to expect.

That isn’t the case when designing for the web. Some visual design programs handle basic white space issues like line breaks and paragraphs but the remainder of presentational formatting is left up to us. There is no HTML tab tag so we insert additional space characters. Without the space character (technically the non-breaking space character; &nbsp;) the browser will strip out the additional white space.

An approach that can make this easier is to use the CSS white-space property. It has 6 (six) values; normal, inherit, nowrap, pre, pre-line, and pre-wrap.


  • inherit – inherits it’s property from the parent container
  • normal – white space works as usual
  • nowrap – next will never wrap until it encounters a <br> tag, all other white space collapses as usual
  • pre – text acts like the HTML <pre> tag, formatting is as you see it, is as you type it
  • pre-line – text will collapse as usual, will break and wrap as necessary
  • pre-wrap – text is as you type it, will wrap and break as necessary




Browser support is full (Chrome, Firefox, Safari, Opera) as long as you are using IE 8 or later. It is part of the CSS1 specification.

10 Web Resources for Front End Developers

Things on the web move so fast they make the idea of “time flies” seem slow. The World Wide Web has been available to the public since 1991, 25 years this fall. Most people today couldn’t imagine life without the web.

Developers are faced with a tremendous challenge today. The web is a moving target. So much so that WHATWG (Web Hypertext Application Technology Working Group) has chosen to refer to HTML as a “living document”, meaning it is constantly being edited and updated.

This means the tools we use and the items we refer to change constantly as well. This list of 10 web resources includes sites I have used for years, and a couple I’ve just discovered. They range from color references to HTML references to best practices. Are they perfect…no. Are they all inclusive…no. But you gotta start somewhere!


If you’re designing for the web today you’re using HTML5. And if you’re using HTML5 you are still faced with browser compatibility issues. This site is a great location to determine what features are compatible with your users most commonly used browser(s).


Originally known as, is the one tool in this list I have used and referred people to the longest. It is a great color planning and utilization site. Others have come along but it is still my go-to color scheme planner.


This is one of those “others have come along” sites I just mentioned. It began as and has changed the kuler part to color (kuler is a Mauritian Creole word that means color). One of the benefits of this site are the thousands of color themes available.

HTML5 Cheat Sheet


The one page, downloadable reference to HTML5 tags. It is available as a PDF file or a .png file. Grab a copy and throw it in a centrally located folder so it’s there when you need it.


If content is king, typographic characters and correct grammar are important! A great reference for those who “get it” and for those who don’t. After all, according to Oliver Reichenstein, web design is 95% typography (please feel free to discuss among yourselves).


There seems to be a never ending array of JavaScript libraries and frameworks to deal with. As this site tells us it is the “definitive source of the best JavaScript libraries, frameworks, and plugins”. Check it out and put that statement to the test.


As browser compatibility improves there are times we can accomplish a lot with a little. A little JavaScript more specifically. There are times we don’t need to load an external resource to do something we can do in our own code. This site demonstrates many examples, from effects to events, proving that less can be more.


Since we were just talking about JavaScript, how ‘bout them regular expressions? Almost since day one, JavaScript has been used for form validation. IMHO it’s hard to beat the RegExp object for verifying the information supplied in a form is correct. This site has thousands of prebuilt expressions ready to use.


In case you didn’t get the concept I think regular expressions are powerful validation tools, here’s another resource. The last site had lots of code to use, this site has more information on the how-to part of things.


I mentioned best practices at the beginning of this post and this is one person’s interpretation. A series of recommendations dealing with content, presentation, and behaviors. (more…)