Categories
Learn HTML

HTML: meta tag

HTML: <meta> tag

In this series of learning HTML, we will teach you how to use HTML meta tag with proper syntax and lots of examples. Let’s start on the HTML meta tag.

Description of HTML meta tag

The HTML “meta” tag is a special type of tag that provides metadata or data about the HTML document itself. Metadata is information about the data on the page, rather than information that is displayed directly to the user.

Here is an example of a basic “meta” tag:

<meta name="description" content="A brief description of the website or webpage">

In the example above, the “meta” tag is used to define the description metadata for the page. The “name” attribute specifies what type of metadata is being provided, and the “content” attribute provides the actual content of the metadata.

There are several different types of metadata that can be defined using the “meta” tag, including:

  • description: a brief description of the website or webpage
  • keywords: a list of keywords or phrases relevant to the content on the page
  • author: the name of the author of the content
  • viewport: specifies the viewport settings for mobile devices
  • charset: specifies the character encoding for the page
  • robots: specifies whether search engine bots should index the page or follow links on the page.

Metadata can be important for search engine optimization (SEO) and for ensuring that the web page is displayed correctly in different browsers and devices.

 

Syntax of HTML meta tag

The <meta> tag in HTML is used to provide metadata about a webpage, such as its description, keywords, author, character set, and more. Here’s the basic syntax of the <meta> tag:

<meta name="metadata-name" content="metadata-value">

The name attribute is used to specify the type of metadata being provided, and the content attribute is used to provide the value for that metadata. Some common metadata names include:

  • description: A short summary of the webpage content.
  • keywords: A comma-separated list of keywords related to the webpage content.
  • author: The name of the webpage author.
  • viewport: The initial viewport settings for responsive design.
  • charset: The character set used by the webpage.

Here’s an example of using the <meta> tag to provide a webpage description and keywords:

<meta name="description" content="This is a webpage about HTML metadata">
<meta name="keywords" content="HTML, metadata, description, keywords">

Note that some metadata values, such as the description and keywords, may be used by search engines to index and display your webpage in search results.

 

Global Attributes

The <meta> tag is an important element in HTML that is used to provide metadata about a web page. Here are some of the global attributes that can be used with the <meta> tag:

  1. charset: This attribute specifies the character encoding used in the document, which can affect how text and other characters are displayed on the page.
  2. content: This attribute specifies the value of the metadata associated with the <meta> tag. The value can include information such as keywords, descriptions, author names, and more.
  3. http-equiv: This attribute specifies the HTTP header information for the web page. This can be used to provide information such as the content type, language, or cache control settings.
  4. name: This attribute specifies the name of the metadata associated with the <meta> tag. This can be used to provide information such as the author name, keywords, descriptions, and more.
  5. scheme: This attribute specifies the format of the metadata associated with the <meta> tag. This is typically used for specifying the format of dates or other structured data.
  6. lang: This attribute specifies the language of the content within the <meta> tag. This can be used to help search engines and screen readers understand the language of the web page.
  7. dir: This attribute specifies the direction of the content within the <meta> tag. This can be used to specify whether the text is left-to-right or right-to-left.

Overall, using global attributes with the <meta> tag can help to provide important metadata about your web page, which can improve search engine optimization (SEO) and make your content more accessible to users with disabilities.

 

Event Attributes

The <meta> tag is a self-closing tag and does not support any event attributes in HTML. Therefore, it is not possible to assign any event attributes like onClick, onMouseOver, etc., to the <meta> tag.

The <meta> tag is mainly used for providing metadata about a web page, such as keywords, descriptions, author information, and more. These attributes are typically used by search engines and other tools to help index and categorize the content of the page.

Instead of event attributes, the <meta> tag can be used in conjunction with other HTML elements that do support event attributes, such as links, buttons, and forms, to create interactive web pages. For example, you could use a <button> tag with an onClick event to trigger a search using the keywords specified in the <meta> tag.

 

Other Attributes

