New elements and attributes in HTML5

As we discussed in the last blog post, HTML5 introduces many new elements and attributes. In today's blog, we'll discuss a few interesting new elements. The entire list is available on the official HTML elements page.



But let me warn you, this is going to be boring and I've included this only for the sake of completeness. In the previous post, I told you that from now, we'll be exploring HTML5 and I believe that learning about the new elements and attributes is a first step towards it.

But after this, we'll jump into the more interesting stuff like video players and other media innovations in HTML5.

Please feel free to skip this post.

HTML5 New Elements

• New graphics elements: For graphics a new element was introduced <canvas> which is used for drawing stuff with the help of JavaScript on the screen.
•  New media elements: 
• <audio> is a new element used for playing audio on the screen.
• <embed> is used as a container for external applications.
• <source> and <track> are used for providing sources and tracks to <audio> and <video> elements.
• <video> is a new element used for playing videos on the screen.
• New form elements: 
• <datalist> is used for pre-defining a list of valid inputs for an input tag.
• <keygen> generates public and private keys that are sent to the server and retained within the browser respectively.
• <output> basically says that "the data here is the output of some operation.
• New structural elements: There are many of these elements to be explained here. However, in a nutshell, these elements are basically elements that are used for providing structure to your web document and for defining the sections of the document as the summary, title, article, header, footer etc. Check out the official developer page of Opera (the web browser, in case you were wondering) to know more about these.

HTML5 Removed Elements

But, addition of new elements to HTML5 is not the only change. Many elements were also removed from HTML5 that were previously supported in HTML 4.01. They are (in alphabetical order):

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

HTML5 New Form Attributes

• autocomplete - Automatically completes the input from previously recorded inputs.
• autofocus - Automatically focuses this element when the page loads.
• form - Specifies the form to which this element belongs.
• formaction - Is used for overriding the value of the "action" attribute of the form element.
• formenctype - We can use this attribute to set the encryption type when we use the method "post" for submitting our form.
• formmethod - Overrides the values of the "method" attributes of the form element.
• formnovalidate - Asks the browser not to validate the form.
• formtarget - Sets the "target" of where the output should be displayed.
• height and width - Quite self explanatory.
• list - Specifies a datalist element that contains predefined values for an input element.
• min and max - Specifies minimum and maximum values an input element can take.
• multiple - Allows the user to enter multiple values.
• novalidate - Asks the browser not to validate the form.
• pattern (regexp) - The pattern mentioned in this attribute is used for auto-validating the input element.
• placeholder - A hint that is present in the input element. It disappears when the element has some value or focus.
• required - Specifies whether the input element is required or not for the form to submit. 
• step - This is tricky. If the step value is set to 2, then the acceptable values are 2,4,6,8... I guess you get the point with the example.

And lastly... New Input Types

• color - Shows a color picker.
• date - Accepts dates.
• datetime - Accepts date and time (You have to specify a time zone).
• datetime-local - Accepts date and time, but you don't have to specify a time zone. The browser automatically takes in the local time as the time zone. 
• email - Accepts emails. This will automatically validate emails.
• month - Accepts months.
• number - Accepts numbers.
• range - Displays a slider to choose a value within a range.
• search - Displays a search bar.
• tel - Accepts telephone numbers.
• time - Accepts time.
• url - Accepts URLs.
• week - Accepts weeks and years.

Okay, what's next?

Now that we're through the boring stuff, from the next blog post on, we'll be talking about the media features of HTML5 like video and audio.