Tags

,

The HTML <meta> Element

  • Metadata is data (information) about data.
  • The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
  • Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
  • The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<meta> tags always go inside the <head> element.

<meta> Tags – Examples of Use

<head>
<meta name=”description” content=”Free Web tutorials”>
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
<meta name=”author” content=”Hege Refsnes”>
<meta charset=”UTF-8″>
</head>

Definition and Usage

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Note: <meta> tags always goes inside the <head> element.

Note: Metadata is always passed as name/value pairs.

Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. if none of these are defined, the content attribute CANNOT be defined.


Differences Between HTML 4.01 and HTML5

The scheme attribute is not supported in HTML5.

HTML5 has a new attribute, charset, which makes it easier to define charset:

  • HTML 4.01: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  • HTML5: <meta charset=”UTF-8″>

Differences Between HTML and XHTML

In HTML the <meta> tag has no end tag.

In XHTML the <meta> tag must be properly closed.

Define keywords for search engines:

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

Define a description of your web page:

<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

Define the author of a page:

<meta name=”author” content=”Hege Refsnes”>

Refresh document every 30 seconds:

<meta http-equiv=”refresh” content=”30″>

 

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>

Example for setAttribute : 

 

<meta id=”description” name=”description”

content=”example meta description content” />

<meta name=”keywords” content=”example meta keywords content” />

<meta name=”author” content=”example author conent” />

<title>example title content</title>

<script type=”text/javascript”>

 window.onload = function () {

     setProductMeta();

 }

function setProductMeta(){

 document.getElementById(“description”).setAttribute(“content”,”dynamic meta description”);

 document.getElementById(“keywords”).setAttribute(“content”,”dynamic meta description”);

 document.title = ‘dynamic meta title’;

}

</script>

Example for getAttribute : 

 

<meta id=”description” name=”description”

content=”example meta description content” />

<meta name=”keywords” content=”example meta keywords content” />

<meta name=”author” content=”example author conent” />

<script type=”text/javascript”>

window.onload = function () {

 setProductMeta();

}

function setProductMeta(){

 var metaDesc = document.getElementById(“description”).getAttribute(“content”);

 var metaKeys = document.getElementById(“keywords”).getAttribute(“content”);

 var metaAuthor = document.getElementById(“author”).getAttribute(“content”);

 document.getElementById(“demoDesc”).innerHTML= metaDesc;

 document.getElementById(“demoKeys”).innerHTML= metaKeys;

 document.getElementById(“demoAuthor”).innerHTML= metaAuthor;

}

</script>

<div id=”demoDesc”></div>

<div id=”demoKeys”></div>

<div id=”demoAuthor”></div>

 

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″>

jQuery:

$(‘head’).append(‘<meta http-equiv=”X-UA-Compatible” content=” IE=Edge,chrome=1″ /> ‘);

JavaScript:

document.getElementsByTagName(‘head’)[0].innerHTML += ‘<meta id=”viewport” name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”>’;

<script>

var meta = document.createElement(‘meta’);

meta.setAttribute(‘http-equiv’, ‘X-UA-Compatible’);

meta.setAttribute(‘content’, ‘IE=Edge’);

document.getElementsByTagName(‘head’)[0].appendChild(meta);

</script>

 Thanks,

Advertisements