All Freeware

You may have previously used the W3C validator to validate your HTML; however, you may not be aware that it has been updated to have experimental support for the draft specification of HTML5.To validate your HTML, visit the W3C validator ( validator.w3.org ) and either validate by entering the direct URL of your site or paste the HTML of your site into the text area provided. Validation of HTML can be used: 1. As a debugging tool: The simplest bug to fix in HTML are those caused by writing invalid code. A simple validation should highlight problems with your HTML, which you can promptly fix. 2. To maintain quality of code: By ensuring code always passes the W3C validation , it maintains a level of quality in the code. 3. Ensuring ease of maintenance: Although invalid code may not break your site in the short term, unexpected bugs can crop up when you later amend that code, and validating helps minimize this.

With all these fantastic new features in HTML5, it can be disappointing to find not all of them play nice with the legacy browsers we are required to support. Thankfully, this is where polyfills come in. The term polyfill was first coined by Remy Sharp in 2009 when he was writing “Introducing HTML.” Remy stated “Shim, to me, meant a piece of code that you could add that would fix some functionality, but it would most often have its own API. I wanted something you could drop in and it would silently work.” http://remysharp.com/2010/10/08/what-is-a-polyfill/ . So as per Remy’s definition, a polyfill is a bit of code that simply adds the missing functionality to the browser, which is normally achieved using JavaScript. The term is not meant to implicate older browsers as often newer browsers also need to be polyfilled with the latest features. There are already a significant number of polyfills available for HTML5 technologies , some of the popular ones are: 1. Respond.js: ...

Another new meta tag that has been introduced is the Apple touch icon meta tag, which allows you to define icons that will be used on iOS when the user saves a web page to the home screen, as shown in the following example: <link rel="apple-apple-icon" href="apple-icon-iphone.png"> <link rel="apple-apple-icon" sizes="76x76" href="apple-icon-ipad.png"> <link rel="apple-apple-icon" sizes="120x120" href="apple-icon-iphone-retina.png"> <link rel="apple-apple-icon" sizes="152x152" href="apple-icon-ipad-retina.png"> Although not part of the HTML5 specs, these icons are necessary to allow iOS users to have a nice icon if they save the web site or web application to their home screen.

The most important of the new meta tags is the viewport meta tag. This meta tag was initially introduced by Mobile Safari and is used as a way to allow developers to define the width and the scaling of the viewport. When used incorrectly, the viewport meta tag can cause a terrible experience for users. The viewport meta tag content consists of a comma-separated list of key value pairs, the values that can be used are: 1. width :– The width of the viewport. 2. initial-scale : The scale of the site when it initially loads. 3. user-scalable : By default, the user can zoom the site, setting “user-scalable” to “no” disables this.        This is bad for the accessability of the site so it is discouraged. 4. maximum-scale : Allows you to define a maximum level that the user can zoom the site.Although not as bad as user-scalable, this can still be harmful to accessability.If you were to add this meta tag to a nonresponsive site, you would set the viewport meta...

When you first open an HTML5 document, the first thing you will notice is that there are many more semantic tags used throughout the document. The most notable ones are: 1. <article> : Defines an article. 2. <aside> : Defines content alongside the main content. 3. <figure> : Defines related content, an example of use is photos or code listings. 4. <figcaption> : Defines the caption for your <figure> element. 5. <header> : Defines a header for the document or section. 6. <footer> : Defines a footer for the document or section. 7. <nav> : Defines a series of links used for navigation around the site. 8. <section> : Defines a section of content. A simple example of how an HTML5 document may be laid out follows: <!DOCTYPE html> <html>                          <head>                  ...

The !DOCTYPE The doctype tells the browser how it should parse your document; as such, it is an important part of the document and it should be included in the first line of your HTML document. The previous doctype not only defined the document as HTML4, it also provided a URL to the specification document, as shown in this example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> The new HTML5 doctype is a lot simpler, and you no longer specify the version of HTML or the URL of the specification document, as shown in this example: <!DOCTYPE html> The reason for the change is that HTML is a living specification where browsers will continue new parts of the specifications as they pass through the standardization process. The idea is that in the future new features can be added without further changes to the doctype.

Getting Started with HTML5 Responsive design is built on top of the new technologies brought along with HTML5 and CSS3. Let’s look at the changes brought about by HTML5 so we can better understand the code we are writing. HTML5 is the draft specification for the newest version of the HTML language specification, which is agreed upon by the World Wide Web Consortium (W3C). The HTML5 specification is part of a larger set of technologies that the W3C terms the “open web platform,” which in a nutshell means it allows us to build web sites and web applications that work anywhere. When people refer to the term HTML5, they are normally talking about the “open web platform.” There are lots of benefits of using HTML5 with your projects, which I’ll discuss now. Accessibility HTML5 makes it a lot simpler to make your site accessible. The new HTML5 semantic tags allow screen readers to more easily identify types of content, and this allows them to provide a better experience for t...