HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML <meta> tag

So webpages have data, but how do we describe that data? A description of the data on a webpage may often be important for search engines as well as for users.

This tutorial focuses on:

The <meta> tag

The <meta> tag is one of the most important tags in HTML. The <meta> tag is used to describe the page in some way as well as other things such as refreshing a page automatically after a certain amount of time, and preventing webpages from being displayed in another websites frames page. Some of the things that can be described using the <meta> tag include the pages author, the software used to create the page, and a description of the content on the page.

NOTE: The <meta> tag goes in the head section of an HTML document and has no end tag.

The <meta> tag is a little confusing since the values you assign to its attributes depend on each other to work together. Hopefully, the explanations about its attributes that follow will clarify things and will explain how the different attributes of the <meta> tag work together.

Attributes of the <meta> tag

Examples of the <meta> tag utilizing the name and content attributes:

Offering keywords to search engines that can be used in their searches:
<meta name="keywords" content="apples, oranges, fruit" />

Setting the name attribute to "keywords", you can then specify a set of keywords for a webpage with the content attribute. The set of keywords should be keywords that are directly related to the content and subject matter of a webpage.

Offering a description of a webpage to search engines:
<meta name="description" content="A fruit store for all! whether you prefer pears, oranges, apples, or any other fruit, we have something for everyone!" />

Setting the name attribute to "description", you can then specify a description for a webpage with the content attribute. The description of a webpage will be shown to a search engine, so it should be kept short, simple, and straight to the point (one or two sentences).

Telling search engines what software was used to create a webpage:
<meta name="generator" content="Notepad" />

Setting the name attribute to "generator", you can then specify what software was used to create a webpage with the content attribute.

Telling search engines who created a webpage:
<meta name="author" content="Someone A. Person" />

Setting the name attribute to "author", you can then specify the name of the author who created the webpage with the content attribute.

Telling search engines when to expire a webpage in their databases:
<meta name="expires" content="February 1st, 2876" />

Setting the name attribute to "expires", you can then specify when to expire the webpage in a search engines database with the content attribute.

Examples of the <meta> tag utilizing the http-equiv and content attributes

Reloading the current page every five seconds:
<meta http-equiv="refresh" content="5" />

Setting the http-equiv attribute to "refresh", you can then specify when to reload the webpage (in seconds) with the content attribute.

Page refreshing is common for time sensitive information such as currency pricing (as seen on the website www.xe.com which refreshes the homepage once every 60 seconds), news, and stocks.

Alternatively, you can use this mechanism to redirect the user to another page:
<meta http-equiv="refresh" content="10;url=http://www.site.com/newpage.html" />

In the above example, we add the data ";url=http://www.site.com/newpage.html" to the content attribute. Once the user loads the page, after 10 seconds pass, they will be redirected to http://www.site.com/newpage.html. If you want to redirect the user to another page, within the content attribute, right after the amount of seconds you specify, add a semicolon ( ; ), the text url=, followed by the absolute location of the page that you are redirecting to, just like in the above example.

Preventing a webpage from being viewed inside some other websites frames page:
<meta http-equiv="window-target" content="_top" />

Setting the http-equiv attribute to "window-target", you can then specify that if someone tries to view one of your webpages in a frames page, it will break out of the frames page and will fill the entire browser window with the content attribute.

This is an important measure that can be used to prevent someone from trying to load one of your pages in their own site.

A full webpage with meta tags:
<html> <head> <title>Meta tags</title> <meta name="keywords" content="hardware, electronics, computers, phones" /> <meta name="description" content="All type of technology for all purposes. We have computers, phones, printers, fax machines, and much more." /> <meta name="generator" content="Notepad++" /> <meta http-equiv="window-target" content="_top" /> </head> <body> Welcome to the technology store! </body> </html>
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information