Buzz
Here are 5 HTML features Mytour wants to introduce to you, including features from spell checking to adding shortcuts.
Spell checking as you type
The primary feature of HTML is spell checking. The spellcheck attribute on browsers checks spelling as users type into an element. It's a global attribute, meaning you can add it to any HTML tag.
However, this attribute only works on elements that can accept text input. This 'global' attribute is extremely useful because it can be inherited by child elements. For instance, adding this attribute to a
tag means all child elements with text input will inherit this attribute.
The spell check attribute works on all input types: text, search, URL, and email. Additionally, it also functions on text areas and editable elements (elements with editable attributes).
Its value can be an empty string, true, or false. An empty string and true activate spell checking.
1.input type='text' spellcheck='true'
2.placeholder='Enter text here'>
3.p contenteditable='true' spellcheck='true'>
4.Enter text here
5./p>
In the provided code snippet, both the tags 'p>' and '/p>' will perform spell checking as users type into the element.
If users have disabled spell checking in their browser settings, spell checking will not occur even if spellcheck has been added.
Security compromised from CDN sources
Storing resources such as scripts and stylesheet files through CDN is quite common. However, if a CDN is compromised, those stored files and any other resources on your website will also be compromised.
Let's see what Mozilla Developer Network (MDN) says about this issue:
“... by using a CDN, users also face risks. If an attacker gains control of the CDN, they can inject malicious content into files on the CDN (or completely replace the files), thus the attacker can also attack all websites that load files from that CDN.”
To prevent this, W3C introduced and launched Subresource Integrity (SRI) in early 2014. Subresource Integrity (SRI) compares the hash value (the result of applying a hash function to input) of the resource to verify it.
Imagine you have a JavaScript file at https://example.com/example.js. First, you apply a hash function to that file, then add the generated hash value to the integrity attribute of the script tag, importing example.js into your website.
script src='https://example.com/example.js'
integrity='sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7'
crossorigin='anonymous'>/script>
Now, whenever a page of your website with the code to load example.js loads, the browser first applies the hash function, and loads and executes example.js only if its hash value matches the integrity value.
If example.com is compromised and example.js is tampered with, the hash value of example.js will not match the integrity value.
The most common CDNs provide SRI integrity values, but you can also generate an SRI integrity value yourself.
Overriding form target in submit button
You might be familiar with the target attribute, which determines where to open a hyperlinked, such as on the same page or in a new tab. Additionally, you may know the same target attribute used in the form> determines the display location of the response from form submission.
One of the early HTML5 drafts, formtarget was defined alongside 4 other attributes: formaction, formenctype, formmethod, and formnovalidate.
These attributes can be used with submit buttons, and they override the corresponding attributes in the button's tag.
So when a form is submitted using a submit button with the formtarget attribute, the response is displayed according to the formtarget value, instead of the form's target value.
1.form action='/save' target='_self' >
2.input type='submit' name='save' />
3.input type='submit' name='print' formaction='/print'
4.formtarget='_blank' />
5./form>
In the above code snippet, when the form is submitted by the second submit button (the print button), the response will appear in a new web browser context, such as in a new tab.
Hide semantic elements
When it comes to hiding elements, we have gone through various stages of hiding elements: using opacity:0, visibility:hidden, height:0; width:0, display:none, text-indent:-999px in CSS files.
Each method serves its own purpose, none is redundant, and it's not the HTML hidden attribute. If a hidden element is specified, it will be concealed.
div hidden>.../div>
It functions similarly to the display:none; CSS rule, elements with the hidden attribute are not displayed on the page.
Any scripts within the element will be executed and if it's a form, it will be submitted along with other form controls during form submission.
However, the standout feature of hidden is its appropriate semantic usage. Semantic and hidden are part of HTML5.
Moreover, when an element is hidden, it will be hidden across all platforms, not just web browsers but also screen readers, TVs, projectors, and so on.
It doesn't rely on styling, even if you separate CSS from the page, the element remains hidden. In the case of display:none;, this wouldn't happen. Hence, hidden can be considered the “ironclad” version of display:none;.
Add shortcuts
The accesskey attribute, defined in HTML4, creates shortcuts that users can use to operate an element on a page.
The combination of shortcuts depends on 2 things:
1. The accesskey value we provide for an element
2. The keys pre-assigned by the browser for the same element.
For example:
1. button accesskey='v' onclick='alert('View Click')'>
2.View
3./button>
In the Firefox browser, pressing the key combination Alt + Shift + V (on Windows) or Alt + Control + V (on MacOS) will trigger the notification 'View Clicked'.
Since browser keys are pre-configured differently for each browser and operating system, you should inform users about the key combinations used for shortcuts.
So here Mytour has introduced 5 features of HTML to you. If you have any questions that you want Mytour to answer, you can leave your comments below the article.
If you use ThunderBird for sending emails, refer to how to Create HTML Signature for Email here on ThunderBird to make your emails more professional.
Usually, website users will embed links into images in HTML to optimize their web pages. If you don't know how to embed links into images in HTML, Mytour will provide you with the most detailed guidance.
