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.
- 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> - 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> - 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> - 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> - 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” />
- 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” />
- 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” />
- 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” />
