In this article, we will discuss HTML 5 design principles and some myths about HTML 5 somehow you heard around.

As we know everything around us has built or created with some standards and they have own design as developed by own design principles. The meaning of design principles has represented some set of rules or protocols which are kept in your mind while design or build your appliances. Here HTML 5 has also some design principle which is satisfied by HTML 5 markup language structure.

HTML 5 Design Principles

HTML 5 design principles are focused on four area of language:

  1. Compatibility
  2. Utility
  3. Interoperability
  4. Accessibility

Compatibility

In the compatibility, principles are designed for “How new HTML 5 is compatible with previous standards?” and new design principles are “how comfortable with old contents?”.

These are the important design Principles:

  • Support Existing Contents

The basic structure of computer language is new standards should compatible for old, so we can reuse after a minor modification.

HTML 5 standards also support old HTML content and we can migrate those content in HTML 5 design pattern after a small modification.

It should be possible to process existing HTML documents as HTML5 and get results that are compatible with the existing expectations of users and authors, based on the behavior of existing browsers.

                                                                                                                [source: Beginning HTML5 and CSS3: The Web Evolved]

                When considering changes to legacy features or behaviour, relative to current implementations and author expectations, the following questions should be considered:

  • Does a significant quantity of existing content depend on the feature or behaviour?
  • Does any of the dependent content occur on particularly popular websites?
  • Is the dependent content genuinely intended for consumption, rather than occurring solely in test cases or examples?
  • Is the dependent content on the public web, rather than found solely on internal sites with a controlled user environment?
  • Does the dependent content currently work as intended in multiple popular user agents, rather than explicitly targeting only one particular user agent, or only very old or otherwise unpopular ones?

[source: www.w3.org]

  • Degrading gracefully

The new version of application supports with an older version of the client is very important. Here if author designing the page according to new HTML 5 standards and it is not supported by the old versions of browsers that it is not wrathful and very difficult to manage it.

HTML5 … should be designed so that web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.

                                                                                                                [source: Beginning HTML5 and CSS3: The Web Evolved]

It is highly likely that content authors will find it important to target these categories:

  • Current versions of the top mainstream Web browsers.
  • Highly popular older versions of mainstream Web browsers.
  • The top user agents designed to meet specific needs or address specialised markets, such as assistive technologies, mobile browsers or user agents targeting less typical media such as text-only terminals or print.

[source: www.w3.org]

  • Do not reinvent the wheel

If new technologies are already in use by separate client side and invented to use on a wide area, then no need to reinvent same technologies.

If there is already a widely used and implemented technology covering particular use cases, consider specifying that technology in preference to inventing something new for the same purpose. Sometimes, though, new use cases may call for a new approach instead of more extensions on an old approach.

contenteditable=”” was already used and implemented by user agents. No need to invent a new feature.

[source: www.w3.org]

  • Pave the Cowpaths

If the path of working is already widespread among the authors, it better to work with it and try to invent something new and replace it.

  • Evolution Not Revolution

Always try to develop the technologies which are extendible with old technology. It is not good to make new technology with new model and old models are waist, in this case, our authors can use the reuse property of development and it gets a long time to develop and at the time of release new appliances, old appliances are a waste.

Revolutions sometimes change the world to the better. Most often, however, it is better to evolve an existing design rather than throwing it away. This way, authors don’t have to learn new models and content will live longer.

[source: www.w3.org]

Utility

The above design principles make sure to HTML can be used for below purpose:

  • Solve real Problems

The new changes in the spec should solve real world problems. Abstract design and architecture which are less relevant for existing needs are not good for changes.

  • Priority of Constituencies

To develop existing solution and choosing design principles or standards we should use the cases on a priority basis like in general scenario we always giving high priority to users than authors. We need to consider the principles by using those principles decrease the difficulties level and cost for users rather than authors.

  • Secure by Design

To use the design principles we need to make sure it will work with security model of the web.

  • Separation of Concerns

HTML architecture should allow separation of content and presentation. Defining reasonable default presentation for different media may be sufficient

Interoperability

Above design principles exist to improve the HTML implementation:

  • Well-defined Behavior

