Markup Tags

This section is going to be straight definitions and examples; it should be used as a reference and study guide.

The basic structure of an HTML document is illustrated below. The markup tags in this example are all of the paired type, which is emphasized by the nesting lines shown on the left:

<HTML> and </HTML>: Used as the very first tag, and the very last tag in an HTML document. Many web browsers do not require these tags if your file has the .html extension, but it is always a good idea to use them.
<HEAD> and </HEAD>: Used to mark the header part of the HTML document. Within the header, certain tags are supported that aren't elsewhere. Usually the title is the only thing in the header.
<BODY> and </BODY>: Surrounds the actual document information. All HTML files should have a BODY tag.

This diagram also permits a clear, mechanical definition of "cross-nesting" tags, which must be avoided:

Scan through the HTML and find a tag with a slash.

Scan back from there to find the immediate previous tag of the same keyword.

Draw lines in the left margin, connecting the start and stop tags of that pair. (If the tags are both embedded in the same line of text, then draw the pairing lines underneath.)

Go back to step 1 unless all the paired-type tags in that block of HTML have been marked.

If you can draw the pairing lines such that none of the lines cross, you have properly nested your tags. If there is anywhere that the lines must cross, most browsers will object in one way or another, often rendering the page in unpredictable ways.

What goes in the HEAD

<TITLE> and </TITLE>

The text between this tag is displayed in the title bar of your web client. This is also the entry that gets listed in the bookmarks list, so choose a meaningful title, otherwise someone may get confused when they look for your page in their bookmark list a week later. The title text is also indexed by some of the search engines.

<META>

There are several forms of this tag. The more useful ones are used to provide hints for the search engines, so that they are more likely to lead people to your document who are interested in it. We will discuss it more in the second seminar.

Other tags that can go in the HEAD

<ISINDEX>
Used to inform a browser that the document is a searchable index, not really necessary for 99% of applications and is usually only used by automated HTML generators. Macintosh Internet Explorer Version 5 has a bug such that it will not be able to follow any links in the body of the page if this tag is in the head of the page.

<LINK>
Used to indicate a relationship between the document and other documents or objects. Not used often and I don't recommend it.

<BASE HREF="URL">
If you put this in, the relative URL's in your document are treated relative to this address, rather than relative to the address of the current document. This is almost always a bad idea. More on this later when we discuss anchors.

<NEXTID>
Used to automate hypertext generation, not for use by mere mortals.

Exercise 1

Let's look at the first stage of building the template home page:

The page as it would be seen in Netscape.
The source code at this first stage.

While viewing the source, follow the instructions to begin constructing your own exercise file. We will discuss the tags inside the BODY as this class progresses.

What goes in the BODY

The visible content of your page goes in the BODY section. The tags that you use in the BODY section include:

Separators
Anchors
Images
Headers
Lists
Character Formatting

These tags all go into the BODY section, and are the real meat and guts of your HTML document. We will discuss each of them in detail. Anchors get a section of their own (later), because they are so important.

Separators

When browsers display Web pages, they take the HTML file and re-wrap it to fit the available display area. Tab characters are ignored, and all space characters and line breaks are treated as single spaces and the text wrapped to fit. Thus an ordinary text file cannot simply be placed into the BODY of an HTML page, because it will all run together into one enormous paragraph. This can make the translation between what you see while editing and what Netscape or Lynx puts on the screen a little confusing, but in the end turns out to be quite useful.

There are three main separators used to break up blocks of text in an HTML document:

<P>

This is the Paragraph Break tag. This will end your current line of text and put a nice space in between it and the next line of text. Use these liberally, as people like to rest their eyes when reading, computer text especially. Multiple <P> tags in a row do not increase the white space in the display.

<BR>

Line Break.

The break tag
is
used
to
break
up
lines
of
text. It does much the same thing in HTML that a "Hard Return" does in a word processor.

Multiple <BR> tags in a row do increase the white space in the display.

<HR>

Horizontal (or Hard) Rule. This will place a neat line across your page, from margin to margin, like so:

Horizontal rules are better choices for separating sections of your document than are wide short graphic images, because they will display correctly on any screen and with any browser.

Exercise 1, Revisited

Let's look again at Exercise 1, the first stage of building the template home page:

The page as it would be seen in Netscape.
The source code at this first stage.

While viewing the source, look for the separator tags inside the Body section, and observe their effects on the displayed page.

Mailto Anchor Tags

We will postpone our discussion of anchor tags for links from one Web page to another, but this is the time to talk about the special anchor tag that makes a clickable link that brings up an E-mail window.

Example:

The format is:: <A HREF="mailto:acatec@www.ohiou.edu">acatec@www.ohiou.edu</A>
Which produces the following display:: acatec@www.ohiou.edu

