New abilities of HTML

Even if you only browsing the Internet, not creating sites, you probably heard of HTML. For some time webmasters are using new major version – HTML 5, which brought many features. Now they can do more thanks to HTML 5.1

What is HTML 5.1?

It stands for Hypertext Markup Language, other words – set of tags used to build a website. Recently W3C has started to officially recommend new version – HTML 5.1. W3C (World Wide Web Consortium) is an organization that defines standards for building websites. Its new recommendation is quite obliging for web developers, it means that HTML 5.1 can be (and should) their fundamental choice when it comes to creating a web page.

HTML 5.1 except organizing some matters, introduces some set of new features, which you should interest about.

Custom context menu

Thanks to MENU and MENUITEM elements you can add your own options to context menu triggered by right mouse button. Unfortunately, for now, it works only in Firefox.

See the Pen HTML 5.1 menu example by WebGrinder (@webgrinder) on CodePen.

Showing and hiding

The ability to showing and hiding elements after a click is one of most interesting features of HTML 5.1. Of course, you can say that this isn’t new functionality – you can achieve it easily using JavaScript/jQuery. All trick is that now you can do this without any scripts. Just wrap an element with DETAILS and SUMMARY tags, and start toggling in the browser.

See the Pen HTML 5.1 details and summary demo by WebGrinder (@webgrinder) on CodePen.

New INPUT types

Since couple years new input types can be inserted into forms. HTML 5.1 introduces new control types, allows to easily select. Unfortunately, for now, it works only in Chrome.

See the Pen HTML 5.1 week, month and datetime inputs by WebGrinder (@webgrinder) on CodePen.

It should look like that:

PICTURE element

Very useful feature is a new PICTURE element. Using it allows decrease problems with responsive images. Long story short, you can set different versions of an image for different devices. You can ex. render a small picture on the mobile phone, and bigger on a device with larger screen. Thanks to that, the user avoids wasting his transfer.

These are only a few new features that HTML 5.1 brings. I encourage you to try them out and start using when all browsers will start to fully support them.

It seems that this article it a little bit overdue because at 13-03-2017 HTML 5.2 appeared. I’ll probably take a look at it in my spare time and post a short note on the blog.

Stay tuned!

All recommendation details are available on https://www.w3.org/TR/html51.

CodePens used in this article were created by SitePoint.