Search This Site
 

HTML Document Structure

Over the past few years, I have been participating in a on-line training class in SEO - Search Engine Optimization - Techniques. The classes are offered FREE by GNC Web Creations. The classes are divided into three separate classrooms - two of the classes are required, one is optional. The classes are STRUCTURED not informal. If you are interested in learning more about these classes, check the link below.

SEO Training.

One of the optional classes is the Website Development Training Class.  The classes are provided specifically as a supplement to members of the SEO Training Class. The current topics include, but are not limited to learning the basics of HTML, CSS, and other valuable website development techniques.

S. R. Emerson is the instructor for the basics of HTML part of the class and is the owner operator of SRT Services which operates HTML Basic Tutor, a website targeting small business owners, beginner web designers and hobbyist web site owners. The theme of the site is promoting good website design practices and coding, by implementing the recommendations of the W3C in a fashion that a person with little or no knowledge of web design can learn from. For more information on HTML Basic Tutor, click on the link below.

Learn HTML-Make a Web Page-Web Design Tutorials-HTML Beginner

Some of the information included below is from her classes which are based on her e-book HTML 4.01 Basics Simplified.

Example of a simple HTML document structure

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>My first HTML document</TITLE>
   </head>
   <body>

      <p>The is the main content of my document.</p> 
        
   </body>
</html>

Example of a More Complex HTML Document Structure

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<title>Add Your Page Title Here</title>
<meta http-equiv="Content-Type" content="text/html; 
	charset=ISO-8859-1">
<meta name="Description" content="Your page description">
<meta name="Keywords" content="Your keywords for the page">
<meta name="Author" content="Author Name">
<meta name="Copyright" content="A brief copyright statement">
<meta name="Distribution" content="Global">
<link rel="stylesheet" type="text/css" href="stylesht.css">
</head>
<body>
     
<p>The content of your document goes here. </p>

</body>
</html>

Explanation of  the terms used in the HTML Document Structure

  • The very first part of your HTML document is the doctype statement. Additional information may be found at DOCTYPE - DTD - Document Type Declaration The DOCTYPE Declaration (DTD or Document Type Declaration), what it does and why each web page needs it.
  • The <html> </html> tags tell the browser that the documents contents are HTML.
     
  • The <head> </head> identifies the  document's head area. Information between these two tags is not visible on your page.
     
  • Tags between the <head> </head> may include:
     
    • The title tag creates page title that appears on the header bar of your browser. <title>The title of your  page goes here </title>
       
    • META Tags are HTML tags which provide information that describes the content of the webpages a user will be viewing. For more information on what each tag means, how to use them visit http://www.submitcorner.com/Guide/Meta/
       
    • Character Encoding -  Character encoding tells the browser and validator what set of characters to use when converting the bits to characters.
       
    • Style tags are used to set the style of the document. This is where you would link your external style sheet
      • <link rel="stylesheet" type="text/css" href="stylesht.css">
         
      • If you want to use a style within your page add
         <style type="text/css">Your style types </style>
         
  • The <body> </body> tags surround the content of your page

Additional Resources: