Pages Menu
Categories Menu

Understanding HTML5 and CSS3

Understanding HTML5 and CSS3

For the past year or so, companies that use the internet for sales, products, or services are aglow with conversations of HTML5 and CSS3 and how it will save the world! Well, it will certainly help your browsing experience be more useful and be a little less work for coders, but it takes content to save the world.

HTML5 is still going through standardization as there are so many browsers and devices, the W3C (World Wide Web Consortium – the group who helps make standard for the internet) is still tweaking HTML5 definitions. For now, HTML4 remains the current standard of internet pages, standardized in 1997. HTML5 has been in the works since 2004, and the W3C hopes to have it released in 2012. There is a lot to this to be sure!

The goal for HTML5 is to pull current web technologies into one standard, including HTML4, XHTML1 (HTML with XML), DOM2HTML (document object model HTML), and some JavaScript. Just don’t forget that most users don’t have HTML5-ready browsers, so there is a very good chance that you’ll have to make your content work for both (doubling your work) if HTML5 is what you want.

First, let’s look at some of the key benefits of HTML5 compared to HTML4. Since most of the inner-workings of HTML code is just Greek to most folks, we won’t delve into the specifics of each of the new elements added to HTML5, but here is the list some of them:

article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, and wbr

If you have ever worked with a blog such as WordPress or Blogger, you may recognize some of the page elements above that you are familiar with.

Of all the new elements that are listed above, some of the most talked about are these:

  • article – an independent piece of content in a document
  • audio and video are less dependent, sometimes not dependent, on plug-ins to play multi-media content in HTML5
  • canvas – probably one of the most talked-about element in HTML5, it is used to render dynamic bitmap graphics on the fly in graphs or games through the use of JavaScript and other dynamic content tools
  • footer, header, and nav – all the regions of a page typically coded in most sites, but especially in blog sites

There are also many new APIs for HTML5 that were not part of HTML4 making using, playing, watching, and interacting with web content a little easier for web servers, computers, and users alike.

Many new mobile devices such as the Apple iPad are using HTML5, as are other desktop browsers, but none fully utilize HTML5 – yet. Currently the top contenders for the use of HTML5 according to HTML 5 Test website are the following (scores indicated out of a possible of 400 points each):

  1. Google Chrome v10.0.648 – 288 points
  2. Opera v11.10 – 258 points
  3. Mozilla Firefox v4.0 – 255 points
  4. Apple Safari v5.0.3 – 228 points
  5. Microsoft Internet Explorer v9 – 130 points

Browsers are working hard to adopt these new standards, and often standards change as challenges for global implementation arise.

While HTML5 offers some great ways to use JavaScript and built-in processes to provide content a bit faster and with less reliance on plug-ins and add-ons, the changes to CSS3 are substantial too! While changes to how a page displays has been controlled by CSS (cascading style sheets) for over a decade, the slow adoption in consistent support of CSS styles has made it tough on users and developers alike.

While you have been able to add rounded corners, drop-shadows, and gradients to pages with CSS for some time, some of the most prominent browsers (cough, cough, IE) have not provided support for many ‘standard’ CSS rules. So developers often have to write separate style rules for specific browsers. Been there, done that, don’t want more of it!

In addition to rounded corners on an HTML page, CSS can now rotate content, it can change the opacity of a page element with RGBA (RGB for colors: RED, GREEN, and BLUE, and A for “alpha” or transparency). So you don’t have to use a semi-opaque PNG file to fill a DIV, but you can just say ‘make this DIV 50% transparent’. SO much easier!

Below is a screen capture from CSS3PIE. They offer tools to allow Internet Explorer to support standards-based applications of CSS. Normally getting IE to render CSS consistent with other browsers is a wash.

The sample below shows some cool CSS3 style examples you might like using on your own site! Note the redundancies in the CSS code below the sample. You’ll see how browsers ‘see’ the styles are NOT the same (click image for a larger view)…

CSS3 Sample Pie Tool Example

  • BORDER-RADIUS: is the new CSS3 definition for HTML5 documents to display rounded corners on DIVs.
  • WEBKIT-BORDER-RADIUS: is now Apple’s Safari browser and Google Chrome recognize rounded corners.
  • MOZ-BORDER-RADIUS: tells Mozilla and Gecko how to display rounded corners

So as you see, making all browsers play the same game with HTML and CSS styles could really improve our lives, both in time saved making pages online, and time reduced viewing content. But it may not save the world…