The future of the web: HTML5 & CSS3, the place where dreams come true
I’ve built my first public website back in 1999. I was just getting to know my way around the internet and this was my first attempt in building a website. The first version of HTML – the code which provides the markup for most websites – was invented in 1991 by Tim Berners-Lee, one of the founders of the World Wide Web as we know it today. Since then, the way websites are built have changed a lot. Markup has been separated from design through the use of Cascading Stylesheets, CSS for short. We are now stuck with the latest versions of both; HTML5 and CSS3.
Web developers are lyric about them, because it makes their lives a lot easier. When first introduced, every item on a website had to be styled “by hand” through the use of parameters in the HTML-code. This is a time-consuming task and if something had to be changed, it had to be changed manually through the whole code. CSS made the difference. Style could be declared by the use of Cascading Stylesheets. By naming a specific tag in the corresponding stylesheet, all elements on that webpage could be styled by only one entry in the stylesheet.
HTML5: the future of the web
“Power to the browser” is the slogan that describes HTML5 quite good. Not all functionality on a website has to be dealt with on a server; the browser can provide specific functionality for a division of new elements on a website. These “tags” are more uniform and make more sense to humans as well as machines. An example would be the new tag for the site’s navigation, <nav>. This used to be something like <div id=”navigation”></div> for example. This also makes most new elements better optimized for search engines, since it knows what to expect within those tags. This also applies to some plug-ins, where the method of embedding a video usually consisted of a whole bunch of lines of code, consisting of tags and parameters, including a fallback method for browsers who did not support those lines of code. Now, we have <video>. That’s it. Another example is the drag-and-drop functionality. This was previously done using JavaScript, a layer of functionality added to a website by another programming language, providing mostly enhanced user interaction after the page is loaded. A demo of drag and drop in HTML5 can be found here.
CSS3: the place where dreams come true
The newest version of Cascading Stylesheets is CSS3. CSS3 provides new functionality where every developer has been dreaming of: easy font implementation, text effects, patterns, shadows, animations (fading, simple motion), rounded borders, multiple backgrounds and more. This could sound like nothing special to many not-developers, but take for example rounded corners. This just was not possible in any way, except for using images containing only one corner of the shape. Placing and positioning all the surrounding images was a crime, especially when the content of the shape had to be dynamic… Implementing special fonts on a website is made easy by the introduction of the font-face element, custom fonts can now be embedded in a website by using only one line of code. In the early days, these special fonts had to be images, created by some kind of design program. It was also impossible for search engines to “read” those images – text in images was invisible, thus withholding precious information about mostly headers and (menu-)buttons for being indexed by search engines. Shadows around object was also done using background images, this is now possible by using the box-shadow element in CSS.
General support and the lack of it
When new functionality is added to HTML and CSS, it has to be implemented by the major browsers. This is a paradox, however. New browsers are willing to implement new stuff if developers are using it, but developers are only willing to use it if the major browsers support it. This can be a problem for the early adopters in development world, but as this snowball effect slowly continues, both sides are starting to implement the new solutions in their systems. Internet Explorer falls hopelessly behind – as always – but Microsoft has made some big steps forward with IE9. See the list of compatibility of CSS3 elements here.
Are we going to use it or not?
While the paradox of development of new standards seems to hold us back, I think it is a good idea to support new development. This creates progress and support for more browsers and devices and overall generates more understanding in code for humans as well as for machines. The lack of support for some major HTML5 features can be overcome by using a little implemented script that detects support for HTML5 functionalities. It the check fails, it resorts to an older alternative. As a developer I can say I use most of the new CSS3 functionality on a regular basis, therefore providing support for browsers to implement all of the new standards out there. Plus, it makes my life way less frustrating, not having to provide background images for all corners of a rounded box, including semi-transparent images for background shadows.
For more information on HTML5, take a look at this introduction video below.
Sources
http://en.wikipedia.org/wiki/HTML#History
http://en.wikipedia.org/wiki/Tim_Berners-Lee
http://dret.typepad.com/dretblog/html5-api-overview.html
http://www.frankwatching.com/archive/2012/01/16/alles-wat-je-over-html5-css3-wil-weten-maar-nooit-durfde-vragen/
http://www.html5bot.com/2012/04/future-slogan-of-web-is-html5.html
http://www.css3.info/
http://www.w3schools.com/html/
http://html5demos.com/
http://caniuse.com/