Monday, 13 June 2016

HTML meta tag


HTML: <meta> tag

This HTML tutorial explains how to use the HTML element called the <meta> tag with syntax and examples.

Description

The HTML <meta> tag contains information or metadata that is not directly visible on the web page, but is used by browsers and search engines. This tag is also commonly referred to as the <meta> element.

Syntax

The most common syntax for the HTML <meta> tag is:
<head>
<meta name="" content="">
</head>
or in XHTML, the syntax for the <meta> tag is:
<head>
<meta name="" content="" />
</head>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <meta> tag:
AttributeDescriptionHTML Compatibility
charsetCharacter encoding for pageHTML 5
contentValue for the metadata. It provides the value associated with the http-equiv attribute or the nameattribute.HTML 4.01, HTML 5
http-equiv
Defines the pragma. The value of the pragma found in content can be:
  • content-language (Obsolete)
  • content-type (Obsolete)
  • default-style
  • refresh
  • set-cookie (Obsolete)
HTML 4.01
nameName of the metadata. Can be one of the following values:
  • application-name
  • author
  • description
  • generator
  • keywords
  • creator
  • googlebot
  • publisher
  • robots (for name="robots", content can be one of the following: index, noindex, follow, nofollow, noodp, noarchive, nosnippet, noimageindex, noydir, nocache)
  • slurp
  • viewport (for name="viewport", content can be one of the following: width, height, initial-scale, maximum-scale, minimum scale, user-scalable)
HTML 4.01, HTML 5
schemeScheme in which metadata is describedObsolete

Note

  • The HTML <meta> element is found within the <head> tag.

Browser Compatibility

The <meta> tag has basic support with the following browsers:
  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <meta> tag below, exploring examples of how to use the <meta> tag in HTML 5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML 5 Document

If you created a new web page in HTML 5, your <meta> tags might look like this:
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The HTML meta tag is an element that resides within the HTML head tag.">
<meta name="keywords" content="html, meta, tag, element">
<meta name="author" content="www.techonthenet.com">
<title>HTML 5 Example by www.techonthenet.com</title>
</head>

<body>
</body>
</html>
In this HTML 5 Document example, we have created 5 meta tags. The first meta tag (charset) defines the character encoding for the HTML document. The second meta tag (viewport) is used when designing a responsive web site. The third meta tag (description) provides a description for the web page for the search engines. The fourth meta tag (keywords) provides keywords for the search engines. The final meta tag (author) defines the author of the web page.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <meta> tag might look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The HTML meta tag is an element that resides within the HTML head tag.">
<meta name="keywords" content="html, meta, tag, element">
<meta name="author" content="www.techonthenet.com">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
</body>
</html>
In this HTML 4.01 Transitional Document example, we have created 5 meta tags. The first meta tag (charset) defines the character encoding for the HTML document. The second meta tag (viewport) is used when designing a responsive web site. The third meta tag (description) provides a description for the web page for the search engines. The fourth meta tag (keywords) provides keywords for the search engines. The final meta tag (author) defines the author of the web page.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <meta> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The HTML meta tag is an element that resides within the HTML head tag." />
<meta name="keywords" content="html, meta, tag, element" />
<meta name="author" content="www.techonthenet.com" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
</body>
</html>
In this XHTML 1.0 Transitional Document example, we have created 5 meta tags. The first meta tag (charset) defines the character encoding for the HTML document. The second meta tag (viewport) is used when designing a responsive web site. The third meta tag (description) provides a description for the web page for the search engines. The fourth meta tag (keywords) provides keywords for the search engines. The final meta tag (author) defines the author of the web page.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <meta> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The HTML meta tag is an element that resides within the HTML head tag." />
<meta name="keywords" content="html, meta, tag, element" />
<meta name="author" content="www.techonthenet.com" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
</body>
</html>
In this XHTML 1.0 Strict Document example, we have created 5 meta tags. The first meta tag (charset) defines the character encoding for the HTML document. The second meta tag (viewport) is used when designing a responsive web site. The third meta tag (description) provides a description for the web page for the search engines. The fourth meta tag (keywords) provides keywords for the search engines. The final meta tag (author) defines the author of the web page.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <meta> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The HTML meta tag is an element that resides within the HTML head tag." />
<meta name="keywords" content="html, meta, tag, element" />
<meta name="author" content="www.techonthenet.com" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
</body>
</html>
In this XHTML 1.1 Document example, we have created 5 meta tags. The first meta tag (charset) defines the character encoding for the HTML document. The second meta tag (viewport) is used when designing a responsive web site. The third meta tag (description) provides a description for the web page for the search engines. The fourth meta tag (keywords) provides keywords for the search engines. The final meta tag (author) defines the author of the web page.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)