Introduction: How to Start Your HTML Document Right

About: I am a computer programming, book reading, music making DIYer!

If you are just getting started in the field of web programming, then you probably have heard of HTML, or Hyper Text Markup Language. It's the base markup language for creating static web pages. But to create a html document correctly (this means it is consistent with the standards set by W3C), you will need to start it right, and this involves a little extra coding.

First, here is some terminology:

W3C ~ World Wide Web Consortium. It sets the standards for websites and web browsers.
HTML ~ HyperText Markup Language. Code for creating static webpages.
XHTML ~ eXtensible HyperText Markup Language. It is the next generation of HTML.
Tags ~ < tagtype />.  An HTML element that tells the browser something.


Step 1: The DOCTYPE Tag

To begin any HTML document, you start out with the <doctype> tag. Also known as the DTD (Document Type Definition), it tells the web browser what type and version of HTML document that it is viewing. The code for this is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
          EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">


Take a look at the code. It tells the web browser some very important things, such as:
~The Page is in English (EN)
~It is using XHTML 1.0 (eXtensible HyperText Markup Language - it's like the next generation of HTML)
~It states the place where W3C standards can be found (http://)



Step 2: Meta Tags

The Meta Tags are tags that store metadata, or information about the web page. Here are some examples of meta tags:

<meta name="keywords" content="words that relate to the website and are used by search engines to rank sites during searches, words are spaced by commas like, this"  />

<meta name="description" content="This is a short summary of your site, which is displayed by search engines for the user to view.  />

<meta name="copyright" content="your site's copyright information"  />
<meta name="publisher" content="publisher info"  />
<meta name="author" content="author info"  />

These are examples of meta tags. The <!DOCTYPE> tag is also a meta tag. Each of them stores a different part of information for the web browser to see. All of this is stored inside the <head> tag.

Step 3: Information Files

Here are some files that have the code that I have just demonstrated. I have a file called doctype.html that I always start with, because it saves me the trouble of having to write that code every time I want to write a web page. Open these files in notepad, or whatever HTML editor you use, and view the code.


Enjoy!