Support for all web features varies widely between the different browsers. So while Google Chrome might already support a feature for 6 months it is very possible that Firefox or Microsoft Edge do not. And the rapid development and release cycles of all major browsers don’t make it any easier to stay on top of the browser support. So today I will show you a few different HTML features you can start using today because they are supported in all major browsers. For the purpose of this article let’s assume that the major browsers are Chrome, Firefox, Internet Explorer 11, Safari and Microsoft Edge. Let’s dive right in:

Section Elements

The already quite common section elements can be used to separate different parts of your page like the header or footer. All major browsers support this out of the box and so you should definitively use these as they will make your CSS much easier to structure correctly. The elements are

• <section>
• <nav>
• <article>
• <aside>
• <header>
• <footer>

You can find a complete usage example here.

Input Types (tel, url, email, number)

HTML 5 introduced quite a few new input types which can help you as the browser can manage the data validation and error messages for these fields. Unfortunately, not all are available in every major browser but there are 4 input types that you can start using right away: tel, url, email, and number. Some quick examples are:

<!-- Input type for a phone number -->
<input type="tel"></input>
 
<!-- Input type for a URL -->
<input type="url"></input>
 
<!-- Input type for an EMail address -->
<input type="email"></input>
 
<!-- Input type for numbers only -->
<input type="number"></input>

Form Validation

Sometimes you cannot rely on the browser directly to do all the validation. Maybe you have some custom input format (like an order number) that is unknown to the browser. Luckily HTML has you covered (and all major browsers support this) with a few different attributes.

You can suppress the validation of a form field or a complete form using the novalidate attribute.

<!-- Will not be validated by the browser -->
<form method="post" novalidate></form>
 
<!-- Will not be validated by the browser -->
<input type="email" novalidate></input>

On the other hand, you can mark any field with the required attribute to tell the browser that this field is mandatory.

<!-- This field is mandatory -->
<input type="email" required></input>

Lastly, you can define your own pattern for the validation of a field with the pattern attribute. You can find a long list of popular patterns at html5pattern.com.

<!-- A custom validation pattern -->
<input type="text" pattern="[0-9]{4}"></input>

Video & Audio

Gone are the days when you had to rely on Flash or Silverlight to play video or audio files directly in the browser. You can now do this directly (and cross-browser) in HTML using the video and audio tag. Just be aware of the different codecs and browsers that support them.

<!-- play a video file cross browser -->
<video controls>
  <source src="videofile.webm" type="video/webm">
  <source src="videofile.mp4" type="video/mp4">
</video>
 
<!-- play an audio file cross browser -->
<audio controls>
  <source src="soundfile.mp3" type="audio/mpeg">
  <source src="soundfile.ogg" type="audio/ogg">
</audio>

HTML Editing

Did you know you can make nearly any element on your website editable? Just set the attribute contenteditable and you can edit the element directly in the browser (demo).

<p contenteditable="true">This can be changed directly in the browser"</p>

Spellcheck

We all make spelling mistakes every day. Luckily with the simple spellcheck attribute, we can add browser supported spellchecking to any element on the page.

<textarea spellcheck="true">No erors here!</textarea>

iFrame Sandbox

Don’t want any iFrame to mess with your content (or users)? Simply add the sandbox attribute to the iFrame to make it more save. Read about the details technical here.

<iframe src="https://www.somepage.com" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

Summary

There you go, 7 different HTML 5 features that you can use in all major browsers today! Still, need to support older browsers? There are polyfills out there to emulate the above features if necessary.

Picture by housebuyfast.co.uk