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.
Types of Tags
These tutorials are about XHTML, the Extensible Hypertext Markup Language.
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 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.
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,
Although there are some commands that need to be outside the
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
<-- begin file --> This sentence is not part of the HTML document. Most browsers will dump it as garbage at the top of your page. <html> This is where the content of the HTML document goes. <html> <-- end file -->
One level beneath the
<-- begin file --> <html> <head> This is where the meta-information for the document goes. </head> <body> This is where the displayed contents for the HTML document goes. </body> <html> <-- end file -->
End tags are very important for all three of these elements. If you forget the
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.
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
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
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.
All of my Web pages have me listed as the author of the page using this tag:
<-- begin file --> <html> <head> <title> A sample document </title> <meta name="author" content="Peter L. Kantor" /> </head> <body> This is where the displayed contents for the HTML document goes. </body> <html> <-- 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.
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
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.
The simplest content tag is the paragraph tag,
Some other common content tags are
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:
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 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
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
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
Sample descriptive (content-based) styling tags
Sample physical stying tags
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
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
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
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 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:
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:
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.