W3C Designer

what is meta tags in html

7/04/2021
Hacker
meta tags in html

Meta Tags

The <meta> tag defines metadata about the HTML document. Metadata is data (information) about data.

The <meta> tag contains metadata, which specifies the page description, keywords, author of the document, etc. Meta data is used by a web browsers, search engines, and another web services. It is not display on the web page.

A web document can have more than one <meta> tag, but generally, the physical appearance of the document is not affected by this.

The <meta> tag is placed in the <head> tag.

The <meta> tag is used to provide such additional information. This tag is an empty tag and that means it does not have a closing tag, but it includes information within its attributes.

  • Meta is typically used to define the character set, document author, page description, Keywords, and viewport settings.
  • Metadata is not displayed on the webpage, but is used by search engines, browsers and other web services that scan the site or webpage to find out what the webpage is about.
  • Meta-data is used by a web browsers for how to reload contents or pages, search engines (keywords), and another web services.
  • One method is to give web designers control over the viewport (the user's visible area of a web page) via the <meta> tag.

If the name or http-equiv attributes are defined, you must define the content attribute. If these attributes are not defined, the content attribute cannot be defined either.

Meta tag syntax in html

The <meta> tag is empty, which means that the closing tag is not required. But in XHTML, the (<meta>) tag must be closed (<meta />).

Syntax <meta />

Attributes of meta tag in html

A meta tag can have the following attributes in addition to the main attributes.

Attribute Value Description
charset character_set Defines the encoding of the document.
content text Specify the value of http-equiv or the name attributes, depending on the reference.
http-equiv It specify a hypertext header that simulates the HTTP header and determine its processing. When the web page is displayed, the browser will follow the instructions that given in the attributes.
content-type Indicates the type of document encoding.
default-style Indicates preferred style to use on the page. (Must contain the id of the <link> element, which refers to a CSS style sheet, or the identifier of the <style> element that contains the style sheet).
refresh Defines the time in seconds before the page is reloaded or the time before the redirection to another page, if "url = page_name" is specified after the time is specified.
name Defines the name for meta tag. If name attribute is missing, it considered equivalent to the http-equiv attribute. Not used when there are http-equiv or charset attributes.
application-name It specify a name for the web application that used on the web page.
author Indicates the name for the web page’s author.
description Contains description of the web page for search engines.
generator It indicates the S/W which used to build the web page for non handwritten pages.
keywords Contains keywords.
scheme format/url Contains details about the scheme or name of the scheme itself, that should be used to illustrate the value of content attribute property.
Not supported in HTML5.

how to add meta tags in html

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

Specifying Keywords

we can use <meta> tag to define important keywords related to the web page and later these keywords are used by the search engines while indexing webpage for search purpose

Example

Following is an example, where we are adding html, meta tags, metadata about the document as important keywords.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. </head>
  7. <body>
  8. <p>Hello HTML5!</p>
  9. </body>
  10. </html>

Output

This will produce the following result −

Hello HTML5!

Document Description

We can <meta> Tags to give a brief description about the document. It can be used by different search engines while indexing webpage for search purpose.

Example

Following is an example, where we are adding html, meta tags, metadata about the document as important keywords.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta name = "description" content = "Learning about Meta Tags." />
  7. </head>
  8. <body>
  9. <p>Hello HTML5!</p>
  10. </body>
  11. </html>

Output

This will produce the following result −

Hello HTML5!

Document Revision Date

You can <meta> Tags to provide information about when the document was last updated. This information may be used by various web browsers when refreshing your webpage.

Example

Following is an example, where we are adding html, meta tags, metadata about the document as important keywords.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta name = "description" content = "Learning about Meta Tags." />
  7. <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
  8. </head>
  9. <body>
  10. <p>Hello HTML5!</p>
  11. </body>
  12. </html>

Output

This will produce the following result −

Hello HTML5!

Document Refreshing

A <meta> Tags can be used to specify the period after which your web page will continue to refresh automatically.

Example

If we want our web page keep refreshing after every 7 (seven) seconds then use the following syntax.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta http-equiv = "refresh" content = "7" />
  7. </head>
  8. <body>
  9. <p>Hello HTML5!</p>
  10. </body>
  11. </html>

Page Redirection

You can <meta> Tag your page to redirect to another webpage. You can also specify a duration if you want the page to be redirected after a few seconds.

Example

Below is example for redirecting the present web page to another web page after five seconds. Do not specify the content attribute if you want the page to be redirected immediately.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta name = "revised" content = "w3codedesigner, 3/7/2014" />
  7. <meta http-equiv = "refresh" content = "5; url = http://www.w3codedesigner.blogspot.com" />
  8. </head>
  9. <body>
  10. <p>Hello HTML5!</p>
  11. </body>
  12. </html>

Setting Cookies

Cookies are data, which stored in small text files on our computer and exchanged between a browsers and a web servers to keep track of various information depending on the web application requirement.

You can <meta> This information can be used by web servers to tag tags to store cookies on the client side and later to track site visitors.

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
  7. </head>
  8. <body>
  9. <p>Hello HTML5!</p>
  10. </body>
  11. </html>

If we don't includes the expiration date and time, then cookie is considered a session cookie and it will be deleted when the user exits the web browser.

Setting Author Name

We can set author name in web page by using meta tag. See an example below −

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta name = "author" content = "W3C" />
  7. </head>
  8. <body>
  9. <p>Hello HTML5!</p>
  10. </body>
  11. </html>

Specify Character Set

You can <meta> Tags to specify the character set used within the webpage.

Example

By default, the web browser and the web servers use the ISO-8859-1 (known as Latin 1) encoding for process web pages. Following is an example to set UTF-8 encoding −

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
  7. </head>
  8. <body>
  9. <p>Hello HTML5!</p>
  10. </body>
  11. </html>

To render a static page with traditional Chinese characters, the webpage should have a <meta> Tags - to set the Big5 encoding.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Meta Tags Example</title>
  5. <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
  6. <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
  7. </head>
  8. <body>
  9. <p>Hello HTML5!</p>
  10. </body>
  11. </html>

The usage of the <meta> tag with its different values

Following are some of the typical syntax of meta tags that show the various uses of meta tags.

Define the keyword for the search engines:

  1. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

It specifies the list of keyword which is used by search engines.

Define the website description:

  1. <meta name="description" content="Tutorials on HTML, CSS and PHP">

This metadata defines the webpage description that is useful for providing contextual searches performed by search engines.

Define the author of the page

  1. <meta name="author" content="myauthor">

It specifies the author of the page. It is useful to extract author information by Content management system automatically.

Refresh the document every one minute (60 seconds):

  1. <meta http-equiv="refresh" content="60">

It specifies to provide instruction to the browser to automatically refresh the content after every 60sec (or any given time).

Set the viewport to make the website look good on all devices:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

It defines the viewport to control the webpage dimension and scaling so that website looks good on all devices. If this tag is available, it indicates that this webpage is supported on mobile devices

Specify Charset

  1. <meta charset="utf-8">

It defines the character encoding. The value of charset is "utf-8" which means it will support to display any language.

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">
  6. <meta name="description" content="Free Online tutorials">
  7. <meta name="author" content="thisauthor">
  8. <meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-tags-list">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. </head>
  11. <body>
  12. <h2>Example of Meta tag</h2>
  13. <p>This example shows the use of meta tag within an HTML document</p>
  14. </body>
  15. </html>

1 comment:

  1. Web DeveloperJanuary 22, 2022 at 10:20 AM

    Really useful information.
    We place meta tags in my website for seo.
    Its working my website seo is high.

    Thanks for give html meta tag information with complete knowledge.

    Amazing w3code designer.

    ReplyDelete