The second revision of HTML 5 has been officially issued and its results made public in the world of web development. So ... what's in it for you? Which are those HTML 5.2 new features with a significant impact on your own web development workflow?
Which of the changes in HTML 5.2 should you watch for, assimilate and adapt to your workflow? What new practices have been introduced and which ones have been made obsolete?
For an accurate answer to your valid questions, I highly recommend you to go straight to the official HTML 5.2 changes-dedicated page on W3C.
And for a quick selection including precisely those changes with a big impact on your own workflow as a developer... keep on reading:
4 HTML 5.2 New Features Worth Exploring
1. Payment Request API: A Needed Native Alternative to Checkout Forms
Say Hello to streamlined, error-free payment transactions in HTML 5.2!
Here's how payment requests used to be handled in HTML:
Each and every website had to come up with its own checkout form for handling the payment information retrieving process. You couldn't embed iframes (e.g. third-party payment gateways such as Paystack or Stripe) within your documents and, therefore, use a third-party system's own payment interface instead
Well, not anymore! With HTML 5.2 you get to:
- use the allowpaymentrequest attribute within an iframe
- … which will enable using the Payment Request API right on the user's hosting web page
<iframe allowpaymentrequest> In short: consistency (and convenience) at the level of payment transactions, from the user's standpoint, is now easier to achieve than ever; they'll get to make their payments right in their browsers from now on
2. A Content Security Policy Has Been Implemented
I couldn't have left this “not so tiny detail” out of my selection of HTML 5.2 new features:
You should be aware that certain constraints have been enforced for security purposes.
So, you might want to invest some of your priceless time in going through this policy!
3. The “Size” Attribute Is Now Valid for The Apple Icons, Too
Here's a (more than) familiar situation of hair-pulling frustration:
To define the size of your web page icons you use the “sizes” attribute, yet this specific attribute is not supported by the iOS devices; and in HTML 5 this “tricky” attribute is only valid if the relationship is “icon”.
Oh! The irony...
Luckily for you (and me), in shiny and new HTML 5.2 you get to use the “sizes” attribute in relation to Apple's device-specific relationship, apple-touch-icon. You're no longer constrained to the “icon” type of link relationship.
You're free now to create a myriad of eye-catching, visually-striking icons of different sizes, for multiple Apple devices!
4. A Native Dialogue Box Has Been Introduced
… which will make creating custom dialogue boxes easier than ever. Custom ones, facing the user, featuring modal and non-modal options.
And this is just another one of the HTML 5.2 new features to be really excited about!
Just think of how cumbersome implementing dialogues in HTML is right now:
- every implementation is... different
- making them 100% accessible is challenging enough and this is the reason why the web is filled with unusable, ignored dialogue boxes
Just use the <dialogue> element to create your dialogue box in HTML 5.2.
3 New Best Practices for Writing HTML To Adopt
1. The <Style> Element Can Now Be Placed Within The <Body>, as Well
In other words: you're no longer constrained to placing styles exclusively within the <head> of your HTML documents.
And I think this is one of my top favorite HTML 5.2 new features: practically, now I'm free to define an inline <style> block anywhere in the <body> of a document in question.
Along with the elements that those styles are more relevant for.
I can only imagine the effect this change is going to have on our component-based type of development.
Note: yet, you're still being “warned” that a good practice is to always place your <style> in the <head> of your docs to enhance performance! Using it in the body might lead to restyling and repainting, so do keep in mind this risk/inconvenience that comes along with this... “liberation”!
2. Having Multiple <Main> Elements Is Now Possible
Say goodbye to the “unique <main> element>” rule!
One of the HTML 5.2. changes involves precisely this aspect: you can now have multiple <main> elements, as long as only one of them is visible to the user. One at a time.
With all extra elements hidden under the “hidden” attribute (obviously).
And it goes without saying that this is one of those new features in HTML with a big impact on SPAs' development. In this particular case, you'd have multiple <main> elements in the DOM, each one displayed to the user at a given time.
So, no more “one and only” <main> element standing for the key content of a given web page!
3. You're Free to Include Heading Elements Within Your <Legend>
So, you're no longer constrained to having just plain text in your legend.
Now imagine this scenario and maybe you'll see why I've added it to my selection of HTML 5.2. new features here:
You need to use the fieldset element for grouping multiple sections of a form. Using heading, in this case, will only make all these sections in question far more navigable. See what I mean?
Features Removed & Practices No Longer Valid
1. Say Goodbye to “Keygen” and “Menu” & “Menuitem”
That's right, you'll no longer find these 2 elements in HTML 5.2.!
- keygen, that we're all so familiar with for generating public keys for forms
- menu and menuitem, that you would use for setting up your context menus and navigation
… are both gone for good!
2. No More Strict Doctypes
The new web technologies have “dethroned” the good old plugins!
New technologies which now help you develop all the functionalities that these plugin systems provide you with as an integral part of the web itself instead!
3. No More Floated or/and Inline Children of <P>
Here's another one of all the possible valid answers to your “What's new in HTML 5.2?” question:
"It's content and content only that the only valid children of a <p> should phrase."
So, you can forget all about other types of elements that we've used to nest under our paragraphs so far:
- inline tables
- inline blocks
- floated blocks
- positioned blocks
The END! This is how my personal selection of HTML 5.2 new features looks like! The ones that I think that will have the most significant impact on our web development workflows.
Curious now what other changes you'll dig up yourself and consider far more relevant that these ones here. Do share them in the comments below!