The conventional, but not required, use of this anchor tag is to place the E-mail address between the <A HREF=...> and the </A> tags, to serve as the visible, clickable text of the link. Any visible text or graphic image will serve. The advantage of using simply the E-mail address itself is that it will be printed.

Exercise 1, Revisited

Let's look again at Exercise 1, the first stage of building the template home page:

The page as it would be seen in Netscape.
The source code at this first stage.

While viewing the source, look for the mailto anchor tag near the end of the Body section, and observe the effect on the displayed page. Review the entire page; are there any tags whose meaning and effects you do not understand?

Images

Everyone wants to put pictures in their web pages. It is one of the things that makes the web so appealing.

Each image tag should include four important attributes: SRC, WIDTH, HEIGHT, and ALT. In general, "attributes" are adjectives, adverbs, or objects of the basic tag verb, and are found inside the angle brackets, as shown below. The order of the attributes does not matter, but the primary tag keyword must come first. We will be discussing attributes in more detail in HTML II.

The SRC attribute in the simplest case is just the filename of the image to use. If the image file is in some other folder than the HTML that contains the IMG tag, then SRC attribute will include the name of the folder that contains the image file; we will discuss this in more detail later.
The ALT attribute is a line of text that will be displayed by non-graphical browsers such as LYNX, or by graphical browsers while the image is not loaded. If the text includes any spaces or punctuation marks, it must be enclosed in quotes, so it is a good habit to always enclose the value of the ALT attribute in quotes.
The WIDTH attribute is the horizontal size of the image in pixels.
The HEIGHT attribute is the vertical size of the image in pixels.
Including the WIDTH and HEIGHT will speed up the display of your page, because the browser does not have to wait for the image data file to arrive in order to know those values and so be able to continue laying out the text and other images onto the screen.

Example:

The format is:: <IMG SRC="../gifs/exclam.gif" ALT="!" WIDTH=17 HEIGHT=32>
Which produces the following display:

The SRC element is usually a relative URL (more on that in the anchor section), but can be a full URL. If you use full URL's of an image that exists on another server, you may well make the owner of that server angry, so don't do it without asking permission.

Exercise 2

Let's look at Exercise 2, the second stage of building the template home page:

The page as it would be seen in Netscape.
While viewing this page, right-click on the graphic image (Windows) or click and hold the click until the menu pops up (Macintosh), then choose to save the image. Place it on your floppy disk, into the "NEWHTML" folder, into the "pagemasters" folder, into the "class" folder, into the "gifs" folder.
The source code at this second stage.

While viewing the source, look for the image tag near the top of the Body section, and observe the effect on the displayed page. Review the entire page; are there any tags whose meaning and effects you do not understand?

Headers

Headers are the first tags we encounter that are used to tell the browser the structure of your document. Your earlier school teachers likely emphasized the value of outlining a text you were studying as well as an essay you were about to write. Headers come in levels, which correspond to the various types of outline labels (Roman numerals, capital letters, Arabic numerals, lowercase letters, etc.). Including headers in your Web pages makes it easier for your readers to discern the relationships of the various parts to each other, so by all means include appropriate headers.

The present standard for HTML includes 6 levels of headings, denoted by:

<H1> and </H1>

Example of <H1>
<H2> and </H2>

Example of <H2>
<H3> and </H3>

Example of <H3>
<H4> and </H4>

Example of <H4>
<H5> and </H5>

Example of <H5>
<H6> and </H6>

Example of <H6>

As you can see, above, header levels 5 and 6 are displayed with a type face smaller than the main body text. Even though they are bold, they will be hard to read, because most people configure Netscape to display main body text as small as they can easily read, in order to fit as much as possible on the screen. Therefore it is usually a bad idea to use header levels 5 or 6. If you are viewing your pages on a Windows machine, please be aware that any given text will be displayed significantly smaller on-screen for most Macintosh users, exaggerating this problem for that part of your audience.

Exercise 3

Let's look at Exercise 3, the third stage of building the template home page:

The page as it would be seen in Netscape.
The source code at this third stage.

While viewing the source, look for the header tags in the Body section, and observe their effects on the displayed page. Review the entire page; are there any tags whose meaning and effects you do not understand?

Lists

Lists are the second group of tags that are used to tell the browser the structure of your document. They may work as part of the overall outline that is conveyed by the headers, or they may simply serve to improve the readability of a given section.

There are three main types of lists:

Bulleted with numbers;
Bulleted with graphic characters;
Unbulleted.

Bulleted with Numbers

Lists that are bulleted with numbers are surrounded by <OL> and </OL> tags. (Think of them as "Ordered Lists.")

Each separate list item begins with an <LI> tag. There is no </LI> tag.

Example:

This HTML:

<OL>
<LI>List item number one.
<LI>List item number two.
<LI>List item number three. Notice how the text 
on this list item will wrap around  to form a hanging 
indent, and not be given a new number, even though it 
is wider than one screen-width (at least for people with 
reasonable-sized screens).
<LI>List item number four.
</OL>

