HTML Page Structure

There are various elements that must be included in an HTML page for it to be considered well-formed (or legal) HTML. Dreamweaver automatically manages all this behind the scenes, but on those occasions when you find yourself editing code directly, it's important to understand the basic structure.

The Basic Skeleton

The most basic level to the structure of a page is shown in the following example code. If you hover the mouse over a tag, it will highlight the scope of that tag. That is, it shows eactly what portion of the document is covered by, or included in, the element defined by the matching start and end tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Sample</title>
  </head>
  <body>
    <!-- this is where the page content would go -->
  </body>
</html>
    

What do you think a page with the markup shown above would look like when it was displayed in a browser? Have a think, and then check it out here...

The Doctype Declaration

Every page should start with a DOCTYPE declaration. This is discussed in detail here. It specifies the exact dialect of HTML in which the page is written.

The page itself starts with the openning <html> tag and ends with the closing </html> tag. Everything within these tags forms the page. Then, within the page are the following two elements.

The Head Element

The first element within the <html> ... </html> element is the head element. This starts with the opening <head> tag and finishes with the matching closing </head> tag.

Nothing that is put in the head element will actually be displayed directly on the page itself. Instead, this part of the document contains a lot of definitions which control how the page will look. This is where the styles can be defined, either as links to external style sheets or as internal style definitions. Scripts may also be defined in the head, again either as links to external files or as internal JavaScript definitions. However, note that JavaScript can also be placed in the body of the page.

The head of the document also contains the title tag which defines the title of the web page. This is displayed in the browser tab or title bar when the page is being viewed. The title element is a required element and Dreamweaver always adds one for you.

Finally, the head tag may also include meta elements which can include information about the character set required to render the page, or information to help search engines index your site.

The Body of the Page

The actually content that your user sees is contained in the body of the page. This starts with the opening <body> tag and finishes with the matching closing </body> tag. All of the content that you provide will be placed in this section of the page.

A Simple Example

If you create a new page in Dreamweaver and specify that no layout is to be applied, then you get a very simple page. You can see an example of such a page here. If you compare the source of that page with the source for this page, you will notice quite a difference!

As a way of learning your way around HTML markup, I suggest that you load the source for the simple page into Notepad++ and try editing it, added various tags to create elements and see the effect that they have by viewing the result in a browser.

Next, using DIVs to add more structure... Next