One of the best ways to learn about HTML and the way it works is to look at the source code of websites made by others. You can learn as much from professionally designed sites as you can from awful-looking sites if you take a look at their code and see what they did right or wrong.

One way to accomplish this is to pull up the raw source code straight from the browser. Most browsers allow you to do this by either right-clicking on the webpage and choosing View Source or View Page Source, or by choosing View > Page Source from the browser's menu. What you will see is the full HTML of the webpage you are visiting.

Another method, and probably the easiest and least confusing way to read a webpage's source code, is to install a debugging browser plug-in that lets you view the source code directly within the browser. These plug-ins conveniently collapse sections of the HTML code to reduce complexity so that you can search through individual components of the code.

Some of these debugging plug-ins, by browser, are:

  • Safari — Web Inspector
  • Google Chrome — Inspector
  • Internet Explorer — Developer Toolbar
  • Firefox — Firebug
  • Opera — Dragonfly

Some of these plug-ins come installed with the browser, whereas others must be downloaded. Most of these development tools are free. For a tutorial on using Firebug, read this article: Using Firebug to View Source Code.

Some things to look for in source code:

The <head> tag — With the exception of the page title, everything between the <head> and </head> tags is non-visible on the webpage. Generally, this is where you will find references to other files that the HTML file you are viewing uses to make things appear the way they do, such as style sheets (CSS) and the occasional JavaScript file.

The <body> tag — The vast majority of the HTML file, and all of the webpage's visible components, are contained within the <body> and </body> tags. Here you can see all of the coding that goes into making components appear the way they do, from headers, to paragraphs of text, to images, and beyond.

<div> tags — These tags create divisions in the content of a page using an ID specified within the style sheet. This ID references CSS code that tells that division where to be placed, how big it should be, how it should be behave, and other styling properties including colors, border, and margins. A well-designed modern website uses mostly <div> tags to place content.

For help reading the source code of pages created using Visual Site Designer, read this article: Viewing the Source Code of a Site Made with Visual Site Designer.