8 New HTML5 Elements To Make Life Easier • twoggle

Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.

8 New HTML5 Elements To Make Life Easier

HTML5 elements

1: <header> and <footer>

Although the html5 elements <header> and <footer> tags do not differ in terms of the actual display from the <div> tag, they will provide you with long-term benefits in search engine performance. These tags will let search engines know the difference between the actual “content” on the page, and important information which isn’t the actual content, i.e. header and footer information.

2: <video> and <audio>

HTML5 introduces native media support via the <audio> and <video> elements, offering a simple way of embedding media into HTML documents, without the need for Flash. Technologies like Flash, Silverlight etc, are not being used as fallbacks. Instead, the browser can now display the controls without any external support, and the content can be manipulated through JavaScript.

3: <article> and <section>

There is often some confusion over the difference between the <article> element and the <section> element. Essentially, the <article> element is a specialised kind of <section>. An article represents an independent block of related content, with its own self-contained semantic meaning. Whereas a section is just a block of related content. A section has more semantic meaning than a <div> which is just a block of content.

4: <input> type attributes

HTML5 has several new <input> types for example: calendars, sliders, colour choosers, number spinners. These new features allow better input control and validation. The beauty of learning these is that it eliminates the need for tonnes of JavaScript work which was previously needed to display these kind of tricks.

5: <output>

The new <output> element is used in forms and represents the result of a calculation, like one performed by a script. It has a value attribute, supporting both global attributes and event attributes in HTML5. This new element is a much more convenient way of doing things than the previous way.

6: <details>

The <details> tag supports something all of us have been doing for years, but in a much more simple way than for example using JavaScript or server-side code. The tag makes a simple block of text which expands (and collapses) as the header is clicked.

7: <canvas>

The new HTML5 addition, <canvas> tag, allows for dynamic, scriptable rendering of 2D shapes and bitmap images. While not perfect, it is still a great way to build things like graphs and 2D charts, and custom graphics, something which traditionally has been seen as a weak spot in HTML.

8: <datalist>

The <datalist> tag is used for proving an “autocomplete” feature on form elements, where a pre-made list of suggestions is provided yet still allowing the user to input their own search as well. Uses of this are things like search boxes which are pre-populated by for example: most popular searches, a user’s search history etc. Previously this required a lot of JavaScript but can now be done natively using HTML5.

If you need some awesome HTML5 design work check out RossInTranslation.

Submit a Comment