HTML Document Structure
Example of a simple HTML document structure
<!DOCTYPE html>
<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>
<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>
- <link rel="stylesheet" type="text/css" href="stylesht.css">
- The title tag creates page title that appears on the header bar of your browser. <title>The title of your page goes here </title>
- The <body> </body> tags surround the content of your page
Additional Resources:
- Web Style Guide - 3rd edition
- The Definitive Guide to Web Character Encoding - "Character encoding. You may have heard of it, but what is it, and why should you care? What can happen if you get it wrong? How do you know which one to use? Continued reading . . .
- HTML Tutorial from w3schools
Planning a Genealogy Website 2nd Edition is available as a 42 page EBook in pdf format for you to download. It has been totally revised and updated with new content. The EBook is zipped for faster download. Save it to your desktop, extract the file and it is ready to use.
April 2007 - April 2013
Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.