Html Meta Keywords in Meta Tag

To Add Meta Tags to Your Website
  1. Open a text editing program, such as Notepad.
  2. Log in to the Web hosting account provided to you by your hosting provider.
  3. In the text editor, open the Web page you want to add the meta tags to.
  4. In the portion of the file, insert the meta content. Here is an example of proper meta tag placement for a real estate website: 
<title>Premier East Valley Realty - Homes for Sale</title>
<meta name="description" content="Premier East Valley Realty
specializing in luxury real estate. We are your location
<meta name="keywords" content="Real Estate, Agent,Realtor, Buy, 
Home, Sell, Homes, Sale, Broker, Commercial, invest, investing, investor">
  1. Save the file.
  2. Upload the Web page to the server.

Note: Visit your website to verify the meta content uploaded correctly. Navigate to the page you updated, right-click on the page, and then select View Page Source in Firefox®, or View Page in Internet Explorer®. If placed properly, the meta content displays in the portion of the code.

< or >

Describe Metadata within an HTML Document:

  <meta charset=”UTF-8″>
  <meta name=”description” content=”WESHOUTLOUD Multi-Content Blog”>
  <meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript>
  <meta name=”author” content=”Prasanna Kumar.CH”>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
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.

HTML5 introduced a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag (See “Setting The Viewport” example below).

Tips and Notes

Note: <meta> tags always go 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.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web pages:

A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

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.


Example 1 – Define keywords for search engines:

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

Example 2 – Define a description of your web page:

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

Example 3 – Define the author of a page:

<meta name=”author” content=”John Doe”>

Example 4 – Refresh document every 30 seconds:

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

Example 5 – Setting the viewport to make your website look good on all devices:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Share This:

Leave a Reply