Elsewhere, I've written more generally about publishing on the internet. The page you are reading at the moment gives guidance on the headers I have found useful over the years. I will discuss not just the minimum HTML required to make your page syntactically correct, but I will also show you the comments, or "rems" that I include in my pages to help me keep everything organized.
Before HTML 5, a typical webpage on one of my sites began as follows.... (It does not have the "LINE x:" entries, of course. I insert blank lines where you see them, but I haven't assigned those lines numbers.)
Much of what I did then remains valid, but HTML 5 does entail a few changes, a little rearranging, and "more stuff" has become "standard".
LINE 1: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> LINE 2:<!--DOCTYPE must be first line of file, and replaces <html> See plh1fs.htm for more info--> LINE 3:<!-- e1didx.htm LINE 4:Rev 10 Nov 2009 LINE 5:Spellchecked 29 May 07 LINE 6:Validated (http://validator.w3.org) 29 May 07 LINE 7:Links (validator.w3.org/checklink) checked 29 May 07 LINE 8:e1didx.htm's Google Analytics code added 10 Jun 2009 LINE 9:e1didx.htm's Delicious link added 10 June 09 LINE 10:e1didx created 23 Sept 01. Cloned from e1.htm LINE 11:IS e1dsw.htm THE BEST FIRST TUT? Re-write reference and/or e1dsw? Cross ref to e1dsw from the tut directory?? e1dsw (should) include setting up TMEX, etc. --> LINE 12:<head> LINE 13:<title>Index to information on control by computer over minimal LINE :network- e1didx</title> LINE 14:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > LINE 15:<meta name="keywords" content="Dallas, 1-wire, electronics, hobbyist, weather station, lDS1820l"> LINE 16:<meta name="description" content="Using the Dallas iButtons, 1-Wire, MicroLan"> LINE 17:<meta name="rating" content="general"> LINE 18:<link rel="shortcut icon" href="favicon.ico"> LINE 19:</head>
Now we begin a plod through comments on the above
Line 1: I've explained the purpose and use of DocType elsewhere. (It is some way down the text of the linked page. Use your browser's "Find" to jump to it. While you are there, read about line 14, which is related.)
Line 2: This is just a comment, to remind me about hoe doctype works. The reference to "plh1fs.htm" won't be a lot of use to you, but is an example of a trick you may benefit from using. "plh1fs.htm" is another of my web pages, and in that, I go into more detail about using DocType. Not only does this "documentation by reference" make my web pages shorter. It Also means that if I learn something new about using DocType, and make a note within pl1fs.htm of what I've learnt, then all the places where I use DocType have a "link" (of sorts) to the information I may wish to consult. This become critical if I need to fix and error in a statement about how DocType works. One "fix" at plh1fs.htm in essence "fixes" things on many, many of my pages.
Line 3 always holds the name of the file. (Good naming of files is a Whole 'Nother Subject, very important.)
Line 4 starts "Rev" or "Revision", and carries a date. Whenever I change the file's contents, I change the date on line 4. If I can just be disciplined and REMEMBER to do this, then whenever I have two copies of a file, and I wonder which is the most up to date, then line 4 tells me. Do I change line 4 every time I do a save during an editing session? Of course not. (Files under active editing live in their own folder. When they move back to the archives, I make a special effort in respect of line 4). If I make a copy of a changed file at, say, 9am on 2 December 2009, and then make further changes to one of the copies later that day, I start putting a letter suffix after the date, to distinguish the copies, e.g. "2 December 2009b". I never use the suffix "a", any file with a date with no suffix is assumed to be the "version a" for that date.
Line 5: Always starts "Spellchecked", and then there is a date. It is, as I imagine you've guessed, the last time I spellchecked the file. What you may not have guessed is that I just append "not" to this and the next two pages in the early stages of cloning a new page from an old one... so much easier than carefully erasing the date of the previous spellcheck.
Line 6: If you go to http://validator.w3.org, you will find an edit box into which you paste the URL ("www- thingie") for your web page, and then the nice people at w3 will give you advice. Don't be overwhelmed if you get lots of "advice" (error messages) the first time you try this! Fix some of the first errors listed, and some of the later errors may "go away". This fixing is much, much easier if your text editor gives you line numbers, as Textpad does. I put the link on line 6 each time to save myself having to look it up, and the date at the end of the line is used as it was used for line 5, the spellcheck line. Get your spellings right before you use the validity check tool.
Line 7: If you go to W3 link checker, you will find an edit box into which you paste the URL ("www- thingie") for your web page, and then the nice people at w3 will check your links... external and internal... for you. Some links can't be checked this way... just read what the link checker returns, and accept the fact that you may not get a completely clear bill of health. The date at the end of the line is used as it was used for line 5, the spellcheck line. Get your spellings right before you use the validity check tool. And get your page valid before using the link checker.
Lines 8 and 9 are examples of the sort of notes I make to myself about "gadgets" and "foreign code" inside my pages. Not the lines begin with the page's file name. I often create a new page from an older page. Without that "e1didx.htm's" at the start of the line, a page cloned from e1didx.htm, you might assume, for example, if you cloned e1didx to make e1didxSonOf, and saw "Google code added 10 Jun 2009" in it, that it referred to when eldidxSonOf.htm acquired its Google code.... when it wasn't... it was just text from the "parent" file.
Line 10: I maintain this information not only because it is helpful, but because it can be fun. That line will often have a note about what was going on in my life at the time, e.g. "Day after Fred got married".
Line 11: I sometimes have one or more lines around here with notes to myself about editorial intentions, ideas for extension, cross references to other pages with similar material, etc.
Line 12: Just the required-by-html-rules code to start of the header block.
Line 13: The rules of HTML do not require you to have a <title> block... but it is a Very Good Idea to have one. What you put here will appear in the title bar of your Firefox window (and other browsers, I would assume). I believe that Google is inclined to use your title, if sensible, in any listing they give your page. I always end the title with a hyphen and my name for the file. Helpful when I am doing editing work. Possibly helpful to readers, as my "system" of file naming is not entirely undecipherable.
Line 14: Needed, like this, if you want to use (as you should) the provisions of DocType. (See notes about Line 1).
Line 15: After the "keywords=", put that words that you would hope a search engine would consider applicable to your page.
Line 16: If this is sensible, some search engines will use it to describe what is on your page.
Line 17: If your page is "family friendly", does not have material parents or teachers would not want schoolchildren seeing, use this line.
Line 18: If you have an icon for your web page, posted online in the same folder as the page, if you include this line then the icon will be picked up by Firefox (and probably other browsers) and displayed in front of your URL in the address bar.
The free online service I used to create my favicon doesn't seem to be operating any more, alas, but Google should be able to help you. You should be able to simply supply a file to a website by an easy mechanism and (easily, for free) obtain in return the .ico file you need. I was alerted to the passing of the site I used to recommend by the nice people at websitesetup.org/favicon-generator. I haven't extensively tested their offering, but my anti-malware software didn't ring any alarm bells, and it seemed to be similar to the site I used previously. Alternatively, I believe that the excellent, free, IrfanView.. which is much more than just a viewer... and Serif's PhotoPlus can also create suitable icons.
... and... finally.... we reach....
Line 19: Which is just the required-by-html-rules closing tag for the header block.
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org
....... P a g e . . . E n d s .....