• Cavalcade-of-Coding
• Start Learning
  • The Right Tool
  • First Things First
  • Presentation vs Structure
    • CSS for Elements
    • CSS for Attributes
• Required HTML Elements
• Structure of an HTML Document
  • Markup
  • Screenshot
• If the Shoe Fits
  • Headings
  • Navigation
  • Positioning

Structure of an HTML Document

Since HTML stands for HyperText Markup Language, let's talk about marking up a document. What are the parts of a document?

1. Heading Title
2. Paragraphs
3. Navigation List
4. Page Footer

You will probably want to divide your page up into sections, a section for the navigation, header, footer and main content. Using the DIV element, you can divide your page as you want.

Optionally, you may have a table with tabular information, and you might have second, or third level headings. You might want to have some pictures of things, and you might want to have some images to give the page a little pizzazz. You might even have a list, as the one above.

Here is a short example:

<div class="menu">
<ul>
<li><a href="home.html">Home Page</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</div>
<div class="content">
<h1>Title of Page</h1>
<p>A paragraph explaining the subject of the document.</p>
<p>Another paragraph delving more into the subject.</p>
<h2>Subtitle</h2>
<p>More information paragraph.
<img src="somepic.png" alt="Picture of My Red Tortishell Cat">
</p>
<table summary="My Current Events">
<caption>My Current Events</caption>
<thead>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th><th>Thur</th>
<th>Fri</th><th>Sat</th><th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td>Doctor's Appointment</td><td>Lunch with Bob</td><td>Opera Tickets</td>
<td>Black</td><td>Dinner with Sarah</td><td>Festival</td>
<td>Church Bazarre</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">Copyright © 2005</div>

Please note that there are absolutely no presentational elements. There is nothing about color, or borders, etc. That is all handled by CSS.