5 HTML Features You Might Not Know About

For a language so elementary and easy to learn, HTML certainly offers an unexpected volume of useful features, many of that many of us don’t even know about. It’s tough to keep adult with times and we competence consider that all “you competence not know” articles contingency be about a many new tags, HTML also has some quite useful facilities that are already around for a while.

From checking spelling to adding keyboard shortcuts, in this article, I’ll uncover we five less-widely famous HTML features.

10 New Features of HTML 5.1 How to Use Them IRL

10 New Features of HTML 5.1 How to Use Them IRL

The HTML selection got a vital renovate a integrate of weeks ago when W3C published a new HTML…Read more

1. Check spelling as we type

The spellcheck attribute prompts browsers to check spellings while a user is typing an element. This charge is global, meaning, you can supplement it to any HTML tag.

However, it usually works on elements that can take calm input. Having it tellurian is useful since it can be inherited by child elements. For instance, supplement it to a div tag and all of a child elements that take calm contention will get this attribute.

Spell checking works on all calm input types: text, search, url, and email. It also works on textarea, and editable elements (elements with contenteditable attribute).

Its value can be an dull string, true, or false. The dull fibre and true will enable a spell checker.

input type="text" spellcheck="true"
placeholder="Type something here"
p contenteditable="true" spellcheck="true"
  Type something here
/p

In a above code, both a div and p tags will check spellings when a user is typing into them.

If a user has disabled spell checking in a browser settings a spelling won’t be checked, even if spellcheck was added.

2. Be protected from compromised CDN resources

It is flattering common to horde resources, such as scripts and stylesheet files, by CDNs. But, if a CDN gets compromised, so do those hosted files, and if any fetched apparatus is compromised on your website, so does your site!

See what Mozilla Developer Network says about a problem:

… regulating CDNs also comes with a risk, in that if an assailant gains control of a CDN, a assailant can inject capricious antagonistic calm into files on a CDN (or reinstate a files completely) and so can also potentially conflict all sites that fetch files from that CDN.

To forestall this, Subresource Integrity (SRI) was introduced in early 2014 by W3C. This intrigue compares a crush value (the outcome of requesting a hash function to an input) of a resource to countenance it.

Say, there’s a JavaScript record during https://example.com/example.js. First, we apply a crush function to that file, afterwards add a constructed crush value to a integrity attribute of a script tag that imports example.js to your website.

script src="https://example.com/example.js"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"
crossorigin="anonymous"/script

Now, whenever a web page of your site with a above formula has to bucket example.js, a browser first relates a crush function, and loads and runs example.js usually when a hash value matches a integrity value.

If example.com was compromised and example.js was interfered with afterwards a crush value of example.js won’t compare a integrity value.

Most common CDNs already yield SRI integrity values, though we can also beget one here.

3. Override form targets in contention buttons

You’re many expected informed with a target attribute, a one that decides where a hyperlinked apparatus opens, for instance on a same page or in a new tab. You competence also know that a same target charge used in a form add-on decides where a response from a form acquiescence is shown.

In one of a early drafts of HTML5, formtarget was tangible along with 4 other form acquiescence attributes: formaction, formenctype, formmethod, and formnovalidate.

These attributes can be used with contention buttons, and they overrule their particular attributes in a form add-on to that a buttons go to.

So, when a form is submitted regulating a symbol that has a formtarget attribute, a response is shown according to a formtarget value, instead of a target value of form.

form action="/save" target="_self" 
  contention type="submit" name="save"  /
  contention type="submit" name="print" formaction="/print"
  formtarget="_blank" /
/form

In a above code, when a form is submitted regulating a second contention symbol (print ), a response will appear in a new browsing context, like in a new tab.

4. Hide elements semantically

When it comes to hiding elements, we all went by opposite phases of stealing elements: regulating opacity:0, visibility:hidden, height:0; width:0, display:none, text-indent:-999px in a CSS file.

Each process has a purpose, nothing of them are redundant, and so isn’t this one: a hidden HTML attribute. If an component has hidden specified on it, it’ll be hidden.

div hidden.../div

It works a same approach as a display:none; CSS rule; a component with a hidden charge doesn’t get rendered on a page. Any book inside a component will be executed, and if it’s a form control it’ll be submitted along with other form controls during form submission.

However, a advantage of hidden is that it’s semantically appropriate, after all, HTML5 is all about semantics and hidden is partial of a HTML5 entourage!

Moreover, when an component is hidden, it’s to be hidden in all platforms, not only in web browsers though in screenreaders, TV, projectors, etc.

It’s also not style-dependent, even if we frame divided a author CSS from a page, a component will sojourn hidden. Whereas in a box of display:none; that won’t happen. So, consider of hidden as a ironclad chronicle of display:none;.

5. Add keyboard shortcuts

The accesskey tellurian attribute was already tangible in HTML4 and it creates a keyboard shortcut with that a user can work an component on a page.

The pivotal multiple for a by-pass will depend on dual things:

  1. the accesskey value that we give to an element
  2. the pre-assigned keys used by a browser for a same element
IMAGE: Mozilla Developer Network

Take this example:

button accesskey="v" onclick="alert('View Click')"
  View
/button

In Firefox, if we press a pivotal multiple Alt + Shift + V (or Alt + Control + V in macOS) you’ll get a warning “View Clicked”.

Since a predefined browser keys varies with any browser and OS, it is endorsed we let a users know of a pivotal combinations used for a shortcuts.

10 Cool Things HTML Tags Can Do

10 Cool Things HTML Tags Can Do

At a impulse there are a sum of 142 HTML elements standardised by W3C incompatible a ones in…Read more

Add Comment