produces this display:

List item number one.
List item number two.
List item number three. Notice how the text on this list item will wrap around to form a hanging indent, and not be given a new number, even though it is wider than one screen-width (at least for people with reasonable-sized screens).
List item number four.

Bulleted with Graphic Characters

Lists that are bulleted with graphic characters are surrounded by <UL> and </UL> tags. (Think of them as "Unnumbered Lists.")

Each separate list item begins with an <LI> tag. There is no </LI> tag.

Example:

This HTML:

<UL>
<LI>List item number one.
<LI>List item number two.
<LI>List item number three. Notice how the text 
on this list item will wrap around and not be given a 
new number, even though it is wider than one screen-width 
(at least for people with reasonable-sized screens).
<LI>List item number four.
</UL>

produces this diplay:

List item number one.
List item number two.
List item number three. Notice how the text on this list item will wrap around and not be given a new bullet, even though it is wider than one screen-width (at least for people with reasonable-sized screens).
List item number four.

The graphic characters chosen for the bullets at each level of indentation will depend on the browser. Lynx uses *, +, and -, while Netscape uses solid circles, hollow circles, and hollow squares.

Unbulleted list

The Unbulleted, or definition list, is used in two main ways. First, it is used for a list that you want to put your own bullets onto, rather than the default dots and squares. Second, it is used to indent paragraphs.

Lists that are unbulleted are surrounded by <DL> and </DL> tags. (Think of them as "Definition Lists," they do work well for a glossary.)

Each entry in a definition list has a two parts, the defined term and the defining data.

Example:

This HTML

<DL>
<DT>Definition list
<DD>An HTML list structure that works well for a glossary 
and for the overall structure of a home page. 
<P>
<DT>Defined Term
<DD>The Defined Term is preceded by a <DT> tag and 
appears flush to the current left margin.
<P>
<DT>Defining Data
<DD>The Defining Data is preceded by a <DD> tag and 
appears indented one step from the current left margin. 
</DL>

produces this display:

Definition list: An HTML list structure that works well for a glossary and for the overall structure of a home page.
Defined Term: The Defined Term is preceded by a <DT> tag and appears flush to the current left margin.
Defining Data: The Defining Data is preceded by a <DD> tag and appears indented one step from the current left margin.

It is possible to nest lists and use other tricks to get nicely formatted output. We will discuss list nesting and other techniques in HTML II.

Exercise 4

Let's look at Exercise 4, the fourth stage of building the template home page:

The page as it would be seen in Netscape.
The source code at this fourth stage.

While viewing the source, look for the list tags in the Body section, and observe their effects on the displayed page. Review the entire page; are there any tags whose meaning and effects you do not understand? We will discuss the &...; constructs (e.g., ">") later.

Exercise 5

Let's look at Exercise 5, the fifth stage of building the template home page:

The page as it would be seen in Netscape.
The source code at this fifth stage.

Example 5 shows the use of a Definition List as the overall structure of the entire body section (except for the header image at the start and the boilerplate text at the end). This makes the headers stand out and reinforces the overall outline structure of the document by indenting each level of content one step from its headers. If a given Web page has only a few levels of headers, this may well be a sensible design.

Another good way to get a feel for these lists is to study the list examples.

Character Formatting

The two most important elements in formatting are strong and italic. Strong should be used a lot, and italic should be used as little as possible, because it is so difficult to read on-screen, especially with smaller fonts, and especially on Macintosh computers, which display all text smaller than Windows systems do. Strong and Bold are displayed similarly by Netscape, but Lynx does nothing to text marked with the Bold tag, so it is wiser to use Strong, even though it takes more typing.

Examples:

<STRONG>This is strong text</STRONG>
This is strong text
<CITE>This is italicized text</CITE>
This is italicized text

Exercise 6

Let's look at Exercise 6, the sixth stage of building the template home page:

The page as it would be seen in Netscape.
The source code at this sixth stage.

While viewing the source, look for the STRONG tags in the Body section, and observe their effects on the displayed page. Review the entire page; are there any tags whose meaning and effects you do not understand? We will discuss the &...; constructs (e.g., ">") later.

Back Topics Next

Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/class/html1/tags.html) on January 2, 2002.

Please E-mail any comments or suggestions to acatec@www.ohiou.edu.

<TITLE> and </TITLE>

<META>

Other tags that can go in the HEAD

Exercise 1

Exercise 1, Revisited

Example:

Exercise 1, Revisited

Example:

Exercise 2

Example of <H1>

Example of <H2>

Example of <H3>

Example of <H4>

Example of <H5>

Example of <H6>

Exercise 3

Bulleted with Numbers

Bulleted with Graphic Characters

Unbulleted list

Exercise 4

Exercise 5

Examples:

Exercise 6