All Freeware

A web page consists of markup—HTML ( HyperText Markup Language ) that describes the meaning of the content on the page—and CSS (Cascading Style Sheets) that tell the browser how the content should be displayed in browsers and other user agents that need to display it. CSS tells the browser everything from the layout of the page to the colors of your headings. CSS3 is the latest version of the CSS specification. The term “CSS3” is not just a reference to the new features in CSS, but the third level in the progress of the  CSS specification . CSS3 contains just about everything that’s included in CSS2.1 (the previous version of the specification). It also adds new features to help developers solve a number of problems without the need for non-semantic markup, complex scripting, or extra images. Features that are included in CSS3 include support for additional selectors, drop shadows, rounded corners, multiple backgrounds, animation, transparency, and much more. Importanc

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 tag to have a sens

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>                                        <title>Title</title>                          </head> <body>

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.