HTML is the standard language used to build Web pages. It isn’t going anywhere, but some new technologies–such as HTML5 and CSS3–are already changing how you interact with Web sites. Here’s what these technologies are, what they can do, and why you should care.
HTML and CSS: The Basics
In the early days of the Internet, your tools for building a Web site were HTML and little else. But trying to design a site with nothing more than HTML can be tedious and limiting. This is where CSS comes in.
Cascading Style Sheets, also known as CSS, are files that tell the Web browser how to display an HTML page. Basically, the HTML page serves as the skeleton–the basic framework of a Web page–while the CSS document specifies how the specific elements of a page should look. CSS lets you control the fonts, font colors, background styles, and so forth, of an HTML page.
CSS makes it easier to design and build a Web site. Before CSS, you had to use HTML to specify how all individual headers and components of a page looked and acted. While there were ways around this, HTML was often misused and the web developer would have to go in and individually change every page element on every page. CSS made it drastically less complex and less time consuming to change the styles on a Web page; you could make the change to one document and apply the change across your entire site.
What’s Next: HTML5 and CSS3
HTML5 and CSS3 are the latest of markup programming. HTML5’s video element–which simplifies adding video to a Web page–has been getting all the attention, but HTML5 has many features that will put it ahead of the game and make it great for users and Web developers alike.
Flash-free Video and Animation
HTML5 will allow you to watch videos without using a plugin like Flash or Silverlight. .
So what’s the big deal with the new video feature of HTML5? Well for one, it’s free to use and doesn’t require the Adobe Flash plugin. Second, Flash may slow down your computer (though the hardware-accelerated Flash 10.1–now in beta–should help matters, and Flash’s impact will depend on your hardware and OS); it’s one more piece of software running and eating up system resources, after all. With HTML5, the video feature is built right in.
This new video feature of course will be of great help to Apple iPhone users, because Apple pretty much refuses to let any of its control over the iPhones be turned over to another application (this type of control is normally known as an absolute monarchy). But hopefully HTML5 will be beneficial to Blackberry phones as well, most of which are not able to support flash. In fact, Apple’s pushing HTML5 video so much that they have a page highlighting so-called “iPad-ready” Web sites.
One important thing to note about HTML5 video is that it’s still in flux. For example, Safari, Chrome, and the upcoming Internet Exporer 9 will support embedded HTML5 video that uses the H.264 format. Firefox, on the other hand, only currently supports HTML5 video that uses the Ogg Vorbis format; the folks behind Firefox claim that H.264’s closed-source nature could cause problems with licensing in the future, so it may be a little while before the dust settles here.
Also, HTML5 and CSS3 will make it easier for Web designers to create animations and interactive games without a single bit of Flash. For some great examples of what you can do with HTML5, CSS3, and a little help from JavaScript, see Akihabara Games and this animated Star Wars AT-AT Walker. Design Shack has several other CSS3 animation examples too.
It isn’t going to entirely replace Flash just yet, but there’s tons of promise for HTML5 and CSS3 on this front.
Offline Storage: Web Apps Take the Next Step
Web apps are becoming increasingly sophisticated, and some new features in HTML5 will help them continue to improve. HTML5 gives Web apps the ability to store information and Internet utilities for use when you’re offline. This feature will allow you to store and access data like e-mails, calendars, and other utilities through Web apps, even when you’re offline, making Web apps that much better and more useful.
When you log back online these apps will load faster because the structure of the page will already be saved in your browser’s cache. In theory, any changes you made to the Web app while offline should remain when you log back on.
With the offline storage feature you should be able to specify in the browser which sites or types of sites you want the browser to continually cache without individually saving each page; in other words, in the past you would have to “File—Save As” any page that you wished to save while offline—using the new system you will be able to set your browser to automatically save a certain type of pages (perhaps all belonging to one Web site, for example).
This will also speed up loading time when you are online because part of the page will already be in memory, so you won’t have to wait for the entire page to refresh.
Google announced in December that it will begin utilizing HTML5 in its Web apps, instead of its own Google Gears framework.
New Design Tools
HTML5 and CSS3 also makes for more attractive Web apps and sites. HTML5 has newly added features which make Web application building much easier and easily more tailored. Some examples are more color and gradient support, shadowing, rounded corners (instead of forcing Web designers to use images to mimic rounded corners), and of course, offline storage. These all make for a more pleasant looking Web page, and something closer to what the creator originally had in mind.
The State of HTML5 Compatibility
The current version of Internet Explorer, IE 8, had very limited HTML5 support, however, IE 9 will support h.264 video, embedded audio (no plug-in required!), scalable vector graphics, and CSS3.
Also, HTML5 is still in “working draft” stage; even though some of the technolgy is making it into browsers and Web pages now, it’ll still be a while until the specification is finalized.
HTML5 and CSS3–combined with other Web technologies like JavaScript–can be very useful for the style, format and operating speed of any Web page if used correctly. The two languages will revolutionize the way we program and view the internet do to their advanced all-in-one features which can remove the use of many third party applications (like Flash).
This is only a fraction of what HTML5 and CSS3 has to offer. For more technical information on both see the World-Wide Web Consortium’s HTML5 and CSS3 overviews.
Geek 101 is a periodic series that makes sense of complex technologies, so you don’t have to be an expert to understand them. Is there a topic you’d like us to cover in a Geek 101 story? Post a comment below!
Follow GeekTech on Twitter or Facebook.