The Internet has used HTML 4.0 for over ten years; however, HTML5 replaces much of the previous version’s clumsy code with streamlined tags that are both more human-friendly and more computer-friendly. Even if you’re accustomed to coding the old way, you’ll benefit from learning about the new capabilities of HTML5.
Simplify Your Doctype
The first changes that you’ll notice with HTML5 occur at the very beginning of a document. Rather than using a complex document type declaration, HTML used a streamlined doctype: “ ”. Similarly, defining your character set is easier than ever with the following tag in your “”:
Making Structure Easier
New tags allow you to structure your pages with ease, while enabling search engines to read your code and determine which content is relevant in the search results. Prior to this, you probably used divs with IDs or classes to differentiate sections, but everyone coded their pages differently, making it difficult for search engines to find content.
For example, placing your blog posts into “
” tags separates it from your header or footer, both of which now have their own tags. Other new tags include the following:
” – for sections of a page
” – for extra content
” – for images that annotate a post
” – for navigation
Fix Up Your Forms
HTML5 introduces new form tags, which help you to declare fields and define attributes. Where you would previously create a text field and give it the name “email”, you can now specify “email” as an input type. Compatible browsers will detect the validity of your visitor’s email address, which goes a long way toward spam prevention. Other new types include “tel”, which specifies a telephone number, and “number”, for use with credit cards.
HTML5 forms also have new attributes. The autofocus attribute allows you to make the user’s cursor appear in a specific form field as soon as the page loads, and it requires just one bit of code as in the following example:
You can now also require form elements with the required attribute, rather than inserting hidden form elements. The autocomplete attribute helps you disable autocompletion for fields, like the aforementioned credit card number.
Media the Easy Way
Showing multimedia on your website has never been easy. However, you can now display your own multimedia with HTML5 and never worry about validity. In fact, new attributes allow you to specify which program will play your audio or video content. In the following example, your video, “movie.mp4”, will display with a width of 320 pixels, show controls and display a message to visitors whose browser don’t support the new tags.
Your browser does not support the video tag.
HTML5 opens up exciting and simplified new options that allow you to create pages without the frustrations of HTML4.