How to properly format an HTML Document

What is HTML?

Think of all of the information that connects together to form the Internet. It is a massive amount of data. The majority of these bits and bytes are unrelated in meaning. One web page might contain information about cars and another about dogs. Now...Try to imagine the Internet as a tangible object that can be seen and touched. This is a daunting task because there is such a wide variety of different types of information within this massive network.

The first image that comes to your mind is most likely your favorite web browser. The first engineers of the world wide web had to develop a way for all of these interconnected thoughts to be visualized. They needed a simple way of feeding text to a computer so that the computer could parse the input into an easily understandable presentation for the viewer. The W3C (World Wide Web Consortium) adopted a simple scripting language developed by British computer scientist and engineer, Tim Berners-Lee. That language was HTML (Hyper-Text Markup Language) and has become the backbone of almost all information that is served via the Internet.

HTML code is very easy to write when compared to producing code in other programming languages. Its structure provides methods for styling and laying out text and multi-media elements within a web page. This article is focused on covering everything that a person who is just learning HTML must know in order to build his/her first functioning web page. You don't need anything other than a computer with a standard text editor such as Notepad or Vi to get started.



So, let's dig in and learn the basics of building a website, shall we...

How to write HTML tags

Any programming language provides a structured set of tools for manipulating data to achieve the desired outcome. HTML is no different. The purpose of HTML is to provide a way to break text into sections and apply different styles to the text in order to create a design that you want a visitor to see when trying to absorb the message defined within the text. You can think of this like a page in a magazine. Some of the text on the page should be larger than the normal type, and some might benefit from being a different color or font. The goal is to format all of the elements on the page in a manor to where your intendment is easily understood by its viewers.

HTML accomplishes this by using what are referred to as "tags" or "elements". Matching tags are used on either side of a portion of text to define how that section of text should look through an Internet browser. If you wanted to make the phrase "bold words from such a small man" appear in bold face type, you would encapsulate it in the HTML tags for that style: <strong>bold words from such a small man</strong>.

Take a look at the difference with and without the tags:
bold words from such a small man
bold words from such a small man

A computer is not smart enough to assume that you mean one thing when you type another in most cases. This makes it very important that you follow strict guidelines when you are writing your HTML tags. All tags begin with the < symbol. That is next followed by the tag name. The name of the tag used above was "strong". The tag name is case insensitive meaning that you can write it as either "strong" or "STRONG". You will then close your tag by following the tag name with a >. Most tags use an open and close syntax. We've just reviewed the opening strong tag, which looks like this <strong>. The closing tag will look exactly like the opening tag except that it contains a / before the tag name. The closing strong tag looks like this </strong>. Any text placed in between these two tags will be rendered in a bold weight. A tag might be self-closing in some instances. This means that the tag does not require an opening and closing tag. The tag for producing a line break, <br />, is a good example of a self-closing tag. <br> or <br /> are both appropriate ways to write a self-closing tag, but I prefer the second method as it helps me to visually recognize any self-closing tags in my HTML documents.

Some tags will also have attributes that you can specify. An attribute is a parameter that can be set to modify the behavior of the element. They are set within the opening tag after the name and before the >. A commonly used attribute is "id". This gives the element that is defined by the parent tag a unique identifier. The syntax for an attribute is simple. First, you write the attribute name followed by an equal sign and then the value that you want to apply encapsulated in either single or double quotes. Here is an example of the previous strong tag with an id attribute applied to it: <strong id="bold_words_text">bold words from such a small man</strong>. The id of this strong tag is now "bold_words_text".

There are tons of HTML tags available to help you format the content of your web page. Covering all of the options is out of the scope of this article. This article will point out several commonly used elements. Visit the W3C website to obtain a list of all available elements: http://www.w3.org/TR/REC-html40/index/elements.html.

How to structure an HTML document

Just as there is a structured way that elements are declared, a structured method for placing the elements inside the HTML document has been established by the W3C. This pattern is crucial for making sure that your web page is displayed properly by the browser as well as makes sure that search engines such as Google and Yahoo can find and index the content of your site. We will now go through the proper way to format your tags within your HTML document. Go ahead and open up a text editor to get started creating your first web page.

The very first line that should appear before anything else in your document is the DOCTYPE declaration or DTD. Multiple changes to the HTML language have been released over the past 20 years. The DOCTYPE declaration tells the browser which version of HTML you want it to render your content as.

Your declaration will look something like this:


Some of the parameters will be different depending on which version of HTML you've written your code with. A list of all valid DTDs is available here at the W3C website: http://www.w3.org/QA/2002/04/valid-dtd-list.html.

Directly following the DTD should be your opening and closing HTML tags. These elements declare the beginning and end of your HTML document.

The tags are written as follows:


There are two main elements that are placed inside the main HTML element. The first sub-element is called the "head" element. As its name implies, the "head" element stores header information. Any information that is not content should go into the "head" section of the document. We will cover some of the common elements that should be nested within the header section later in this article.

The head element should be placed into the document as follows:


Immediately following the header area of your document is where the "body" section of the document is declared. This portion of you HTML is used to hold your content and any elements used to format that content.

The body element should be place into the document as follows:


Now that the core document is complete it is time to add some content. Any text that you want to be rendered as the content of the site must appear in the "body" section of the site. This tutorial is not intended to introduce the vast amount options that are available for formatting content in HTML, but rather should be used as a guide for understanding what HTML is and how to create an HTML document. So, the next thing we will cover is how to add some basic content into the web page. I will provide future articles that cover more complex layout in HTML as well as how the Hypertext Markup Language can be used in conjunction with other web technologies such as CSS (Cascading Style Sheets), Javascript, and PHP(Pre-Hypertext Processor).
Modify your code so that it looks like this:


We've just added a couple commonly used paragraph elements in between the body tags as well as a title tag in the header area. The paragraph tag, like its name implies, separates sections of content into paragraphs. The title tag will tell the browser what text should be written across the top of the browser window.

How to save and preview your HTML document

At this point, you might be wondering how you will be able to see your HTML code as a web page instead of code. Internet browsers are built to interpret hypertext into formatted content. You must first save your document with either a .html or .htm extension. Doing so will let your browser know that it should compile the information contained in your document as HTML. To save the document properly, choose File>Save As from your text editor. Name the document test.html when you are prompted to give a name. Choose the location where you want to save the file and click save. That's it. Now you will just need to open up your favorite browser and choose File>Open and navigate to the file that you just saved.

Closing

The Internet has grown by leaps and bounds over the last 20 years. The simplicity of HTML as it's core language has certainly been a contributing factor in its growth. Knowing how to write a little Hypertext can go a long way in a world where nearly everything is made available at the click of a mouse button. I hope this article has been a good primer to what HTML is and how it is used to compose a web page. Please feel free to comment on this article or goto http://www.quired.com/form/contact to contact me directly.