Do You Know These HTML5 Cool Tricks?
Today am going to teach you some of the cool tricks of HTML5 that you guys may or may not be familiar with.
So, lets begin………
1. HTML prefetch webpage.
<link rel=”prefetch prerender” href=”” />What rel=”prefetch” do?
Let me explain, Lets say you open up your website homepage and you have navigation menu of “ About, Blog,Contact ”.
You know that after landing the homepage the user is more likely to navigate to about page then you can prefetch the CSS files that will necessary for that webpage in the background before user even clicks on the link to navigate to that page. What it does is speeds up the process and user feels little to no delay in a reloading of a webpage.
What rel=”prerender” do?
It works same but its used to render the whole webpage in the background rather than just CSS file. It only works in Chrome & IE.
2. Hiding elements without the help of CSS.
<h1 hidden>Hello World</h1>Yes am not joking, Its true you can hide html elements without the help of CSS by using ‘hidden’ attribute. Also it doesn’t work like CSS hidden and what I mean by that is when we hide any element using attribute ‘hidden’ it works more like CSS “display: none” rather than “visibility: hidden”. It takes no space while CSS “visibility: hidden” only hides the element but still take up the space.
3. Editable Content
<h1 contentEditable>Hello World</h1>What it does? Well it lets you edit the content of element inside the browser just by clicking on the content.
4. HTML anchor element tricks
<a href=”skype:username?chat”>Start chat with the username</a><a href=”skype:username?call”>Start call with the username</a><a href=”skype:username?add”>Add username</a><a href=”mailto:someone@gmail.com">Send email</a><a href=”tel:00000000”>Make a call</a>
These are some of the things you can do with anchor tags that you may or may not be familiar with before reading this article. Well the good news is now you know these anchor element tricks.
5. Refreshing browser after a specific time.
<meta http-equiv=”refresh” content=”3"/>With this help of this meta code you can refresh your webpage every 3 seconds. Isn’t it cool? You can use it to make your browser refresh every 5 seconds while you do your CSS. You don’t have to refresh your browser manually to see the changes.
Note: you can set content value to any value you like and it will increase or decrease the seconds based on the given value.
Thanks for reading this article, I hope you loved reading these some of the cool tricks of HTML. I’ll sharing some more cool stuffs very soon.
Till then Keep coding….
