[main] [misc] [graphics] [page design] [site design] [xhtml] [css] [xml] [xsl] [schema] [javascript] [php] [mysql]

Blackboard HVCC
Blackboard Manual
Faculty Association

xhtml main
1. what is xhtml
a. xhtml hello world
b. what is html
c. html syntax
* d. types of html tags
e. what html is not
f. xml and xhtml
g. html to xhtml
2. xhtml document basics
3. xhtml basics
4. xhtml special chars
5. xhtml attributes
6. xhtml hyperlinks
7. xhtml images
8. xhtml tables
9. xhtml forms
10. xhtml frames
11. xhtml meta content

print version

Note that all external links will open up in a separate window.

This is a stripped down version of these pages for older browsers. These pages are really meant to be viewed in a standards compliant browser.

Directions for surfing with audio.

Types of Tags

These tutorials are about XHTML, the Extensible Hypertext Markup Language.

Categorizing Tags

Tags can be categorized various ways. They can be categorized by their function within the document, or by whether they have content or not, or by their location in a document.

I would like to discuss categories of tags in terms of their use in an HTML document. The point of the groupings is to develop ways of thinking about tags in terms of the contents of a document. By thinking about the category a tag falls into, it becomes easier to use the tag correctly.

Later on we will talk about types of tags in the more formal and general context of markup languages.

Section Tags

Section tags divide a document in sections. An HTML document is comprised of two sections, a header and a body, and these sections are delimited by the appropriate tags.

Both sections of the document are contained by a single tag. Since a single file may contain information in addition to its main content, or may even contain multiple documents, one rule of a marked up document is that there should be a command to tell the program reading the document where the document starts and where it ends.

When you read a book, you know where it starts and ends. You start at the front cover and move on toward the back cover. However, the entire book is not necessarily part of its contents. It will have title pages, and dedications, and indexes and gloassaries. All of these are not part of the actual contents of the book. You can even have a book that is a collection of individual essays or articles, in which case each essay is its own document. The fact that all the articles in a single issue of a magazine exist between the same covers does not make them all a single document.

<html>: the root tag that delimits all other content in an HTML document

The same is true of computer files. The file the computer is trying to read may contain much more information in it than the document it is looking for.

The tag that delimits, or marks the beginning and end, of an HTML document is, conveniently, <html>.

Although there are some commands that need to be outside the <html> tags, only things delimited by the <html> tag are actually part of the HTML document.

document root: the tag that delimits all other content in a document, marking its beginning and end

In XML terms, which is talked about elsewhere, the <html> tag is known as the document root, the element within which all other elements in the document must reside.

<-- begin file -->

This sentence is not part of the HTML document.
Most browsers will dump it as garbage at the 
top of your page.


This is where the content of the HTML document goes.


<-- end file -->

One level beneath the <html> tag there should only be a few section tags. Two that should always be there (except in the case of frames, which is a topics for later) are the <head> and <body> tags.

<head>: the tag that delimits the meta-content for an HTML document
<body>: the tag that delimits the displayed content for an HTML document

The <head> tag is always the first thing in an HTML document and defines the header of the Web document. It is where meta-information for the document goes. Meta-information is information about the document, such as a title.

The <body> tag is what delimits the actual content of the page as it is displayed by a Web browser.

<-- begin file -->


    This is where the meta-information 
    for the document goes.

    This is where the displayed contents 
    for the HTML document goes.


<-- end file -->

End tags are very important for all three of these elements. If you forget the </head> tag, the browser will probably figure it out when it reaches the <body> tag. However, if you forget the </body> or </html> tags, the page may not display at all as the browser proceeds to keep looking for the end of the page.

Anything that can be seen as creating a document section can be considered a section tag. We will discuss other section tags as we come to them.

Header Tags

<title>: the tag that delimits document title. Its contents are displayed in the title bar of the browser
<meta />: the tag that is used to add additional meta-information to a document

The header can contain various tags that are unique to the header section of an HTML document and serve to define or document various features about the document as a whole.

The two basic header tags are the <title> tag and the <meta /> tag.

The <title> tag is where you put the title of the document.

You should have a title for all Web documents you create. In fact, XHTML requires that you do. This title is what is displayed by the Web browser as the name of the document when the document is viewed online. It is also the name under which the document will be saved to a bookmark or favorites list. It is the label for that page. Without it the page has no name.

meta-: a prefix that defines something as self-referential

The <meta /> tag is a catch all documentation tag. If there is information you want to include with the document as documentation for the document you can use either comments or <meta /> tag.

It is called a meta-tag because it is a tag used to describe the document. Meta is a term used to denote something that describes or refers to itself. For instance, linguistics is used to decribe the way we use language. Since it has to use that language to do so, the way in which it presents this description is considered a meta-language.

The <meta /> tag has the benefit over comments of setting system variables that can be referenced, rather than just annotating the document.

All of my Web pages have me listed as the author of the page using this tag:
<meta name="Author" content="Peter L. Kantor" />

<-- begin file -->


      A sample document
    <meta name="author"
      content="Peter L. Kantor" />

    This is where the displayed contents 
    for the HTML document goes.


<-- end file -->

There are other header tags used to do thing like include external files in the document as well as to perform other tasks. We will talk about these at an appropriate time.

Just remember that header tags should not display within the document when it is viewed in a Web browser. They may affect what is displayed is different from the elements they delimit being displayed.

Content Tags

Just about everything that is not part of the header is part of the body of an HTML document.

