Basics of HTML
Identification: Searching, Titles, Contacting
Search Engine Optimization (SEO)
Disclaimer: I have never been particularly interested in SEO (even before I knew what it was) since my pages have never had a commercial character. Therefore, I'm only giving you the basics here. At the bottom of this box are some resources that go into more detail.
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.
They 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" />
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. You can look at the source code for pages with meta tags to get a feel for how they are normally used.
Two 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.
W3Schools' pages on meta tags are a great reference. Google itself also has a guide with information for beginning and advanced SEO. And the Ahrefs blog provides this summary of best practices; note that this company does SEO professionaly.
If you don't want search engines to find your pages, you can prevent them. Read about how to do this here. The Ahrefs blog post above also includes this information. 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>
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:
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; this is sometimes the case on public use computers). 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:
