Basics of HTML

Identification: Searching, Titles, Contacting

Searching

Search engines find a page on the web by looking at the title (as described on this page, under "Titles," on the right) the text on the page (especially text in the first few paragraphs), and other elements such as headings. This is a good reason to word your title carefully and to put introductory descriptions of your page in a prominent position, near the top.

GoogleThey also look at other elements—called "meta tags"—within the <head></head> section above the <body></body> of the page. You can add these elements to augment pages' descriptive content, and make it more likely that search engines will find you. 

Meta tags follow this format (Note that since meta is an unpaired tag, you must "close" the element with a / at the end of the bracketed area):

<meta name="xxx" content="yyy" />

In the expression above, the name attribute essentially provides a "category" for the information; in other words, it describes what kind of information you are providing. The content attribute consists of descriptive or explanatory words that fit the category and apply to the page. You can have as many meta tags as you like in the <head></head> portion of your page, but each one requires a separate line:

<meta name="xxx" content="yyy" />
<meta name="aaa" content="bbb" />

line

There is no single official standard which limits meta names or content, although some standard sets are being developed and used in some types of documents. HTMLGoodies has this informative article on meta tags nitty-gritty. You can look at the source code for pages with meta tags to get a feel for how they are normally used.

gearsTwo types of meta tag attributes that are useful to search engines and that seem to be somewhat standardized are description, which is a prose description of your page, and keywords, which is a listing of words to describe your content. The keywords attribute, in particular, is looked at by search engines.

Here are some simple description and keyword meta tags used in a W3Schools example, just to give you an idea of how these tags can be used:

<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />

Web designers advise you to be careful and not go overboard in assigning meta tags. Above all, do not repeat tags. Some unscrupulous commercial sites do this in order to raise their rankings in search engine results. The search algorithms are getting wise to this tactic, though, and might just reject your page if it has repeated values.

(In writing this section, I relied extensively upon SearchEngineWatch, which contains a lot of good information on search engines in general and how to promote your site to them, and W3Schools. Google itself also has a collection of articles and references for web designers.)

line

If you don't want search engines to find your pages, you can prevent them. Read about how to do this here. Why might you want to keep your pages away from Google? Perhaps they are seriously under construction, or perhaps they were developed for a private purpose, such as only for family use.

Titles

Putting a title at the top of your page after the <body> tag displays the title for your readers, but not for their browsers.

In order for a title to display at the top of the browser window, or in the browser's history list, you must place a title within <head></head> section of the page, which comes before the <body> section, like this:

<html><head><title>My Page</title></head>
<body>

line

Because whatever you type between the<title></title> tags is what will display in history lists, you need to be more descriptive than the above example. But keep in mind that these lists only display about 30 characters. So exercise your headline-writing skills! Descriptive, yet concise.

Contacting you

It is considered good Web etiquette to have a contact point somewhere on your page so that people can let you know how fabulous the page looks, how valuable it was to them, and, occasionally, to point out errors you may have made. The most convenient way to do this is with a mailto link. The tags for doing this are similar to normal link tags. They just add the "word" mailto:

<a href=mailto:
"kathyamen@hotmail.com">
Email me!</a>

Would display:

Email me!

and when users click on this link, a mail window will pop up for them to use.

Be aware, however, that in some situations, users cannot send mail from the computers they are using (if the mail function is disabled). For these folks, it is not only courteous, but necessary, to let them know your email address. To accomplish this, I usually make my email address the mailto link's anchor text:

Email me at: <a href=mailto:
"kathyamen@hotmail.com">

kathyamen@hotmail.com</a>

displays as:

Email me at: kathyamen@hotmail.com.

Graphics Credits

The Trekkie divider bar (that's a Star Fleet communicator!) and other little icons on this page came from Realm Graphics, a nice free graphics site. You can probably guess where I found the colorful Google logo.

Last updated:

Back to kathyamen.net