HTML Document Structure


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: