Marketing for Libraries Logo

HTML Section: Document Structure

You'll be creating code for a single document at a time. This page provides information about the basic document, elements, and attributes. This page will also discuss the use of doctype and head tags.

Basic Document

A HTML document is composed of a series of elements that tell the browser how to display information on a web page.

Let's explore what a basic document looks like. Then, we'll go back and examine each element.

The basic document should have the following elements.

try itTry It!
Go to the HTML Basic Examples page to see how tags work. Use the TryIt Yourself button to practice using tags.

Notice where each of these is placed on the page. Notice the use of start and end tags.

<!DOCTYPE html>
<html>
<head>
<title>This is the title of my document.</title>
</head>

<body>

<h1>My First Heading</h1>
<p>This is the content of my first paragraph. Isn't it interest?</p>
</body>

</html>

try itTryIt!
Go to Introduction from w3schools and review the basic tags. Use the Try It Yourself button to practice editing and viewing a page.

Elements

HTML documents use elements to define activities such as placing text or images on a page. An element is everything from the start tag <p> to the end tag </p> indicating the beginning and closing of an activity.

Start and End Tags. Most elements require BOTH a start and end tag. Examine the sample code and notice the body and paragraph start and end tags:

<body>
<p>This is the content of my paragraph.</p>
</body>

Empty Tags. A few elements have no content. They're known as empty elements. The start and end tag is all in one. Examine the sample code for the line break.

<br>

Lowercase Tags. The standard is to use lowercase letters in all tags.

readRead!
Read about Elements at w3schools. These are the building blocks of a web page.

Attributes

Attributes provide additional information for elements. For instance, they specify a style, more information, or a special case.

The ones you're most likely to see are:

When creating a link, you use the <a> tag with the href attribute indicating the website address. Examine the sample code from w3schools.

<a href="http://www.w3schools.com">This is a link</a>

Quotes. The values in an attribute must be in quotes.

Lowercase. It's advised to use lowercase for attributes.

readRead!
Read about Attributes at w3schools. These are the building blocks of a web page.

DOCTYPE Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly. Different versions of HTML use different doctypes.

HTML5 is very flexible allowing for earlier versions of HTML code. Here's the doctype for HTML5. You MUST have the ! and you don't need an end tag.

<!DOCTYPE html>

HTML 4.01 and XHTML 1.0 are the other version of HTMLs that you might be using. Many people use the transitional doctype when using the validators. They do the best job finding errors in your document that might cause problems with your display.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML Tag

You start with your declaration. Then, you'll place the rest of the information on the web page between two html tags.

The <html> tag will be at the beginning and the </html> will be at the very end of your document. Most HTML tags have a start tag and an end tag. In the case of the html tag, the start tag is <html> and the end tag is </html>. Notice that the tags are in all lowercase letters. The end tag contains a slash (/).

You can simply start with <html> or add the following to the opening HTML tag. Also be sure that you have an ending tag at the very end of your document.

<!DOCTYPE html>
<html>

</html>

Head Tag

At the beginning of a document you need to include head tags with important information about the document such as the title, instruction on where to find style sheets, scripts, and meta information.

Web pages are divided into two sections: head and body. Background information about the page is included in the head area. This includes the title and meta tags.

The <head> element contains information user to the browser in displaying the page. You need both a start and end tag for this section.

Read more about head tags at w3schools.

The following tags are found in the head section.

Title Tag

The <title> tag defines the title of the document. Every web page should have a title that appears in the window caption bar above the page. Keep in mind that this title will appear across the top of the browser, not across the top of the web page. This title should describe the contents of the page. The title tags <title> and </title> should go between the start head and end head tag. Unlike the file name, the title can use upper and lowercase letters, spacing, and some types of punctuation. It's required in all HTML documents.

Read more about title tags at w3schools.

Link Tag

The <link> tag is used to establish a relationship between the current document and related documents. It's most often used to call style sheets. Don't confuse this with a <a> hyperlink tag that we'll talk about later.

Read more about link tags at w3schools.

Style Tag

The <style> tag is used to define the style information for the page. Inside this element are fonts, colors, and other information. This is know as an internal style sheet.

Read more about style tags at w3schools.

Meta Tags

The <meta> tags are used to help search engines and others know about your document. This information isn't displayed in the web browser. However it's very important.

Meta tags are also placed in the head area and provide information about the page itself. There are many different kinds that can be included. No meta tags are required in an HTML document. They are optional. However they provide important information for developers, testers, and automated system that might read your source code.

Like the encoding declaration, the meta tag can be used to declare the document's character encoding. It's okay to have this information twice in your document as long as the charset statements match.

Meta tags also provide important information about the author of the page, keywords related to the document, a description of the site, copyright information, and web page generator.

If you want to use meta tags, but you're not sure what to include, try the META Tag Generator from AnyBrowser.com. Fill in the blanks and it will generate meta tags.

Read more about meta tags at w3schools.

Script Tag

The <script> tag is used to define a client-side script such as a JavaScript. We'll talk more about this tag later in the semester.

Read more about script tags at w3schools.

Example

Look for these tags in the example below:

<!DOCTYPE html>
<html>

<head>

<title>My Pet Shop</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

<meta name="keywords" content="frogs, lizards, hamsters, dogs, cats, rabbits">
<meta name="description" content="Web page on adopting pets.">
<meta name="author" content="Annette Lamb">
<meta http-equiv="refresh" content="30">

</head>

<body>
The content of the document......
</body>

</html>

try itTryIt!
Go to HEAD from w3schools and review the basic tags.

Body Tag

The content for your web page goes in the body section.

You'll place a body tag at the beginning <body> and end </body> of the content portion of your page.

You can add attributes to your body tag such as a background image, background color, text color, link, color, or vlink color.

In the example below the page background color is set to light yellow.

<!DOCTYPE html>
<html>

<head>
<title>My Pet Shop</title>
</head>

<body bgcolor="#FFFF99">
The content goes here.
</body>

</html>

Creating the HTML Document

If you want to write in NotePad or SimpleText (TextEditor), simply open the software. Enter your HTML code. If you can't think of something to write, use the example above and fill in your information. Or, start a page about your favorite television show, movie, or vacation destination.

Pull down the File menu, select Save or Save As.
Do NOT save your file with the RTF or TXT file extension. 
Be sure to add a .html or .htm file extension to your HTML document such as practice.htm or practice.html. Either way is fine. Traditionally, Macs used .HTML and Windows used .HTM as a file extension, but it doesn't really matter. Also, be sure to use short file names with NO spaces.
It's a good idea to pull ALL the documents related to your project in one folder. Also, keep file names show and don't put spaces in file names.

In Windows, you'll see an option for encoding in the Save window. Change the encoding option from ANSI to UTF-8. 

html document in text edit

Now, let's try it.

Open a web browser such as Chrome.
Pull down the File menu, select Open File.
Browse for your HTML document.
A blank page will appear on the screen, but you should see your title above the blank page in the window caption area. It may not be very exciting, but you've got a good start!
Go back to your HTML document and add some additional text. Save again.
Go back to to your browser and choose Refresh.
Your new information will appear!

html practice document

Quick Overview

It's helpful to have a quick overview of the basic HTML document elements, tags, and attributes. Keep a master list handle when you work.

try itTryIt!
Go to Quick List from w3schools and review the quick reference list. This section of the course will explore each of these tags in-depth.

As you work your way through this section of the course, you may be looking for additional examples. The HTML Examples page from w3schools provides lots of examples.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson