I just fielded the following email from reader Matthew Hatwick (thanks!)

Chapter 2 greatly confuses me because it tells you a bunch of things and necessary essentials to html, doesn’t delve that deep into formatting or walk you through the formatting, and then gives the reader a full page of your example’s markup  and seems to expect the reader to understand how to create a basic page. Do you have a quick, visual tutorial of the process of doing so?

Specifically the Doctype stuff in purple confuses me because so far it has only been referenced twice. The rest I’m able to figure out through trial and error.

This is some great input, and provoked a pretty detailed and hopefully illuminating enough response from me to justify this blog and make Matthew happy, all in one go, so here’s a verbatim version of my reply, sans the initial salutation and closing farewell. Please share your comments and suggestions on this, and maybe we can improve it even more!

Meet the HTML DOCTYPE Declaration

The DOCTYPE stuff remains an interesting legacy that goes all the back to HTML’s origins as an offshoot of SGML, the Standard Generalized Markup Language originally developed at IBM in the 1970s by Charles Goldfarb and others. It’s a heritage that has basically turned into a historical footnote, and has almost been entirely left behind in HTML with the exception of this particular declaration, and its use for formal Document Type Declarations, or DTDs, which only real bit-heads read (or write) anymore. It’s not necessary to understand DOCTYPE either fully or in depth, though I can refer you to lots of good SGML resources (all on my bookshelf, in fact) if you want to dig into this more than most HTML developers care to do. If you check out these DOCTYPE tutorials you should find them sufficient (and hopefully also both informative and interesting):

1. W3Schools.com: HTML <!DOCTYPE> Declaration
   Always one of  my favorite online resources for all kinds of HTML tutorials and expanded reference materials, this particular item explains the DOCTYPE declaration both fairly fully and well. Definitely worth reading at least once, and possible referring to from time to time afterward as needed. No HTML 5 stuff here yet, though there is a separate HTML5 page for DOCTYPE instead.
2. HTML Code Tutorial <!DOCTYPE …>
   This is mostly just a simple, basic syntax diagram for the declaration, but you may find it useful as a simple reference tool.
3. Keynote NetMechanic Webmaster Tips: HTML Tip: Declare your DOCTYPE
   Though I’m not sure I agree with its author’s contentions as to the most useful (or frequently-used) DOCTYPE declarations, he does offer an interesting analysis and discussion of the whole DOCTYPE topic. Worth at least one read.
4. W3Resource DOCTYPE HTML 4.01 Tutorial
   This is probably the most comprehensive and useful description of the DOCTYPE declaration and its HTML 4.01 variations. In the tradition of “saving the best for last” I present it as your final alternate resource option in this list.

Step-by-Step Instructions to Create Your First HTML Document

As for creating a basic page, check out this google search for some excellent video resources on YouTube and elsewhere (this is kind of beyond the scope of our book, but an excellent request, and something we may develop on video and add to the Website for the next edition of the book). An accompanying step-by-step text version should read something like this:

1.  Open a simple text editor on your computer screen (Notepad works fine on the PC, though you’ll need to change the file type to All (*.*) and be sure to give it an .htm or .html extension to open it in your Web browser. But you’ll want to find something other than TextEdit on the Macintosh because even if you remember to “Save as” the Web page (.html) format, you still can’t open your resulting file on a Mac as HTML because of some extra invisible characters the program sticks at the beginning of each file. We recommend downloading TextWrangler from http://www.barebones.com/products/textwrangler/download.html instead; if you follow our advice, simply giving that file an .html or .htm extension will let you open and read it in Safari or some other Mac-capable Web browser).
2. Type <!DOCTYPE HTML> as the first line. This identifies the document you’re creating as an HTML 5 file.
3. Type <html> as the second line. This opens the document definition for your HTML document.
4. Type <head> as the third line. This opens the head of your HTML document.
5. Type <title>Hello, World!</title> as the fourth line. This defines a title for your HTML document, which will appear in the Web browser’s title bar or tab for the resulting Web page when you open it inside that program.
6. Type </head> as the fifth line. This closes the head of the HTML document, so you can get into the body, whose content will appear inside the Web browser window.
7. Type <body> as the sixth line. This opens the body of the HTML document, whose content appears inside the Web browser window.
8. Type <p>Hello, World!</p> This opens a text paragraph that contains the string “Hello, World!” then closes that text paragraph.
9. Type </body> as the eighth line. This closes the body of the HTML document.
10. Type </html> as the ninth and final line. It closes the HTML document that this file contains.
11. Save this document as a file named Test1.html, and be sure to use the proper file saving syntax so that the file system recognizes the document as a legitimate and readable HTML file (see discussion on item 1 above for potential gotchas).
12. Use the File Open command in your favorite Web browser to check your work. If all goes well, you’ll see something like this:

Screen cap of Hello, World page

1. Just for grins, check out your file using the W3C Markup Validation Service (use the “Validate by File Upload” tab to upload and check Test1.html).
2. If you did everything correctly, you’ll see a validation message that reads “Tenatively passed. 4 warning(s)” For the time being, this is just right. We’ll show you how to clear those warnings as you master more HTML syntax. For now, this tells you that you followed our instructions perfectly!

This interchange should also show you why we like to hear so much from our readers, even when they may not like what they find in a current edition of the book. This always gives us great opportunities for improvement, and helps us pinpoint parts of the book in need of shakeups, additions, or replacement!

–Ed–