HTML5 is the latest version of HTML or Hypertext Markup Language. It is currently only fully supported by a handful of browsers but the next year should see a large increase in usage. It isn’t expected to be completed until 2014, but the features that are available now are a great way to become acquainted with HTML5 and add some cool elements to your website.Steve Jobs famously refuses to allow Flash on the iOS due to the many bugs and crashes it experiences, therefore, learning how to use the more intricate features of HTML5 is going to be a must for those who want to develop apps and iOS-friendly websites. With Google rolling out an HTML5-friendly version of YouTube, many developers are starting to see how important this system will become in the near future. However, with Firefox resisting some of the advent of HTML5, developers and designers are still feeling the need to cover all of their bases when implementing new features on a website.
The idea behind HTML5 is that it’s not one large entity, but rather made up of smaller parts that work together to create something innovative and advanced. Each browser may support different features of HTML5, which makes it important for those interested in coding to figure out which features they need and which will be supported by different browsers.
HTML5 simply builds upon the widespread success of HTML4. That means a coder doesn't have to throw away the existing markup, but rather build upon and improve the old one. For example, forms can be updated to allow for new features such as a better email input for those using a mobile device. However, viewers stuck in IE6 will simply see it as a text field and still be able to use it.
Any HTML5 syntax requires a doctype to be specified so that the browser can render the page in standards mode. The good news though is that the doctype declaration has also been simplified from previous HTML. It is now just:
- The audio and visual support in HTML5 is outstanding. As soon as it’s fully running and all browsers support HTML5, you will find it easy to add audio and video to websites without the need for outside plugins.
- Editing the content of your website is simplified with HTML5. Using the contenteditable attribute, you can quickly and painlessly change your text by adding contenteditable=“true” to any element.
- The canvas element makes it possible for you to bypass Photoshop to make your 2D images and directly place them in your code.
- The application cache enables you to navigate web applications while you are offline.
- The new tag header is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from h1 to h6 .In this case the header is used to introduce the whole page, but we’ll use it to introduce a section of the page a little later.
- The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
- The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.aside is used to wrap around content related to the main content of the page that could still stand on it’s own and make sense. In this case we’re using it for the sidebar.
- The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents and so on.
- Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what’s what in a page.
- The article tag is used to denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here. Since we are viewing the details of a single post we only have one article, but on the front page of the blog we would wrap each post in an article-tag.
- The header element is used to present the header and metadata about the blog post. We tell the user when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a -tag. This tag is also new to HTML 5 and is used to mark up a specific place in time
Why Use It
- HTML5 will load much quicker than its older brother because it implements WebSockets.
- Mobile phone applications will be much more accessible if written in HTML5 because you will not have to write applications for a specific brand of phone but rather can create universal applications for all phones.
- You have more flexibility in creating your website.
- Video, audio and images are all easily written right into the code, eliminating the need for any third party software.
- This language is growing and will only result in more, new, better and faster features that will leave old websites looking outdated.
- HTML5 simply builds on HTML4, so the old markup can stay in place as you develop the new features.
- HTML5 and CSS3 together will give you some serious designer credibility.
List of some of tag that i like most in HTML5:
- <aside> – aside element is a section of a page that consists of content that is tangentially related to the content around the aside element. We can use aside element for sidebars, for advertising, for groups of nav elements, and for other content that we can consider separate from the main content of the page.
- <article> – article element is a self-contained composition (a forum post, a magazine or newspaper article, a blog entry) in a web page or web application and that is intended to be distributable or reusable. You should use the article element, instead of the section element, when it would make sense to syndicate the contents of the element.
- <footer> – footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. It can contain information about its section, links to related documents, copyright dataansd so on. Footer element used for a general site-wide footer and for a article (or section) footer.
- <header> – header element represents a group of introductory or navigational aids, it is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element)
- <nav> – nav element is a section with navigation links. Not all groups of links on your web page need to be within a nav element, only sections that consist of major navigation blocks are appropriate for the nav element.
- <address> – address element represents the contact information for its nearest article.
- <time> – it is used to represent a date and/or the time.
- <legend> - it is used to represent header for fieldset like we use while creating a some desktop application