Web design and development is a constantly growing industry with ongoing innovation, evolution, and customization. But the focus is typically on design concepts and server-side development such as the server, platform, framework, and management systems such as a CMS or like WordPress. At the end of every server-side platform or content management system, they all output in a language known as HTML. We have added a lot to HTML like XML, CSS, and JavaScript but it has been roughly ten years since any major upgrade has been made in HTML.
The HTML5 project has been in development since 2003-2004 with the collaboration of Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C). It wasn’t until last year when Steve Jobs, Apple Inc.’s CEO, published a letter titled “Thoughts on Flash” in which he concludes that with the development of HTML5, Adobe Flash is no longer necessary for video or any web content. Support for HTML5 by major browsers and web developers is rapidly growing as they look forward to the new standards and implementation of their content.
So, what is new in HTML5?
For many years, developers have figured out how to pull most of this added functionality using advanced JavaScript, ActionScript, Flash, and other libraries. Below I have a list of features added and changed in HTML.
canvas
canvas is an added HTML tag that gives developers a 2D drawing area (others dimensions may be forthcoming). You can use this for a wide variety of ways such as graphs, games, presentations, etc. The canvas is controlled by JavaScript.
video
The video tag is a new HTML tag for displaying video. The video tag is like the img tag and has specific arguments for displaying the video.
audio
The audio tag is very similar to the audio tag but it’s for audio only.
• Context menus
– Show quoted text –
HTML5 provides a method of defining context menus, making it easier to use these in web application development. This may not so useful for websites, but certainly for applications where context menus could provide a raft of options without taking up space in the UI.
• New structural elements
HTML5 added structured elements where past HTML versions had little to no structuring in elements. Here are a few:
•
section -A section, or section of a chapter of text, or a book.
•
header – The page header. This is not the same as the head element.
•
footer – The footer of the page. Typically where all the legal crapola goes.
•
nav – Navigation links to other pages. You could put your websites navigation in this for example.
•
article – A blog article could be encapsulated by this for example.
•
aside – The aside tag can be used to provide extra information for a block of text. Much like sidebar material in books etc.
•
figure – The
figure element can be used to annotate your main text with diagrams, which aren’t necessarily imperative to the text.
• New Inline Elements
HTML5 added new basic elements such as times or numbers
• mark – This denotes that a bit of text is marked in some way. You could for example, use this to mark search terms in a list of results.
• time – You can use this to represent times or dates in your block of text.
• meter – This can be used to indicate a figure of some sort. It can have multiple attributes including: value, min, max, low, high and optimum.
•
progress – This can be used to show a progress bar of some sort. It has a couple of attributes: value and max. The max attribute can be omitted.
New Form Input Types
HTML5 added new and exciting input types for forms. A lot of these elements are already common but now they are more easily implemented. These input types include:
• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• email
• url
Dropped Elements
The following elements have been dropped and not supported by HTML5:
• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• isindex
• noframes
• noscript
• s
• strike
• tt
• u
• Charset Change ( Character encoding syntax )
The character encoding syntax for an HTML5 document is now: meta charset=”UTF-8″
• New interactive elements
These are more features that will be more beneficial for application development but could still be used for web design.
•
details – This would be an element used to add additional information to an element. I can see this most commonly used for tooltips.
• datagrid – This is and will be the replacement of tables in applications. This is a form of rows in a data list. For example selecting rows or columns, editing data, sorting and generally interacting with the data in the client.
•
menu – Previously a deprecated element,
menu is back in HTML5 with a new meaning. It can now contain command elements which cause a particular action to happen. For example you could use this element to provide a toolbar, or a context menu (see above). It can have label and icon attributes. They can be nested to provide multiple levels of menus.
• New Document Type Definition ( DTD )
HTML5 has a new, much simpler DTD: !doctype html
This is much nicer, clean, and far more memorable. As I understand it, this results from HTML not being associated with Standard Generalized Markup Language ( SGML ) any more.
• href is now optional
href in anchor tags is now optional as links can be used in conjunction with scripting. Perhaps more useful in web applications as opposed to web sites.
• The async attribute
This stipulates that a block of script can be executed asynchronously, instead of blocking the rest of the page until it’s finished.
HTML5 Changing Web Design and the Entire Web Experience
I came to the conclusion several years ago that web application development will change the face of the web. More people are building and designing sites with application usability in mind. HTML5 has been pushed by application developers to innovate the web and make HTML for application and user experience minded. For years, developers have been using tags unconventionally to develop the experience needed for their application or web site. We have been over-using the listed elements and div tags where we found little formality, conventions, and structure in our HTML besides of course our ids and classes. I am very much looking forward to the cross-browser support offered by the new HTML5 changes and innovations.
So, the time has finally arrived and we have been waiting for this upgrade for years. But don’t get too excited because we all know that not all browsers will support every feature, such as the overwhelmingly hated MSIE. Most browsers already support some of the specification, and some have for quite a while now. An example of this is canvas, supported by Firefox, Opera, Chrome and Safari. AFAIK Firefox 3.1 will support more of it, namely the audio and/or the video tags. The team at Fahrenheit Marketing looks forward to transitioning to development in HTML5 in the near future. I look forward being part of the unfolding innovation to come.
HTML5 and The Evolution of Web Design and Development
