5 Things You Can Do With HTML Meta Tag

Meta Tag is used to store a square of information on a web page. Essentially, it is information about data. Its purpose is for browsers and hunt engines to know and know a page better.

As web developers, we’re used to environment a page description, author, or keyword around meta tag. However, there are a series of meta tab capabilities that many of us substantially aren’t wakeful of. Here I’ve put together 5 meta tab facilities that we might have not listened of before.

Recommended Reading: Promote Your iOS App With iTunes App Meta Tag

1. Controlling Browser Cache

When we revisit a web page, it stores a web page in cache to make it bucket faster in successive visits. You might have come opposite an instance where your page is not updated with a changes that you’ve made. This is given a browser shows we a cached page. To prevents this, we can invalidate browser cache by regulating meta tag. To invalidate browser cache, we can use:

meta http-equiv="Cache-Control" content="no-store" /

This meta tab is famous in Firefox, Chrome, and Internet Explorer. Even some-more so in IE, where we can use some-more values and specifications to invalidate caching, as follows.

meta http-equiv="Cache-Control" content="no-cache" /
meta http-equiv="Pragma" content="no-cache" /

You can also set an death date to safeguard that a browser will uncover a record that’s uninformed from a server, rather than from a cache.

meta http-equiv="expires" content="Fri, 18 Jul 2014 1:00:00 GMT" /

The meta information above means that request is deliberate lapsed after a specified date and time. If we set it to “0“, a browser will check for a uninformed new request on any visit.

2. Setting Cookies

Similar to cache, cookies is a tiny square of information that is stored in a browser by a websites you’ve visited. Websites might reuse a cookies to tailor some website functionalities. A genuine bland instance is when we emporium in an online store. If you’ve combined a few equipment to a basket, as prolonged as we have not nonetheless checked out, a equipment will sojourn in a basket even yet we have left a browser for several days.

To set cookies on meta-tag we can use:

meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZONE"

name=data is a name of a cookies that determines a values set in it. path is a trail of document. Whereas, a value of expired indicates a time and date when cookies are deleted from your computer. If we leave a lapsed date empty, a cookies will be deleted once we quit a browser.

As an example, if we wish a cookies to end on 31 January, 2015 we can set:

meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Thursday, 01-Jan-2015 00:00:00 GMT"

3. Refreshing Web Pages

You can set a page to modernise after a certain period. meta http-equiv=”refresh” specifies a check in seconds for a browser to modernise a page automatically. This meta-tag selection next will make a browser reload a page each 5 seconds.

meta http-equiv="refresh" content="5"

Below, we can see that a page is automatically rested by a browser.

4. Redirecting

We can also use a refresh meta tab to route a page to a specific destination. This following instance will lead us to example.com after we perspective a page for 5 seconds.

meta http-equiv="refresh" content="5; url=http://example.com/"

You can see it live below.

To route a page immediately, set it to 0, as follows:

meta http-equiv="refresh" content="0; url=http://example.com/"

5. Page Transition

You can also request transitions to your web pages with meta-tag in a approach that is identical to PowerPoint. The syntax of page transition with meta tab looks like below:

meta http-equiv="page-enter" content="revealtrans(duration=seconds,transition=num)" /

meta http-equiv="page-exit" content="revealtrans(duration=seconds,transition=num)" /

meta http-equiv="page-enter" content="blendTrans(duration=sec)" /

Note that this usually works on ancient Internet Explorer given page-enter and page-exit are Microsoft’s exclusive meta tab specifications. You can mention how prolonged a transition will run for regulating duration. The Transition should be filled by a number/integer between 0 – 23 that refers to a transition form supposing by Microsoft. Whereas, meta http-equiv=”page-enter” content=”blendTrans(duration=sec)” / is another value that comes but a transition type.

<!–

Suggestion:

–>

Author: Agus

Agus is a song enthusiast, backpacker and formula writer. He has an aspiration to build a Skynet on tip of HTML and CSS.

Advertisement

5 Things You Can Do With HTML Meta Tag