Home » HTML » HTML Meta Tag

HTML Meta Tag

HTML lets you specify metadata - additional important information about a document in variety of ways. The META elements can be used to describe properties of the HTML document, such as author, expiry date, a list of keywords, document author,description of web page, etc.

Information present in meta tag is crucial for the search engines because that information will be used by search engine to ensure the content, a user is searching for. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.

You can include any number of meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.


Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags.

Meta Keywords

You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Tag </title>
<meta name=""keywords content="HTML, Meta Tags, Metadata">
</head>

<body>

<p> This is an Example of Meta Tag. </p>

</body>
</html>


Meta Description

You can use <meta> tag to give a short description about the content present in the web page. This again can be used by various search engines while indexing your webpage for searching purpose.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Description </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
</head>
<body>
<p> This is an Simple Example of Meta Description. </p>
</body>
</html>

Meta Document Revision Date

You can use <meta> tag to give information about the last time the document was updated. This information can be used by various web browsers while refreshing your webpage.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Revision </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
<meta name="revised" content="CodeRepublics">
</head>
<body>

<p> This is an simple example of Meta Revision. </p>

</body>
</html>

Meta Page Redirection

You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Redirection </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
<meta name="revised" content="Coderepublics">
<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5" url="http://www.coderepublics.com">
</head>
<body>
<p> This is an simple example of Meta Redirection. </p>
</body>
</html>

Author

You can set an author name in a web page using meta tag.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Author </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
<meta name="author" content="Bill Gates">
</head>
<body>
<p> You can set an author name in a web page using meta tag. </p>
</body>
</html>

Meta Charset

You can use <meta> tag to specify character set used within the webpage. If it is not defined then the default character set will be used.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Charset </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
<meta name="author" content="Bill Gates">
<http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>The charset attribute specifies the character encoding for the HTML document.</p>
</body>
</html>

Cookie

Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various infromation based on your web application need.

You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor.

The http-equivis used for http response message headers. It helps to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Cookie </title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata">
<meta name = "description" content = "Learning about Meta Tags">
<meta name = "author" content = "Mahnaz Mohtashim">
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5">
</head>
<body>
<p> Hello..! Welcome to CodeRepublics. </p>
</body>
</html>

If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.












Follow Us: