Sorry for the delay on this installment. Things got kinda busy after New Years… 😉
Last time around we established that META tags are how we add extra, non-essential information to web pages. This extra information is called metadata, and while it can be useful, adding metadata is to your web pages is not mandatory. All metadata does is supplement the necessary information contained in digital files.
When used on the Web, this extra information is sometimes used by the end-user’s web browser. Other times it will be used by search engines, and still other times it will be used by third-party programs. Let’s take a look at the kinds of META tags you can use, and how each kind is built.
META tags for the Web come in two basic flavors.
- META tags that tell your web browser something important about the web page.
- META tags that do anything else.
The first kind of META tag is always going to have an HTTP-EQUIV attribute, and all META tags require a CONTENT attribute.
Note: If you don’t know what an HTML attribute is, I recommend that you go through an HTML tutorial site like the one at Sitepoint or W3Schools. After you’ve got a handle on the basics of how a web page is built, come back and read the rest of this post. Otherwise, you’re just going to get a headache and most of this article won’t make any sense to you. FYI.
Your basic META tag will look something like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
As I mentioned in my last post, that one line of code tells web browsers:
- That this is a text file.
- That the text file is an HTML page, and…
- That the web browser needs to use the UTF-8 version of Unicode to display the numbers, letters and other characters within the web page.
Let’s break down this first tag into its parts. Then we can build other tags and build our META tag library.
First, the opening angle bracket and tag identifier:
The angle bracket “<” tells the web browser that this is a tag, and the word “meta” identifies what kind of tag this is. What comes next will give the web browser specific directions.
http-equiv="Content-Type"
Like the vast majority of HTML tag attributes, the HTTP-EQUIV attribute is in the form of a key/value pair. In English, that means that the first part of the attribute is the “key”, which is typically pre-defined in terms of its meaning and scope of influence. After the key comes the value associated with it. This value further defines this specific attribute, giving it direction.
For example, if I use the paragraph tag <p>, I can use the align attribute to make that paragraph center, right, left or justified in alignment by using the align key, paired with a value of right, left, center or justify.
For example:
<p align="center">
<p align="left">
<p align="right">
You get the idea.
The HTTP-EQUIV attribute has a number of possible values, but the ones you are most likely to use are:
- content-type – used to specify the MIME type of the page resource (like text/html).
- expires – used to specify the date and time when the page is considered obsolete.
- refresh – used to set the page to refresh at a specified time interval, usually given in seconds.
- set-cookie – used to specify value of the cookie set for the request.
The META tag above is only one example of META tags we can use on the web. Other commonly used META tags can make a page “refresh”, tell search engine robots whether or not to index a page or follow its links, or tell parental control programs that the content of a given page may not be suitable for children.
Now that you understand that META tags how we add extra, non-essential information to web pages, we can explore these different kinds of META tags. Next time, how to use (and not abuse) the META Keywords tag…
~B~