Few Interesting HTML5 Features

The next major revision of HTML standard called as HTML5 has been launched recently. It is expected that any upgraded version of a program or software will include new elements and features. In this article I will include a number of new elements and attributes that assists in modern website development.

1. Video and Audio support: The most notable feature of HTML5 is video playback which was previously dependent on third-party plugins such as Adobe Flash and Microsoft Silverlight. HTML5 has <video> tag for videos, <image> for images, <audio> for sound and <canvas> tag to describe graphics content.
   <video width=”320″ height=”240″ controls=”controls”>
   <source src=”movie.ogg” />
   </video>
2. Navigation tag: HTML5 introduces a new tag called <nav> in order to include navigation menu in your website. <nav>
   <a href=”http://www.freetipsandtricks.com/”>Home</a>
   <a href=”http://www.freetipsandtricks.com/about/”>About</a>
   <a href=”http://www.freetipsandtricks.com/contact/”>Contact</a>
   </nav>
3. Header and Footer Tag: The <header> tag defines an introduction to a document. <header>
   <h1>Welcome to freetipsandtricks.com</h1>
   <p>Some interesting HTML5 Features</p>
   </header>
   The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information. <footer>Contact me at linkguytaylor@gmail.com </footer>
4. Figure element: You can use this new <figure> tag to group some elements in HTML5. <figcaption> adds caption to the group of elements. <figure>
   <img src=”newlogo.png” alt=”Logo”>
   <figcaption>
   <p>Our New Company Logo</p>
   </figcaption>
   </figure>
5. Required attribute: Gone are the days of writing JavaScript validation for a required field in a html form. HTML5 introduces a new required attribute which specifies an input field must be filled before submitting. <input type=”text” name=”user_id” required=”required” />
6. Email input : In order to validate an email input, HTML5 has input type of email which has in-built validation for email address You can’t 100% rely on this just yet, for obvious reasons. <input type=”email”  name=”user_email” />
7. Autofocus attribute: If you need to get a input field selected or focused on page load, a new HTML5 attribute named autofocus is very useful option. <input type=”text” name=”user_name”  autofocus=”autofocus” />
8. Pattern attribute: HTML5 removes the need of writing regular expression validation in a separate JavaScript function. You can simply use pattern attribute to apply regex to an input type.
   <input type=”text”  name=”country_code” pattern=”[A-z]{3}”  title=”Three letter country code” />

Click here to read about all HTML5 tags and attributes.