Learn Meta Tag In HTML

Today we are going to learn meta tag in html.

In this post we are going to see few more tags and things that we can do in html.

meta tag: Learn Meta Tag In HTML

Let me explain meta tag with the help of an example,

<!DOCTYPE html>
<html>
<head> 
<title>First Web Page</title>
<meta name = "keywords" content = "HTML Meta Tags" />
<meta name = "description" content = "Meta tags example" />
<meta http-equiv = "refresh" content = "2" />
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

The head section this time is a little more elaborate and what’s common is the title tag and it has the text,

<title>First Web Page</title>

and inside the body section we have a paragraph tag. This time not the heading tag and it has a text,

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

I just show you guys how this file looks in browser (google chrome),

Learn Meta Tag In HTML

So it’s very simple you have the title and you see the paragraph text above.

So what are those extra tags doing there?

Here as i said within the head section you have tags that allow to save information about your web page. For instance you want to make your website search engine friendly in the sense that you want search engines to be able to find your web page on requests from users. When you know you search for malls in Los Angeles. So if you have a website that has information about malls in Los Angeles then you would have to inform search engines that ok hey i’ve got some information about malls in los angeles and this is how you’re going to tell them.

<meta name = "keywords" content = "HTML Meta Tags" />
<meta name = "description" content = "Meta tags example" />
<meta http-equiv = "refresh" content = "2" />

So you have to use the meta tag for that. Immediately after the title tag you got the word meta between the lesser than symbol and greater than symbol and as you must have noticed the meta tag doesn’t have a closing tag the way the title tag has. So the meta tag is a very simple tag to construct. You just have to make sure that you have the right attribute and value pairs and this is very simple to understand. What i mean is that after the word meta you have to give space and then you have to have an attribute that goes along with the meta tag. So one attribute that goes along with it is the name attribute and since we want to save some keywords about our webpage you use the keywords value within double quotes and after the assignment operator after attribute name name. Name is the name of an attribute and the value that it takes for you to be able to save some keywords about your web page is keywords and similarly content is another attribute and this is where you’re going to put in your keywords.

So going by example that i gave you if you have a website that has information about malls in los angeles so that’s what you will put in here,

content = "Los Angeles Malls"

So that’s what you will put here you know “Los Angeles Malls” and maybe names of a few malls between double quotes and if you have multiple keywords and you would separate them with the comma symbol. And to close meta tag you could either use a closing meta tag the way we work with the title tag or you could just put in a forward slash and then the closing angular bracket or greater than symbol like this,

/>

So this is how you include the keywords about your webpage or within the web page and on the next line i have another meta tag and this one is to save some description of the web page. Again to make it search engine friendly so you have the meta tag again and this time the name attribute takes the value description and the content attribute takes the value meta tags illustration. So this is the proper description that i have thought this web page should have and then again to close it with the forward slash and the closing angular bracket.

Also Read – Hover HTML Example

And then on the next line i have another meta tag and this one has the attribute “http-equiv” and this has the value refresh. So this particular attribute is used to refresh your webpage and the content attribute this time takes the value “2”. So this is the number of seconds after which you want your webpage to be refreshed.

I’ll show you guys this page in google chrome and you must have noticed that the page is getting refreshed after every two seconds and sometimes you would want this to happen if you want your content to be updated and displayed to users after every few seconds and let’s say you do not want to redirect your users to the same site after a few seconds. Let’s say you want to take them to google after two seconds. So what do you have to do for that is you’ll have to put a semicolon after the number of seconds as the value for the content attribute in the meta tag and then you’ll have to type in url and then the equal to symbol and then http://www.google.co.in, like this,

<meta http-equiv = "refresh" content = "2;url = http://www.google.co.in" />

And save your file and refresh your web browser.

Conclusion:

So this is how you redirect users using the meta tags in html and i hope you have understood the concept.

About the author

admin

View all posts

Leave a Reply

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