Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, we rounded up with our tutorial on Html phrase tags. For the purpose of this tutorial, we are going to be discussing about the Html Meta Tags.
Html allows it's users to specify metadata (an additional important information about a document in a broad number of ways.) The meta elements can be used to include name/value pairs which describes properties of the Html document, such as author, expiry date, a list of keywords, document author etc.
RECOMMENDED: Html Attribute 2
The <meta> tag is used to provide such addittional information. This tag is an empty element meaning that it does not have a closing tag but it carries information within its attributes.
You should be aware that it is very much possible to include one or more meta tags in your document based on what information you wanna keep in your document but in general, meta tags do not affect physical appearance of the web page. So from appearance point of view, its does not really matter if meta data are included or not.
Adding Meta Tags to Your Document
Now lets take a good look at how meta tags can be added to the head section of our document.
Meta data can be added to your web pages by placing <meta> tags in the header part of your Html document which is been or can be represented by <head>.....</head> tags. A Html meta tag can have the following attributes below in addition to core attributes.
| Sr.No | Attribute & Description |
|---|---|
| 1 |
Name
Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
|
| 2 |
content
Specifies the property's value.
|
| 3 |
scheme
Specifies a scheme to interpret the property's value (as declared in the content attribute).
|
| 4 |
http-equiv
Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.
|
Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later on these your specified keywords are used by search engines while indexing your webpage for searching purpose.
RECOMMENDED: Html Basic Tags
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="keywords" content="HTML, CSS, BOOTSTRAP" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta name="keywords" content="HTML, CSS, BOOTSTRAP" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
Like i said earlier Meta data does not have any effect on the physical appearance of the web page, but you can still try the above code out using your text editor for a better understanding.
Document Description
You can use <meta> tag to give a short description about the Html document. This again can be used by various search engines while indexing your webpage for search purpose.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="description" content="Learning about meta tags on web design tutorialz" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta name="description" content="Learning about meta tags on web design tutorialz" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
Like i said earlier Meta data does not have any effect on the physical appearance of the web page, but you can still try the above code out using your text editor for a better understanding.
RECOMMENDED POST: Grouping Content
Document Revision Date
You can also use the Html <meta> tag in giving information about when last the document was last updated. This information can be used by various web browsers while refreshing your web page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="revised" content="Web design tutorialz , 02/07/2017" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta name="revised" content="Web design tutorialz , 02/07/2017" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box.
Document Refreshing
You can use the <meta> tag to specify the duration after which your web page will keep refreshing automatically.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="refresh" content="10" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="refresh" content="10" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. In the above code the web page is going to be refreshing automatically in every ten seconds.
Page Redirection
You can use <meta> tag to redirect your web page to other web pages, you can also specify a duration if you want to redirect the page after a certain number of seconds.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="refresh" content="10; url=https://google.com" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="refresh" content="10; url=https://google.com" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
You can try the above code out to get a better understanding of what we realy talking about.
Setting Cookies
First let me explain what cookies are, they are data stored in small text files on your computer and it is exchanged between the browser and web server in keeping track of various informations based on your web application need.
You can use <meta> tag to store cookies on client side and later this informations can be used by the web server for tracking the site visitors.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="cookie" content= "userid=abx; expires=Wednesday, 05-july-17 20:20:59 GMT;" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="cookie" content= "userid=abx; expires=Wednesday, 05-july-17 20:20:59 GMT;" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
Take note that if expiration date and time is not included, then the cookie is considered as a session cookie and will be deleted when the user exists the browser.
RECOMMENDED: Html-Phrase Tags[CONCLUSION]
Seeing Author Name
You can set name of author in a web page using the <meta> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="name" content="Nkpara Kennedy Chinaza" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta name="name" content="Nkpara Kennedy Chinaza" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
Specify Character Set
You can use <meta> tag to specify character set used within the web page.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="Content Type" Content="text/html; charset=UTF-8" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="Content Type" Content="text/html; charset=UTF-8" />
</head>
<body>
<p> Hello World</p>
</body>
</html>
Alright guys we have come to the end of this tutorial post. In my next tutorial i will be talking about Html comments, thanks for reading and bye for now.