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.
10 New Features of HTML 5.1 & How to Use Them IRL
.no-js #ref-block-post-28751 .ref-block__thumbnail { background-image: url("http://media02.hongkiat.com/thumbs/250x160/html-5-1-new-features.jpg"); }
10 New Features of HTML 5.1 & How to Use Them IRLThe HTML specification got a major overhaul a couple of weeks ago when W3C published its new HTML…Read more 1. Check spelling as you typeThe 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 Its value can be an empty string, <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Type something here </p> In the above code, both the If the user has disabled spell checking in the browser settings the spelling won’t be checked, even if 2. Be safe from compromised CDN resourcesIt 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:
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. Say, there’s a JavaScript file at <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 the above code has to load If Most common CDNs already provide SRI 3. Override form targets in submit buttonsYou’re most likely familiar with the In one of the early drafts of HTML5, These attributes can be used with submit buttons, and they override their respective attributes in the So, when a form is submitted using a button that has a <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> In the above code, when the form is submitted using the second submit button ( 4. Hide elements semanticallyWhen it comes to hiding elements, we all went through different phases of hiding elements: using Each method has its purpose, none of them are redundant, and so isn’t this one: the <div hidden>...</div> It works the same way as the However, the benefit of 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 5. Add keyboard shortcutsThe The key combination for a shortcut will depend on two things:
Take this example: <button accesskey="v" onclick="alert('View Click')"> View </button> 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.
10 Cool Things HTML Tags Can Do
.no-js #ref-block-post-23967 .ref-block__thumbnail { background-image: url("http://media02.hongkiat.com/thumbs/250x160/cool-useful-html-tags.jpg"); }
10 Cool Things HTML Tags Can DoAt the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in…Read more from http://www.hongkiat.com/blog/new-html-features/
0 Comments
Leave a Reply. |