Learning the Basics

This tutorial will get you started in learning HTML by first showing you the structure of an HTML document and describing the uses of the different sections and tags. Unlike editing a document in a normal word processor where you change the formatting and layout using buttons and windows, in HTML you mark up sections using HTML tags. Let's look at a simple HTML document and examine the structure.

<html>

<head>
	<meta name="keywords" content="HTML demonstration">
	<meta name="description" content="Just a simple HTML page.">
	<title>New Web Site</title>
</head>

<body>
	<h1>Hello World!</h1>
	<p>This is my first HTML document.</p>
</body>

</html>

The first thing that you'll notice is that that sections of text are wrapped in HTML tags, which are HTML keywords enclosed in brackets like <head> or <h1>. These tell the web browser the meaning of each section of text. There are two types of HTML tags, the first is tags that require an opening and closing tag such as <head> and <h1>. These tags enclose a whole section of text, so to tell the browsers where the section starts and ends both opening and closing tags are required. Note how the closing tags have a slash (/) while the opening tags do not.

The second type of tags are tags that do not require closing tags. They are for HTML elements that do not enclose other elements or text. One example would be the <meta/> tags which specify information about the document useful for search engines or indexing software. These tags have a slash before the closing bracket (>).

In order to have a complete HTML page, everything needs to be wrapped in <html> tags like above. Once you have these tags set up, the next step would be the <head> tags. In the head section, you specify information about your HTML document that is not necessarily displayed in the main window of the web browser. In the example above, the head section has two meta tags that specify some keywords searchers might use to find the page as well as a short description and the web page title. The title given in the head section is used in the title bar of the browser window as well as on search engine listings, so be sure to pick a relevant title.

Now let's look at a slightly more advanced HTML page to understand more about the body section. The body section contains all of the information that is presented to the user in the main viewing window of the web browser. This includes pictures, tables, Flash animations, and links. Take a look at the HTML below to see a more detailed body section (note that the head section and the opening and closing <html> have been left off). 

<body>
  <h1>Welcome to my personal website!</h1>
  <h2>Main Menu</h2>
  <ul>
   <li>
    <a href="resume.html">My Resume</a>
   </li>
   <li>
    <a href="photos.html">My Photos</a>
   </li>	
   </ul>
 <h2>Recent Updates</h2>
 <p>
 	This would list some recent updates to the website.
 </p>
 <h2>Links</h2>
 <a href="http://www.yahoo.com/">Yahoo!</a>
</body>

While in this example you will see lots of unfamiliar HTML tags that will be covered in later tutorials, take a look at the structure of the document. Notice how it is organized into an outline, with the heading tags (h1, and h2) coming one after another like subtopics in an outline. When designing your HTML pages, always think like an outline because this is how web browsers, search engines, and your readers will see it.

Continue on to the HTML Tutorials menu to learn more about these other HTML tags that we use in the body section.