HTML Tutorial

Step 9: HTML Rules and Summary

Below are some general rules for making 'proper' HTML documents. You can put almost anything into an HTML document and web browsers will try to display it. Yet, to display exactly what you intended - across the many different computer web browsers and the increasing number of other web-savvy devices - following these rules will greatly help.

Basic HTML Rules

All tags must be lower case.: Old tutorials often had examples with tags in capital letters. The proper form for documents is to have all tags in lower case letters.
Tag attributes must be surrounded by double quotes.: For now you can get away without doing it. That is (supposedly) going to change in the future.
Tags must be properly nested.: HTML elements should not partially overlap. Between two elements, one element should completely contain the other (element A's opening tag before element B's and element A's closing tag after B's closing tag) or the elements should be completely separate.; A trick to help you get this right is to always write the entire enclosing element - both the opening and the closing tag - before you fill in any content it will contain.
All HTML elements must be closed.: The HTML tags are a way for the browser to know exactly what content makes up each HTML element. If you don't close every element, any device reading your code won't know where that element was supposed to end.
Documents need a doctype.: Due to the rapid development of the web, different variations and versions of HTML have sprung up over the years. Putting in a doctype tag at the start of your document tells anything reading your code exactly what flavor of HTML you're trying to use. Without a doctype any device reading your webpage will just make its best at how to handle your code.

Doctype Examples

Here are the two major doctypes you might use. You don't have to understand exactly what this code does. Just think of it as something to paste in at the top of your HTML files, if you like.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">: This code says that we're using a strict form of HTML. Good HTML and nothing but good HTML. This is the style to aspire to.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">: This is the line to put in if your HTML code is sorta correct but you know there are some parts that aren't correct and aren't going to be getting there any time soon.

Tutorial Summary

Here's a listing of the major things this tutorial has covered.

HTML Purpose

The purpose of HTML is to structure content in a document. This is done using HTML tags to identify HTML elements as certain types of content in your document.

Basic HTML Document

<html>
   <head></head>
   <body></body>
</html>

Common HTML Tags

Basic		Text	Style
`<html>`	`<p>`	`<br>`	`<b>`
`<head>`	`<h1> .. <h6>`	`<hr>`	`<i>`
`<body>`		`<pre>`	`<em>`
`<title>`			`<sup>`

Link Example

<a href="http://www.cs.duke.edu/">Check out Duke CS!</a>

Image Example

<img src="./graphics/cat.jpg" height="170"/>

List Example

<ul>
   <li> First item. </li>
   <li> Second item. </li>
</ul>

Table Example

<table>
<tr>
   <td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
   <td>a</td> <td>b</td> <td>c</td>
</tr>
</table>

Comment Example

<!-- This is a comment -->

<< Step 8 << >> Step 10 >>