HTML5 is the newest version of HTML, or hypertext markup language, which shapes the content of almost every website found on the Internet. HTML5, which replaces HTML4, brings new features and functionality to websites. One of the main advantages of HTML5 is that it does not require the installation of plug-ins in order to play multi-media like video or audio files.
Since Apple devices (iPhones, iPads) do not support Flash, HTML5 is becoming the most popular method to design websites that deliver multi-media to audiences. Safari, Google Chrome and Mozilla Firefox support HTML5, and websites like The New York Times, CNN and CBS are making extensive use of the newest version of to deliver multi-media content.
Companies with an HTML5 website have a competitive advantage over Flash. The key benefit of HTML5 is its ability to use native browser functionality rather than depend on scripts or plug-ins to provide a better user experience.
Best Practices for Designing a Website with HTML5
HTML5 is a straightforward and simplified language for creating websites. Following these guidelines will ensure high-quality mark-up that produces the best possible design for your website:
- Use a framework for efficient workflow and consistent results. HTML5 offers frameworks for developers to build projects on consistently formatted codes. These templates include a HTML5 document and a CSS3 style sheet with easy drag and drop functionalities for arranging layouts and adding widgets. HTML5 makes it easy to add audio, video, slideshows, forms and much more.
- Design for performance, keeping bandwidth and connectivity issues in mind, especially for websites to be viewed on mobiles devices. The first step in optimizing performance is to minimize and combine the code into as few files as possible for faster download.
- When writing the mark-up, the best practices for HTML4 still carry over to HTML5. These factors have not changed:
- Use lower-case mark-up
- Enclose attributes in quotes
- Close all tags
However, a few features are no longer used:
- Never use <i> and <b> as they have been removed from HTML5
- Use paragraphs <p> instead of </br> to arrange content on new lines
- Avoid <em> and <strong> when styling content
- Keep 99 percent of your design in the style sheets. It is much easier to maintain a website with mark-up that is written to be style-independent. For example, switching the color of a website could require multiple, tedious changes in HTML, but require just one change in CSS. The beauty of HTML5 and CSS3 is that it presents a new way of creating visual information for the web.
- HTML5 is designed to be backward compatible, meaning it works on all current browsers like Firefox, Chrome and Opera, as well as mobile browsers and Internet Explorer 9. It is always a good idea to test on different browsers to ensure compatibility.
Blue Interactive Agency designs custom HTML5 websites to help companies deliver a better user experience. We test our websites on multiple browsers to ensure compatibility.
For more information on HTML5, see HTML5 Website Development.