What is HTML5?

HTML5 is the latest version of Hyper-Text Markup Language (HTML) since HTML4 which was implemented in 1997. HTML5 is a long awaited improvement which is still under development. This version of HTML will help create a consistent web experience no matter the browser or device. With the new tags that can be integrated in HTML5. This will make downloading 3rd party applications (like Flash and Quicktime Player, etc.) a thing of the past, due to the ability to embed elements directly into the HTML with the use of a <video> tag.

+Positives:

1. “Simpler” coding, with tags like <header> and <article>.
2. More secure downloading.
3. The ability to retrieve information through your cache
4. Will increase productivity, save time and create a universal web experience.

-Negatives:

1. It hasn’t been integrated to all modern browsers to-date
2. Doesn’t follow a specific rule of semantics.
3. Still isn’t fully developed and valid through all modern browsers (expected to be sometime in 2015).

20 Things I Learned

This site gives a broad look into how the web works and components that we use in our everyday web browsing. One of the topics is HTML5, which is coincidentally the fifth topic on the list. It goes on to explain how HTML5 will change the way we use the internet and how we as designers can benefit when trying to create engaging and interactive sites. This article touches on the subject of the new video tag (<video>), which will make downloading and installing additional software obsolete. No longer will users be forced to update to a new version of Flash to watch the latest viral video, but instead will be retrieved through the server. This will allow for more secure downloads and faster streaming.

A List Apart

This post helps us to understand how HTML5 differs from the well known XHTML 1.o/1.1 and HTML4. These versions of HTML follow guidelines and rules known as SGML and XML. This forces designers to put attribute values in quotation marks and apply end tags to all elements used. Without these, your CSS and HTML will render as invalid. HTML5 is cut from a different cloth since it doesn’t follow any particular “rulebook” and can be written either way. As a rule-of-thumb the author suggests writing in XHTML5 to keep with good semantic practices.

Some of HTML5’s new interactive features include a simpler way of incorporating forms and SVG (Scalable Vector Graphics), which can be created only on a <canvas> and styled by using JavaScript.

HTML5 Doctor

The integration of CSS3 and HTML5 will be a popular topic among developers for the upcoming years. This article helps explain some of the technical coding for forms in HTML5 to create more visually expressive forms by using CSS3. These small details will help developers and designers to simplify complicated forms, creating a more user friendly experience. The use of :valid and :invalid pseudo classes is shown in the example below.

HTML5 Site

Critique

I decided to take a look at the Prius Projects site. This site incorporates some of the new HTML5 tags and some jQuery effects. The simple and fun to navigate. The color scheme works well with the feeling that Toyota has been associating with its Prius models. The use of time lines and colors to signify the different sub categories helps to navigate the site even though there really isn’t a lot of content. The site uses jQuery sliders and transitions to make the interaction between the user and the site more and enjoyable and engaging.

The site uses 3 styles of navigation which include the usual inline elements, a click-able time line, and arrows which have a fixed position at either side of the browser window. These use jQuery to follow the selector when they reach a certain point at the far left or right of the window.

Through the browsers

The use of HTML5 is really only visible when viewing the code. The site uses some of the new tags, which have been implemented by HTML5, such as the <nav>, <section>, <mark>, and <footer> tag. When viewed through Chrome, Firefox, Safari, and iE the pages layout stays the same. The changes come when the browser has to respond to the user, which isn’t a problem for any of them except of course iE. It’s in iE that we see choppy reactions compared to the other browsers who show smooth transitions. Since the site only uses the new tags and doesn’t include any complicated forms or 3D transforming, all of the browsers are able to render the site consistently. These small details are evidence of the incorporation of HTML5 markup.