Hello everyone 👋 welcome back. And today we are going to talk about 7 Cool HTML tricks that you Don't Know!, so before please don't forget to share your interested ones once you have read the post.
So let's See something.
1. Check Spelling Errors inside
This tag is very useful when you want to let user to check if they are making any spelling mistake while filling the form.
When the user types incorrect spelling inside an input field this attribute shows a red line underthe incorrect spelling.
2. Translate Web page in to different language
<p translate="yes">This text can be translated.</p>
<p translate="no">This text can not be translated.</p>
Translate attribute allows or disallows the user to translate the text on their web page according to the value you set to this attribute. "yes ' for allowing to translate that text and 'no" for disallowing).
For EXAMPLE:-
You can use this attribute on the text like "Company Name/Brand Name" to prevent these to be translated when user translate the whole pagein different language.
3. Lazy loading Images
<img srcz"i.mage.png" loadingz"lazy" alt:"image"> Lazy loading your images can help to boost yoursite performance and responsiveness. This attribute prevents the loading of images that aren't really needed on the screen immediately. However, as you scroll down or closer to the image, the image begins to load. Thisattribute will help you to speed up your page loading time.
4. Hide Element without using
Yes, you can hide any element just by adding "hidden" attribute to the opening tag of it.
It works like CSS "display=none;" rather than "visibility:hidden".
It means, element takes no space while CSS "visibility: hidden" only hides the element but still takes up the space.
5. Base URL for Repeating Link
<head>
<base hrefz"https://www.twitter.com/ target="_blank">
</head>
<body>
<a href="elonmusk">Elon Musk</a>
<a hrefn"billgates">Bill Gate</a>
</body>
This tag comes in handy when you have a lot of anchor tags redirecting to a certain URL and allthe URLS start with the same base address.
FOR EXAMPLE :-
If I want to specify the URL to the Twitter handles of "Elan Musk" and "Bill Gates', the start of the URL( the domain) will be the same but what follows that will be their respective IDs. Normally you have to paste the link twice along with the same domain name but with the help of base URL you can get rid of this repetition.
6. Auto Refresh Webpage
<meta http-equiv=refresh content="3"/>
This meta tag allows you to automatically refresh the webpage after a certain amount of time(in seconds).
In above Example the page loads refresh automatically after each 3 Seconds. You can mention the desired "Seconds"(time)" inside "content" attribute.
7. Content Editable Attribute
<p contentEditable> Hi,I'm an editable paragraph. Just click on me to edit</p>
ContentEditable attribute gives permission to the user to Edit that particular element on which this is applied, User can simply click on the element and edit it.
____________________________________________________
Thank you for reading <3
If you interested this post please don't hesitate to share it.
Gracias.