loading...
blog Thoughts, updates, and advice...

Get Fluent in the Web - HTML5

Learn to speak our language!

Get Fluent in the Web - HTML5

Posted January 21, 2014

So you are thinking about getting on-board this new-fangled World Wide Web thing and getting a website of your own. Sometimes the web can seem like a scary place, and it doesn't help when your guides are throwing out crazy acronyms and buzzwords you've never heard of!

HTML5Cross-browser compatibilitySSL! AJAX! What does it mean? What do you really need, and what do you really need to know?

 Hopefully this series will give you an idea of what these terms mean, and help you go into your meetings with your web developer as an informed client.

HTML5
HTML stands for HyperText Markup Language. This is the language that ALL websites are built in. Being a "markup language" means that an HTML file is basically the text of your website peppered with markup "tags" that explain to the machine what each part is supposed to be.

You could imagine these HTML files like an instruction manual for your web browser, teaching it how it should put together the web page you see on your screen. For example, if you wanted some text to be designated as a top-level header, you would surround that text with tags like this: <h1>Your header here</h1>. The web browser would see those <h1> tags, and realize that those words inside need to be treated a little differently.

If you want to see what the web browser sees when it visits a web site, each browser has a way to view the source code so you can see the raw HTML - basically you will just see a page full of text surrounded by tags in <> brackets that give the site shape and structure.

HTML is also designed to have an emphasis on linking together different files, resources, and sites - this is where we get the "HyperText" part of the name, and why there is such an emphasis on links in web pages.

Since web technology has been changing rapidly (just compare a website today from a typical website 15 years ago in 1998), HTML has changed as well. An organization called the World Wide Web Consortium, or W3C, publishes standards that define what should be in HTML and how it should be used. The most recent of these standards is HTML5, published in 2008 and updated in 2011.

So, when you see a developer or a site advertising that they use HTML5, what they are really saying is that they are staying in touch with the most recent standards of the web. Although this is a great (and necessary) thing, there can be some downsides if your developer focuses on the newest technology at the expense of usability. Because HTML5 is a new standard, there are currently no web browsers that are compatible with all the new changes, and many changes are only compatible with some browsers. If your developer is only concerned about advertising that they use HTML5 and not about working for all browsers, many parts of your site might not work for all of the people who visit it.

Cross-browser compatibility
A web browser is a computer program that can read and interpret HTML and web pages. They are how you visit webpages, and it is what you are using to read this post now. There are currenly five major browser programs in use: Internet Explorer (which comes included in Windows), Safari (which comes included with Mac OS), Chrome, Firefox, and Opera. Additionally, there are a multitude of different browsers for mobile and tablet devices, although modified versions of Safari and Firefox are most common. 

When you visit a webpage, what you are actually doing is temporarily downloading a collection of files that make up the content of that site, and then your web browser is following the instructions in those files to put the site together for you. If the HTML file is the instruction manual, then you can think of your web browser as a butler you use to buy you furniture (the website) - you tell him what you want and he orders it. When it arrives disassembled in the mail, he follows the instructions to put it together and then presents it to you.

The problem is that each web browser follows instructions a little differently, so the same website can look very different on different browsers. Internet Explorer in particular tends to have very different ways of interpreting the same code, which is all the more frustrating because it is the default browser on all Windows-based PCs, and often those users aren't aware that there are other web browsers they can download and use for free. 

This problem gets even worse when you factor in out-of-date web browsers. Although the current version of Internet Explorer is 11, at the time of this writing almost 8% of web users in the United States are still using Internet Explorer 8 or older (which have major compatibility issues with HTML5). These outdated browsers often require special coding to get sites working on them, and they can be a major source of headaches for developers.

This is where cross-browser compatibility comes in. Since these different browsers (and especially the older browsers) view things in different ways, then extra work is required to get a website to act and appear consistently on all browsers. Sometimes, this is as simple as making sure you follow good coding practices, and nothing more is required. Other times, there are important parts of the site that simply don't work in some browsers, and significant time is required for figuring out special solutions for certain browsers. So, when a developer talks about cross-browser compatibility, they are talking about the extra work required to get a site working the same (or nearly the same) on all common browsers.

A good suggestion we would make to all of our clients would be to think about who their target audience is and what type of computers they would expect them to use. Internet Explorer 6 and 7 are both pretty uncommon now, and likely the only people who use them are those who either have an older computer or are not comfortable enough with computers to change their browser. Is that audience significant enough to you for the extra cost of making your site compatible for those browsers, or would you rather put those funds towards making the site compatible with mobile devices and tablets?

An excellent site that displays current broswer usage is StatCounter - it breaks down what browsers are being used over time across different countries. Another great tool is Google Analytics, which can easily be added to the code of a current website. You can then view detailed data about who is visiting your website, including what kind of browser they are using.

Hopefully this helps clear up some of these terms. If you have any suggestions for terms you'd like to have explained in future articles, just drop us a line at hello@joustmultimedia.com!

Written By:

Steven Riche

Steven Riche
Lead Developer
View Other Entries

Get Social

Tags

Recent Blog Entries

Steven Riche

Get Fluent in the Web - HTML5

So you are thinking about getting on-board this new-fangled World Wi ...

Steven Riche

Image Cutter

Image Cutter is a javascript plug-in that creates a user-interface f ...

Steven Riche

JS Animation that Works

HTML is the language the web is built in, and it is kind of a strang ...

Charlotte Katelyn

The Personality of Color

Every color has a personality. So before you start just picking what ...

Charlotte Katelyn

The Art of Combining Fonts

So you've found the font for your design. It's perfect. The ...

Return to Blog Menu