In addition to the global attributes, the <meta> tag also supports the following non-global attributes:

  1. http-equiv: This attribute specifies the HTTP response header that should be associated with the content of the <meta> tag. The value of this attribute can be used to specify the content type, cache control, refresh rate, and more.
  2. name: This attribute specifies the name of the metadata associated with the <meta> tag. The value of this attribute can be used to specify the type of metadata, such as keywords, descriptions, author names, and more.
  3. content: This attribute specifies the value of the metadata associated with the <meta> tag. The value can include information such as keywords, descriptions, author names, and more.
  4. scheme: This attribute specifies the format of the metadata associated with the <meta> tag. This is typically used for specifying the format of dates or other structured data.

The http-equiv attribute is used to specify the HTTP response header associated with the <meta> tag. This is typically used to provide information such as the content type, cache control settings, and more.

The name attribute is used to specify the name of the metadata associated with the <meta> tag. This can be used to provide information such as keywords, descriptions, author names, and more.

The content attribute is used to specify the value of the metadata associated with the <meta> tag. The value can include information such as keywords, descriptions, author names, and more.

The scheme attribute is used to specify the format of the metadata associated with the <meta> tag. This is typically used for specifying the format of dates or other structured data.

Overall, the attributes of the <meta> tag are important for providing metadata about a web page, which can improve search engine optimization (SEO) and make your content more accessible to users with disabilities.

 

Notes on HTML meta tag

Here are some important notes to keep in mind when using the <meta> tag in HTML:

  1. The <meta> tag is used to provide metadata about a web page, such as keywords, descriptions, author information, and more. This metadata is used by search engines and other tools to help index and categorize the content of the page.
  2. The <meta> tag should be placed in the <head> section of your HTML document, before the <title> tag. This is because search engines typically read the metadata before the content of the page.
  3. The <meta> tag is a self-closing tag and does not require a closing tag.
  4. The http-equiv attribute of the <meta> tag is used to specify the HTTP response header associated with the content of the <meta> tag. This is typically used to provide information such as the content type, cache control settings, and more.
  5. The name attribute of the <meta> tag is used to specify the name of the metadata associated with the tag, such as keywords, descriptions, and author information.
  6. The content attribute of the <meta> tag is used to specify the value of the metadata associated with the tag.
  7. The scheme attribute of the <meta> tag is used to specify the format of the metadata associated with the tag, such as dates or other structured data.
  8. It’s important to use relevant and accurate metadata in your <meta> tags, as search engines and other tools use this information to help categorize and rank your content.

Overall, the <meta> tag is an important element in HTML that can help improve the visibility and accessibility of your web pages. By providing accurate and relevant metadata, you can improve the search engine optimization (SEO) of your content and make it more accessible to users with disabilities.

 

Browser Compatibility

The HTML meta tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

Examples of HTML meta tag

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

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML meta tag below, with some examples of how to use the meta tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

 

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

HTML5 Document

If you created a new web page in HTML5, 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="This is a sample web page">
<meta name="keywords" content="HTML, CSS, JavaScript, web development">
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to the Sample Page</h1>
<p>This is a sample web page created to demonstrate the use of the <code><meta></code> tag in HTML5 documents.</p>
</body>
</html>

In this example, we have included four <meta> tags in the <head> section of our HTML document:

  1. The first <meta> tag specifies the character encoding of the document as UTF-8. This is important for ensuring that special characters and symbols are displayed correctly on the page.
  2. The second <meta> tag specifies the viewport settings for the page. This is important for ensuring that the page is displayed correctly on different devices and screen sizes.
  3. The third <meta> tag provides a brief description of the page. This information is used by search engines and other tools to help categorize and rank the page.
  4. The fourth <meta> tag specifies a list of keywords associated with the page. This information is used by search engines and other tools to help categorize and rank the page.

