10 HTML5 Features To Know and What to Avoid

HTML5 offers new powerful markup structures for tags and attributes. Learn how to use the new HTML5 elements for your next project using the these 10 new features.

1) New <header> and <footer> Structure Tags

The <header> tag defines the header area and the <footer> defines the footer content. This helps with SEO because they are used to isolates non-relevant content when indexed by search engines improving the relevancy of your site. The tags are treated as div containers and can be styled in the same manner as other tags. Here are a few more structure tags:

  • <section> – to define sections of pages
  • <nav> – defines the navigation on a page
  • <article> – defines the article or primary content on a page
  • <aside> – defines extra content like a sidebar on a page
  • <figure> – defines images that annotate an article

2) New <input> type attributes

There are several cool featured added to the input tag. One for example the “date” attribute that creates a interactive calendar selector plus up and down arrows to increment the date. Or use the “month” attribute to populate the month and year. See the list of recently added HTML5 attributes below:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

3) New HTML5 Elements: <canvas>, <video> and <audio>

The <canvas> element is used to provide a drawing space using JavaScript. This is perfect for creating animation, 3D objects and interactive presentations, games or tools. Like the “canvas” tag, the <video> and <audio> elements simplify the embedding of rich-media content on your web page. This is also great for mobile users where Adobe Flash is sometime not supported. You can find a list of DOM references for Video/Audio here: http://www.w3schools.com/tags/ref_av_dom.asp

4) New Inline Elements

These inline elements mostly define some basic time markups concepts:

  • <mark> – to indicate content that is marked in some fashion
  • <time> – to indicate content that is a time or date
  • <meter> – to indicate content that is a fraction of a known range – such as disk usage
  • <progress> – to indicate the progress of a task towards completion

5) New HTML5 Doc Type

This doctype is a replacement for the long unmemorable document type. In some cases with new html5 browser, it isn’t necessary at all. However, it’s required by older browser and will render the page markup in standard mode. Here’s the new doctype tag:

<!DOCTYPE html>

6) No more “type” attribute for <link> and <script> tags.

Before HTML5, you would have to declare what type of link or script tags you are using like so:

<link ref="stylesheet" href="styles.css" type="text/css"/>
<script src="scripts.js" type="text/javascript"></script>

7) The <output> Element

The “output” element is used to output the result of a calculation. For example, you can use the now-standard “oninput” event on a form tag to trigger a calculation every time you interact with a number type input field. See example below:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>

8) The expand and collapse <details> tag

The “details” tag is not widely supported yet; however, it makes for an easy expand and collapse block of text. Before this tag, you would have to use jQuery or other codes to achieve this effect.

9) Image caption support with <figure> and <figcaption> tags

You can now associate captions (like the descriptive paragraph under photos) with related embedded image. Here an example how to use both in conjunction with the image and paragraph markups.

<figure>
<img src=”img/sandwich.jpg” alt=”My Sandwich” />
<figcaption>
<p>My favorite sandwich from Big Sandwich Cafe</p>
</figcaption>
</figure>

10) Quotes not required on HTML5 attributes

With HTML5, you no longer have to close your tags or add quotes to your tag attributes. However, if there are multiple values listed within your attributes and there are no quotes, this will most likely break your tags. It maybe a good idea to continue using the quotes and close tags. Here are a advantages with or without quotes:

Advantages to quoting all attributes:

  • all editors can deal with it properly
  • more consistent
  • better portability (easier to change doctype)
  • easier to maintain (esp. if attributes might become empty)
  • easier to ‘find and replace’ changes
  • cleaner doc (if you think quotes improve readability)

Advantages to omitting optional quotes:

  • slightly reduced file size
  • cleaner doc (if you prefer minimal text)

You may also like...

Leave a Reply