5 features of HTML you may not know

5 features of HTML you may not know

Learning a language is simple and easy, HTML provides a large number of useful features, many of which you may not even know. The following article will provide and introduce Taimienphi.vn 5 features of HTML you may not know.

5 features of HTML you may not know that Taimienphi.vn would recommend for you here includes from spell checking to adding shortcuts.

Check spelling as you type

The first feature of HTML is spell checking. The spellcheck property on browsers to check spelling during a user typing an element. This is a global property, which means you can add it and any HTML tags.

However, this property only works on elements that can add text input. This “global” attribute is extremely useful because it can be inherited by child elements. For example, you add this attribute to the p tag and all children with text input will inherit this attribute.

The spelling checker works on all input types: text, search, url, and email. In addition, this property also works on textarea, and editable elements (elements with editable properties).

Its value may be an empty string, true (true) or false (false). Empty and correct string will trigger spelling check.

first.input type = “text” spellcheck = “true”

2.placeholder= “Type something here”>

3.p contenteditable = “true” spellcheck = “true”>

4.Type something here

5./ p>

In the code above, the whole “p> “and”/ p> “will check the spelling as the user types the element.

If the user has turned off the spell checking function in the browser settings, the spelling will not be checked, even after adding spellcheck.

Safety from CDN sources is compromised

Storing sources, such as scripts and stylesheet files via CDN, is quite common. However, if the CDN is compromised, those cached files and any other sources on your site will be compromised.

Let’s see what the Mozilla Developer Network has to say about this:

“… using CDN users also face risks, if an attacker has control of the CDN, they can inject malicious content into files on the CDN (or replace it). complete files) and so the attacker can also attack all websites that download files from that CDN. ”

To prevent this, the W3C introduced and introduced Subresource Integrity (SRI) in early 2014. Subresource Integrity (SRI) compares the hash value (the result of applying a hash function to the input ) of the resource to claim it.

Suppose there is 1 JavaScript file in 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 tag. script, enter example.js into 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 the above code has to load example.js, the browser first applies the hash function, and loads and runs example.js only if its hash value matches with integrity values.

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 popular CDN provides value SRI integrity, but you can also create an SRI integrity value.

Override the form target in the submit button

You may already be familiar with the target attribute, which determines where to open a hyperlinked, such as on the same page or in a new tab. Also you probably already know the same target attribute used in the tag form> Decide where to display the response from the form submission.

One of the original HTML5 sketches, formtarget was defined with four other properties: formaction, formenctype, formmethod, and formnovalidate.

These properties can be used with the submit buttons, and they override the corresponding attributes in the buttons’ tags.

So when a form is submitted using the submit button with the formtarget property, the response is displayed according to the formtarget value, instead of the target value of the form.

first.form action = “/ save” target = “_ self” >

2.input type = “submit” name = “save” />

3.input type = “submit” name = “print” formaction = “/ print”

4.formtarget = “_ blank” />


In the code above when the form is submitted with the 2nd submit button (print button), the response will appear in a new web browser context, such as in a new tab.

Hiding semantic elements

When it comes to hiding element, we have gone through different stages of hiding element: use opacity: 0, visibility: hidden, height: 0; width: 0, display: none, text-indent: -999px CSS file.

Each method will have its own purpose, no method is redundant, and that is not a hidden HTML attribute. If a hidden element is specified on it, that element will be hidden.

div hidden> …/ div>

It works the same as display: none; CSS rules, elements with hidden properties are not displayed on the page.

Any script in the element will be executed and if it’s a form, it will be submitted along with other form controls during the form submission.

However, the highlight of hidden is that it is semantic compliant. Semantic and hidden and part of HTML5.

Moreover, when an element is hidden, it will be hidden on all platforms, not only web browsers but also screenreader, TV, projector, etc.

It does not depend on the style, even when you separate the CSS from the page, the element remains hidden. In case of display: none; it will not happen. Therefore, it can be said that hidden is the “iron shield” of display: none ;.

Add shortcut

The accesskey attribute is defined in HTML4, creating shortcuts that users can use to manipulate an element on the page.

The shortcut combination depends on 2 things:

first. The accesskey value we give to an element

2. Keys are pre-assigned by the browser to the same element.

Such as:

first. button accesskey = “v” onclick = “alert (‘View Click’)”>



On Firefox, if you press a key combination Alt + Shift + V (in Windows) or Alt + Control + V (in MacOS), you will receive a “View Clicked” message.

Because the preset browser keys vary by browser and operating system, you allow the user to know which combination keys are used for shortcuts.

So Taimienphi.vn introduced you to 5 features of HTML. If you have any questions you want Taimienphi.vn to answer, you can leave your comment below the article.

If you use ThunderBird to send email you refer to how Create HTML signatures for Email here on ThunderBird to make your email more professional

Often web users will insert links into images in HTML to optimize your website, if you do not know how to insert links into images in HTML, Taimienphi will guide you in the most detailed way.


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *