META tags add information in the HEAD section of the file. The browser reads META information and processes it without displaying anything on the screen. This information is used to identify styles and scripts, label authors, copyright, describe page contents, control where the page is displayed and the like. Search engines use META information to locate pages. For all these reasons, it is a good idea to use META tags on your pages.
There are three attributes for META tags--http-equiv, name and content. Here is a link to a page that describes all the different META tags. Try it
Here are the META tags we used for the pages in this course:
| <meta name="keywords" content="HTML, CSS"> | If a search engine is asked to find web pages, it looks for certain "keywords". If you list the keywords you think apply to your page, it makes the search engine's job easier to find you. |
| <meta name="description" content="HTML/CSS tutorial"> | Once the search engine finds you (and thousands of other pages), it tries to write a description of each page for the viewer's benefit. It will copy the first few lines of text of each page unless a page has this META tag, which provides its own description. |
| <META NAME="author" CONTENT="Bill Sanders"> | This META tag helps an engine do an 'author' search. Note that uppercase/lowercase of the tag name does not effect a META tag. |
| <META NAME="copyright" CONTENT="©2024, by Bill Sanders"> | So far, this will not establish a legitimate copyright, but most of the rest of the world doesn't know that, and this might scare them enough to give you credit for your work. In addition, some day it might establish a copyright, who knows? |
| <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> | This is a moderate protection against hackers. This META tag forces the ISO-8859-1 character set, which doesn't allow hackers to insert their own special characters into your links/form submissions/etc that can do harm to your server or the client's computer. |
| <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> | This tells the browser what the default scripting language is. In this case, if we used <script></script> tags, and did not give a language or type attribute, the browser would assume JavaScript. |
| <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> | This tells the browser that Cascading Style Sheets are the default style used. |
| <META HTTP-EQUIV="Window-target" CONTENT="_top"> | This tells the browser to open this web page on the top of whatever window it is in. This prevents this page from opening in Frames. |
| <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> | This tells the browser to not cache this web page. In other words, you should not have to hit "refresh" on a page with this tag since it is refreshed every time it is called. |
Add all of them to your sample.htm file. Change the content to suit your page.
You can use Meta tags to redirect viewers to another page. (try it)
Document Type Definition (DTD) tags are an advanced aspect of HTML programming. They tell the browser what version of HTML was used for the design of this page, and show the browser where to find the Definitions of every tag/attribute/default setting/etc.
If you make a page, and three years from now we are on our fourth revision of HTML since, and your page hasn't been revised in all that time, the browsers will know your page might have older/deprecated commands. In addition, browsers currently recognize framesets, XHTML, XML and a few others, and will likely recognize more languages in the future. DTD tags tell the browser what language to expect. The default is HTML.
Browsers will assume a generic DTD if you do not specify one, so you can get by without stating anything, but your page may not display properly in the future. DTD tags are placed before the <html> tag at the beginning of the file, and look something like this:
"http://www.w3.org/TR/html4/loose.dtd">
This tag tells the computer that this document type is HTML Public (as compared to military or government), W3C (World Wide Web Consortium) based, Document Type Definition, HTML version 4.01, Transitional (which means some deprecated tags may still be used, as compared to 'Strict', which means no deprecated tags are used), english language. The DTD coding can be found at "http://www.w3.org/TR/html4/loose.dtd". Don't try to memorize all this, it is not important to know anything more than HTML 4.01. To see this DTD, go to the W3C DTD page. There you will see the definition of every tag.
If you click on File in HTML-Kit, then select "New Document", a DTD tag will be generated for you. Try it.
Insert the above DTD into your sample.htm file.
In this lesson, you learned about these tags:
- <meta>
- <!DOCTYPE>
For more information on the topics of this Lesson, see this site or this site for !doctype, or this site for meta.
Here's a handy META tag generating tool.