It allows to clearly defining the contents behaviour.

  • Avoid Needless complexity

Simply avoid the complex structure and use simple whenever possible. Simple structures are very easy to understand and implement for clients.

  • Handles Errors

This is the best properties for code education, error handling should enable so we can debug the problems when errors are coming.

Accessibility

Always try to design the features for universal access, means anyone can access with any device with same effects.

  • Media Independence

Design features should be media independent, means to display the media on the web is equivalent for any platform with the basic requirement.

  • Support World Languages

Featured contents should support worldwide languages, so people can access and use from any corner of the globe.

There are lots of features in new HTML 5 markup language and you can get the better idea about the HTML 5 design principles at www.w3.org.

Myths about HTML 5 on The Web

As there are unlimited features in HTML 5, there are some myths about HTML 5 is also spread in the market and I’ll try to cover most from them here.

  1. Browsers don’t support HTML 5

This is one of the misconceptions about HTML 5, Browsers supports exist and HTML 5 is fully supported with Browsers.

  1. Most browsers may support HTML 5 but IE surely doesn’t.

Unfortunately, this is not true, IE 9 and IE10 released with most of the HTML 5 tag supports and it comes in 2010. So, we can say confidently IE is supporting HTML 5.

  1. HTML 5 won’t be finished until 2022.

Again, not true. The mythical date of 2022, taken from an Ian Hickson interview is for a final Proposed Recommendation status.

But it is false and we are using HTML5 today.

You can find a more related source at Wired.

  1. Now I have to relearn everything.

It is not true, as you can learn HTML 5, there are not that many changes. We are using old HTML tags here also implemented some new HTML 5 tags.

  1. HTML 5 uses presentational elements.

You might get this is correct at your first glance but it is not true. For example, HTML 5 has elements like <small>, which is previously used as presentational (means display this at a small size) but now it is a semantic element which is represented “small print”.

  1. HTML 5 is a return to tag soup.

No, HTML 5 has new semantic elements that will allow streamlining our markup further.

  1. HTML 5 kills accessibility kittens.

This is just a Nonsense statement. HTML 5 allows authors to write globally accessible markup text in the same way as HTML 4 always did.

  1. Flash is dead.

Not exactly, it is true technologies are growing day by day and HTML 5 providing the same functionality to play video as the flash was. But it still supporting flash also.

  1. HTML 5 will break the Web.

HTML 5 is fully backwards compatible and it supports all previously used tags. So, there is no chance to braking content over the web.

  1. HTML 5 developments are controlled by browser vendors.

This is another false statement. The WHATWG was established by browser vendors and the process of agreeing on the development of HTML 5 is open to all. So, yes browser vendors are involved rapidly, but everyone can say you included.

  1. HTML 5 includes CSS3, Geolocation, SVG, and every other modern technology under the sun.

No, this is another myth. CSS3, Geolocation, SVG and other popular technologies are not included in HTML 5. HTML5 is the extended feature version of HTML and still we are using other technologies with HTML 5 as we were using previous days.

  1. So when can I start using HTML 5?

This is an interesting question, and peoples are still worried to use HTML 5 and confused also like HTML 5 is released or not.

The answer to this question is my friend you can use HTML 5 from Right now. Forget about all myths, HTML 5 is successful released and you are free to use it.

Now, you are familiar with HTML5 design principles and Myths to move your ideas forward with HTML5 design to attractive web pages.

Here we listed few of the better books for learning HTML development:

Beginning HTML5 and CSS3: The Web Evolved
Professional HTML5 Mobile Game Development (Wrox Programmer to Programmer)
Web Design with HTML & CSS3 (Shelly Cashman)
HTML5 Digital Classroom: (Book and Video Training)
Web Design with HTML & CSS3: Comprehensive (Shelly Cashman)
HTML 5 CSS Illustrated Introductory (Illustrated Series)
HTML5 for Masterminds
Html5, Css3, Javascript, Jquery Mobile Programming: Beginning to End Cross-platform App Design
HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL
HTML5 and CSS3 2e

Note: If you fill some special tutorial requirement for any topic or subject related to programming, you can request for a tutorial article by using Tutorial Request option.