HTML Document Structure

Description

There are a few tags that are required in every html document. These are the html, head and body tags. These tags form the basic framework of every web page that you will design.

Html Code:

<html>

  <head>

    <title></title>

  </head>

  <body>

  </body>
</html>

HTML Tag

As You can see the <html> element contains all the other content in the page. This tells the web browser to display all the contents of this file as HTML. The HTML element should always contain 2 elements: The <head> element and the <body> element.

Head Tag

Right after the opening <html> tag we have the opening <head> tag. The head section of a web element contains information for the browser that wont be displayed to the user. Information such as the title of the web page, links to CSS style sheets, links to javascript files and meta data for use by search engines are things that go in the head section. You must close the head tag with </head> before opening the body of the web page.

Body Tag

The body element is where all the content that will be displayed to the user goes. This is where you put your content such as images, text, tables etc. You open the body with <body>, and after all your content you close it with </body>.

Closing Out The HTML

Finally you need to close your html with the closing <html> tag. This signals to the browser that the web page is complete.

Tag Order

One other thing to take note of is the order that tags are opened an closed in. The standards in HTML advise against interweaving tags. This means that when you open the body tag inside of the html tag, you need to close the body tag before you close the html tag. This is since the body is contained inside the html tag and their borders shouldn't cross so to speak.

Document Type Definition

The basic layout that we have covered here is fully functional html, but to be compliant with modern web standards as established by the World Wide Web Consortium (W3C) we need to include a document type definition. The W3C is responsible for setting the standard that web pages should conform to.

There are many different versions of html that have existed throughout its evolution. Each one with slightly different standard than the other. They range from html 1.0 through the newest XHTML 2.0 standards.

We will be creating our web pages to conform to the XHTML 1.0 Strict standard. To do so you will include the following code before your opening html tag:

Html Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

With that said your new bare framework for creating your html pages will look like:

Html Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title></title>
	</head>
	<body>

	</body>
</html>

Copy and past this into a blank text document and save it as "framework.html". This will give you a ready to go template for starting you web pages without having to type in all the basics yourself. Then when you want to create a new web page, you can open your framework.html document in your text editor, save it with the new file name and build your web page in it..

HTML Tutorials