The tags that go in the body of the document, that is between the <body> and </body> tags can be defined as content tags. They delimit the content of the document. These form the majority of what you need to know about HTML.

Most of the visible content of a Web page will be inside content tags. Content tags are tags that are used to structure content, usually in the form of text. They can structure text into tables, allow for inline forms, create simple paragraphs, and mark text as one of a hierarchy of headers. They can also be used to include external files within the document stream.

<p>: the paragraph tag. The workhorse of the HTML document

The simplest content tag is the paragraph tag, <p>. It is such a common tag that, as a shortcut, its end tag is optional in traditional HTML. Standards, however, require that you include it.

Some other common content tags are <table>, <h1> (level 1 header), and comment tags. Comment tags are different from regular tags and look like this:
<!-- this is a comment -->

They take their structure from SGML, which begins certain types of commands with an open bracket and an exclaimation point ( <! ).

Comments are hidden when the document is displayed in a Web browser. They are meant to document the code to make it easier to read when editing.

If you use two dashes together within a comment, some Web browsers will assume that it is the end of the comment and print the rest of the line. The comment:
<!-- oh look -- this should be hidden -->
might result in the following actually showing up on the screen:

this should be hidden -->

In a nutshell, a content tag is most any tag that defines some content element of a document and delimits that content.

Styling Tags

Styling tags are tags that define the formatting of some portion of text or modify the formatting of another tag.

Styling tags can be divided into two types of tags, those that are based on the nature of the content and those that those that are descriptions of physical types of formatting.

In terms of types of markup, a content-based style is another way of saying descriptive markup, while a physical style is a form of stylistic markup. We will talk about these terms later.

content-based stylnig tag: describes the nature of the content, or the delimited element, and lets the browser determine how best to display it

A content-based styling tag might be something like <blockquote> to denote a quote block or <cite> to denote a citation. They define the nature of the content and let the browser decide how to display it.

Don't confuse a content-based styling tag, which is a specific type of tag, with a content tag, which is any tag that delimits content, including content-based styling tags. To help tell them apart, I will tend to refer to content-based tags as descriptive tags from here on.

Physical styling tags are tags such as <i> for italic or <b> for bold. They specify the physical appearance of the content.

physical styling tag: specifies a physical display property, or appearance, for the element

When using styling tags, it is recommended that descriptive style tags be used whenever possible because they are more flexible, as well as being self documenting.

If something is italicized, the user has to think about why, since many types of formatting call for italics. However, if the author uses
<cite> to italicize citations and
<em> to italicize words needing emphasis, and
<dfn> to italicize definition terms,
then, for someone looking at the code, the page is self-documenting. This also allows people to set up their browsers to display citations, emphasis, and definition terms differently if they so desire.

Sample descriptive (content-based) styling tags

<cite> -- citation
<code> -- code samples
(<code> was modified for this document to make the examples stand out better)

Sample physical stying tags

<i> -- italics
<b> -- bold face

Empty Elements

empty element: an element made up of tags that has no content because it is content or is a placeholders for content

Some elements are empty elements. Instead the element is made up of a tag that is the content or a placeholder for the content. You will also sometimes see these referred to as contentless tags, which can cause confusion, since some contentless tags are content tags. We will stick with the term empty elements.

Empty elements are an easy idea to grasp. Thier tags do not delimit any content, but rather are themselves a content element, usually some sort of non-text content being included in the document, such as an image.

The most common empty tag is the <img /> tag, which is used to place a graphic image in a document.

The "content" of an empty element is defined by its attributes. For instance, the attributes of an image tag would have to include at least the name of the file in which the image is stored. It may also include information on how large the image is, how to align the image on the page, whether to write out some piece of text on the screen if the image is not visible, and other features.

Two other common empty elements are <br /> and <hr />. The <br /> tag inserts a line break in a page. The <hr /> tag inserts a horizontal rule in a document.

Since empty element tags, being elements in and of themselves, have no additional content, they also have no end tags to delimit the end of the content. This is a problem for XHTML, where all tags must have end tags.

The way this problem is solved is by putting the end tag marker inside the opening tag. If you see something that looks like this
<br />
<img src="somefile.gif" />
then the author is coding for XHTML instead of plain HTML. This is called tag minimization.

To add to our list of confusions, it is also possible for normal content tags to in certain circumstances have no content. We will reserve the term contentless to describe these. A contentless content tag cannot be minimized as an empty element tag can, at least not in XHTML.

Anchor Tags and Hyperlink Tags

anchor: (also called a fragment identifier) a bookmark-like piece of code in an HTML document that can be addressed with a hyperlink

The last type of tag we will talk about here is the anchor tag and hyperlink tag. These two tags use the same tag, which is the tag <a>. The a stands for anchor, or address, take your pick. I refer to it by function as an anchor tag or hyperlink tag.

A hyperlink tag contains a link to another document or document location. An anchor tag is a bookmark within a document that is used to assign a name to a section, or fragment of a document.

An anchor tag always has the following attribute:
<a name="some name"></a>
This assigns a name to the document fragment. The anchor tag does not need to contain any content, but it does need to have its end tag.

hyperlink: a command that allows you to put hotspots in a hypertext document that will take you to another location when clicked on

The hyperlink tag always has the following attribute:
<a href="some address">Some Content</a>
The href attributes stands for hyperlink reference, and it is the address of the location you want to link to.

The hyperlink tag must contain some content, unless you want a link that is zero pixels by zero pixels and no one can click on. That's great for a puzzle page where people have to find the hidden link, but not much use for navigation.