For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don’t even know about. It’s hard to keep up with times and you may think that all “you might not know” articles must be about the most recent tags, HTML also has some quite helpful features that are already around for a while.
From checking spelling to adding keyboard shortcuts, in this article, I’ll show you five less-widely known HTML features.
The HTML specification got a major overhaul a couple of weeks ago when W3C published its new HTML…Read more
spellcheck attribute prompts browsers to check spellings while a user is typing an element. This attribute is global, meaning, you can add it to any HTML tag.
However, it only works on elements that can take text input. Having it global is useful because it can be inherited by child elements. For instance, add it to a
Spell checking works on all text
, and editable elements (elements with
Its value can be an empty string,
false. The empty string and
true will enable the spell checker.
Type something here
In the above code, both the
tags will check spellings when a user is typing into them.
If the user has disabled spell checking in the browser settings the spelling won’t be checked, even if
spellcheck was added.
It is pretty common to host resources, such as scripts and stylesheet files, through CDNs. But, if the CDN gets compromised, so do those hosted files, and if any fetched resource is compromised on your website, so does your site!
See what Mozilla Developer Network says about the problem:
… using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.
To prevent this, Subresource Integrity (SRI) was introduced in early 2014 by W3C. This scheme compares the hash value (the result of applying a hash function to an input) of a resource to validate it.
https://example.com/example.js. First, you apply a hash function to that file, then add the produced hash value to the
integrity attribute of the
example.js, the browser first applies the hash function, and loads and runs
example.js only when its hash value matches the
example.com was compromised and
example.js was interfered with then the hash value of
example.js won’t match the
integrity values, but you can also generate one here.
3. Override form targets in submit buttons
target attribute, the one that decides where a hyperlinked resource opens, for instance on the same page or in a new tab. You might also know that the same
target attribute used in the
Now, whenever a web page of your site with the above code has to load
Most common CDNs already provide SRI
You’re most likely familiar with the
In one of the early drafts of HTML5,
formtarget was defined along with four other form submission attributes:
These attributes can be used with submit buttons, and they override their respective attributes in the
It works the same way as the
display:none; CSS rule; the element with the
hidden attribute doesn’t get rendered on the page. Any script inside the element will be executed, and if it’s a form control it’ll be submitted along with other form controls during form submission.
However, the benefit of
hidden is that it’s semantically appropriate, after all, HTML5 is all about semantics and
hidden is part of the HTML5 entourage!
Moreover, when an element is hidden, it’s to be hidden in all platforms, not just in web browsers but in screenreaders, TV, projectors, etc.
It’s also not style-dependent, even if you strip away the author CSS from a page, the element will remain hidden. Whereas in the case of
display:none; that won’t happen. So, think of
hidden as the ironclad version of
accesskey global attribute was already defined in HTML4 and it creates a keyboard shortcut with which the user can operate an element on the page.
The key combination for a shortcut will depend on two things:
accesskeyvalue that we give to an element
Take this example:
In Firefox, if you press the key combination Alt + Shift + V (or Alt + Control + V in macOS) you’ll get the alert “View Clicked”.
Since the predefined browser keys varies with each browser and OS, it is recommended you let the users know of the key combinations used for the shortcuts.
At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in…Read more
Powered by WPeMatico