Overall, by including these <meta> tags in our HTML document, we are providing important metadata about the page that can help improve its visibility and accessibility on the web.

 

 

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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="This is a sample web page">
<meta name="keywords" content="HTML, CSS, JavaScript, web development">
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to the Sample Page</h1>
<p>This is a sample web page created to demonstrate the use of the <code><meta></code> tag in HTML 4.01 Transitional documents.</p>
</body>
</html>

 

In this example, we have included three <meta> tags in the <head> section of our HTML document:

  1. The first <meta> tag uses the http-equiv attribute to specify the content type of the document as text/html with the character encoding of UTF-8. This is important for ensuring that special characters and symbols are displayed correctly on the page.
  2. The second <meta> tag provides a brief description of the page. This information is used by search engines and other tools to help categorize and rank the page.
  3. The third <meta> tag specifies a list of keywords associated with the page. This information is used by search engines and other tools to help categorize and rank the page.

Overall, by including these <meta> tags in our HTML document, we are providing important metadata about the page that can help improve its visibility and accessibility on the web.

 

 

XHTML 1.0 Transitional Document

Here’s an example of an XHTML 1.0 Transitional document that uses the HTML meta tag to specify the character encoding and the viewport:

<?xml version="1.0" encoding="UTF-8"?>
<!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" />
<title>Example XHTML Document</title>
</head>
<body>
<h1>This is an example XHTML document</h1>
<p>Here is some example text.</p>
</body>
</html>

In this example, the XHTML document starts with an XML declaration that specifies the version of XML being used and the character encoding. The document then includes a DOCTYPE declaration that specifies the version of XHTML being used and the location of the DTD file.

The HTML meta tag is used to specify two things in the document’s head section. First, the http-equiv attribute is set to “Content-Type”, which tells the browser how to interpret the document’s content type. The content attribute specifies that the character encoding is UTF-8.

The second meta tag sets the name attribute to “viewport”, which tells the browser how to display the content on different devices. The content attribute specifies that the width should adjust to the device width and that the initial zoom level should be set to 1.0.

The document then includes a title element, which specifies the document’s title. Finally, the document’s body section includes a heading and a paragraph to provide some example content.

 

XHTML 1.0 Strict Document

Here’s an example of an XHTML 1.0 Strict document that uses the HTML meta tag to specify the character encoding:

<?xml version="1.0" encoding="UTF-8"?>
<!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" />
<title>Example XHTML Strict Document</title>
</head>
<body>
<h1>This is an example XHTML Strict document</h1>
<p>Here is some example text.</p>
</body>
</html>

 

In this example, the XHTML document starts with an XML declaration that specifies the version of XML being used and the character encoding. The document then includes a DOCTYPE declaration that specifies the version of XHTML being used and the location of the DTD file.

The HTML meta tag is used to specify the character encoding of the document in the head section. The http-equiv attribute is set to “Content-Type”, which tells the browser how to interpret the document’s content type. The content attribute specifies that the character encoding is UTF-8.

The document then includes a title element, which specifies the document’s title. Finally, the document’s body section includes a heading and a paragraph to provide some example content.

Note that in XHTML 1.0 Strict, the use of the viewport meta tag is not allowed, as it is not part of the strict specification.

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 document that uses the html meta tag:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>My XHTML 1.1 Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="This is a description of my XHTML 1.1 document."/>
<meta name="keywords" content="XHTML, example, meta tag"/>
</head>

<body>
<h1>Welcome to My XHTML 1.1 Document</h1>
<p>This is an example of an XHTML 1.1 document that uses the html meta tag.</p>
</body>
</html>

In this example, the meta tag is used to provide additional information about the document. The first meta tag specifies the character encoding of the document, which is set to UTF-8. The second meta tag provides a brief description of the document, which can be used by search engines or other tools to index or categorize the document. The third meta tag specifies a list of keywords associated with the document, which can also be used for indexing or categorization purposes.

Note that in XHTML 1.1, the meta tag must be included within the head element of the document. The http-equiv attribute is used to specify an HTTP header that the server should send along with the document, in this case the Content-Type header. The name attribute is used to specify a name for the metadata, and the content attribute is used to provide the value for that metadata.