Paired and Unpaired Tags

The purpose of this page is to demonstrate some of the features of html that you should be using in your work.

The following tables will help you move around this page (which is quite long). Clicking on any cell in the first table will take you to that section of the page. Click on any cell in the second table will take you to an explanation of that tag.

There is a link <Return to top> which will return you to these tables.

Major sections
What is HTML? How HTML works Unpaired tags Paired tags Examples UNIX help

**Major sections**
What is HTML?	How HTML works	Unpaired tags	Paired tags	Examples	UNIX help

HTML Tags
unpaired tags <doctype> <hr> <basefont*> <meta>

paired tags <html> <head> <title> <body> 

<h#> <address> <center*> <blockquote>

<pre> <font*> <big>

 <strike*> <tt>

<samp> <u*> <cite> <code> 

<lists> <div>

**HTML Tags**
unpaired tags	<doctype>	<br>	<hr>	<basefont*>	<meta>
paired tags	<html>	<head>	<title>	<body>	<p>
<h#>	<address>	<nobr>	<center*>	<blockquote>
<pre>	<font*>	<b>	<i>	<big>
<small>	<strike*>	<sub>	<sup>	<tt>
<samp>	<u*>	<cite>	<code>	<em>
<lists>	<div>	<strong>

How HTML works

Basic markup involves the use of a set of tags, which can be described intwo ways.

First, there are block-level and inline tags. A block-level tag will be interpreted by the browser as having a line break, so you don't have to include one. Examples include <h#>;, and <ul>. An inline tag does not have an automatic line break. Examples include , and <img>.

Second, there are paired and unpaired tags. Unpaired tags are opened and do not have to be closed. They stand alone. Examples include ;, and <img>. Paired tags must always be opened and closed. A front slash </> is used to close the pair. Examples include <DOCTYPE>, and <hr>.

Tags can be modified with attributes which have values. Before looking at some of these tags, a word or two about attributes; these are elements of HTML that allow you to have more control over the way your pages look. For example, instead of simply placing a horizontal rule <hr> on the page and letting it take the default value, you can specify its length and alignment using attributes with different values.

The generic form of an attribute is:

<html_tag attribute="value">

So, in the example mentioned above, to instruct the browser to display a horizontal line that will extend across three-quarters of the page from the left margin, you would use:

<hr width="75%" align="left">

As we go through some of the common forms of HTML markup, you will notice that many tags have sets of attributes that you can use.

As you get better at marking up documents, you'll begin to experiment with nesting tags. This means that you can instruct a browser to display an element of your page with multiple effects. For example, you can make a phrase

larger and bold

smaller and italicized.

What you must remember is that you should end your nested tags in the exact reverse order as you started them. The markup for the first example above would then look like this:

<font size="5">larger and bold</font>

You can include comments within your html markup that will not be displayed by the browser. You can use this tag to place information about the document (or you) that only will be visible to people who view your source markup. It is also possible to include commands that instruct servers that access your page to perform different functions (which is beyond what we will do here).

The comment tag uses an opening markup of . There must be one space after the second - of the opening markup and one space before the closing -. The comment is the text that appears in between the markup. Here's an example of a comment used in these demonstration pages:

Return to top

Some common markup tags (unpaired and paired)

Some of the common tags are:

Unpaired, which appear alone in your markup. These include:

<DOCTYPE> This unpaired tag is actually the first line of your HTML document. This tag is important because it alerts the browser that is accessing your page that you are using a particular version of HTML. This tag is required in all HTML pages. Since we will be working mostly with HTML 4.01, this is the DOCTYPE we will use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">

!DOCTYPE identifies the document as having a specific type

HTML PUBLIC specifies the document type as an HTML file

"//W3C//DTD HTML 4.0 Transitional//EN" further specifies that the file uses elements defined in the World Wide Web Consortium's document type definition (DTD) for HTML 4.0. The term Transitional means that the document still used some deprecated elements

"http://www.w3.org/TR/html4/loose.dtd" is the locatioon of the DTD that describes this bersion of the markup language

You can cut and paste this declaration and those tht follow directly into your HTML and XHTML documents.
There is a version of this tag that we must use when we work with strict HTML 4.01. This means that we are following the rules of this version and are not using any deprecated tags. When you have clean CSS markup, this would be the DOCTYPE declaration that you would use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

There is also a version to use when following the rules of HTML 4.01 and using frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

There is another set of DOCTYPE declarations for use with XHTML. There is one for transitional XHTNML, where you are following the rules of this version but using some deprecated tags:

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

There is a version to use when closely following the rules of this version of the markup language:

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

Finally, there is a version to use with frames:

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

Return to top

 
[In XHTML:  ]

Use line breaks to control the way in which you want the text to appear on the screen. The   tag is used in this sentence to break the line here
exactly where you want it to break - in this case, after the word "here".

The amount of space that is inserted by the browser after a line break
is much less than the amount of space that is inserted

after a paragraph break.

The   tag takes one attribute called <clear>, which is often used in conjunction with images (which we'll get to on another page). This attribute will cause the text to break around an image and continue below it, relative to the appropriate page margin. It takes three values:
1.   Use this tag if the image is aligned along the left margin
2.   Use this tag if the image is aligned along the right margin
3.  Use this tag if there are images aligned along both margins

Return to top

<hr>
[In XHTML: <hr />]

Horizontal rule, to which attributes can be added, such as:
1. aligned left, right, and center <hr align="direction">
2. Adjusted for size <hr size="n">, where n is the size in pixels
3. Adjusted for width <hr width="w"> where w is the width in pixels or a percentage of the width of the page
4. Made a solid bar <hr noshade>
 [In XHTML: <hr noshade="noshade" />]
There are different types of horizontal rules on the example page.

Return to top

<basefont * size=n> This sets the font size for the entire page based on a value from 1 to 7, with 3 being the default. This is the absolute value for the tag. This tag has been deprecated in HTML 4.01.
You can use a relative value for the basefont by using a size="+ or -n". This will be displayed by the browser relative to the default font size, which is 3. basefont size="+2" would produce a font size of 5.

You should only have one basefont tag on the page, and it should be placed after the opening body tag. The markup might look like this:

<body>
<basefont size="4">

The basefont tag only affects text. It will not affect the text that is enclosed in certain other tags, for example, text in a paired H# tag or in a table.

Return to top

<meta>
[In XHTML: <meta />]

The meta tag must be included within the document's header and is used to supply additional information about your document which is sent out to the remote server by your server, just before it sends out the document. This information is supplied by including one or more of the following attributes.
1. <http-equiv> This attribute will supply information to the server through which another browser is attempting to access your page. The default information defines your document as content-type: text/html.
 
 A required http-equiv declaration that should be in every HTML or CXHTML page that you write specifies the character encoding that you are using. This information allows a browser to correctoyl render your page. Use this one:
 
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
 You can copy and paste this declaration directly into the <head> container in your pages.
 
 You could also use this tag to indicate that such information as keywords, or author's name is available.
2. <name> This attribute can also be used to define the types of information that will be sent to the server through which the browser is requesting your page.
 
 Note that you must use either the <http-equiv> tag or the <name> tag, but not both. In addition, many servers cannot process this information and will ignore it.
3. <content> This attribute provides the values associated with the names defined by <http-equiv> or <name>
For example, to include several keywords for this document, the author's name, and the date it expires, the following markup would be used:

<meta http-equiv="keywords" content="html, paired, unpaired tags">
<meta name="author" content="Rosenbaum">
<meta name="expires" content="1 Jan 2006">

If using XHTML, the markup would look like this:

<meta http-equiv="keywords" content="html, paired, unpaired tags" />
<meta name="author" content="Rosenbaum" />
<meta name="expires" content="1 Jan 2006" />

The information sent to server through which the browser is requesting your page would be:

content-type: text/html
keywords: html, paired, unpaired, tags
author: Rosenbaum
expires: 1 Jan 2006

For another interesting use of the meta http-equiv tag, let's quickly go to another page. Don't worry, we'll be right back.

Return to top

Paired, which always must be opened and closed:

There are four paired tags which should always appear in your web documents.

<html> and </html> The opening part of the html tag should be the second tag used in your document. It alerts a browser to the presence of an html document. The closing html tag should be the last line of your document.

Return to top

<head> and </head> The header tag is the third tag to use because it defines a section of your document that will not be displayed by the browser. This allows you to place other types of information in your document, such as a document title or meta-information that can be picked up by search engines

Return to top

<title> and </title> The title tag allows you to place text across the top of the browser window. The text between the opening and closing tags will be the title of your document.

Do not use any special formatting or markup tags in the title of your document.

Return to top

<body> and </body> The body tag defines the text area of your document. The opening body tag follows the closing head tag; the closing body tag precedes the closing html tag, unless you are working with frames

You would use these standard tags in the following way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Demo Page: Tags</title>
</head>
<body>
This is where the text would go
</body>
</html>

Return to top

Here are some other paired tags that you can use:

 and  Paragraph break. This tag marks the beginning of a paragraph, not the end of one. It instructs the browser to place a blank line after the preceeding paragraph.

The closing  is typically omitted, and this does not violate the standard. However, when using cascading style sheets, the closing  tag is needed to mark the end of the application of a style.

All text between two  tags are considered to be in the same paragraph. The block of text is called an element.

A paragraph break  has one attribute which can take three values:
1.  The default is to be aligned to the left side, so you don't have to use this one.
2.  will center the paragraph
3.  will place the paragraph on the right margin
Note that you can't stack paragraph breaks to add extra lines between paragraphs. The second  is considered a redundant tag by the browser and is ignored. There are other ways to control white space, such as the use of cascading style sheets. By the way, this paragraph and the one that follows are preceded by the following markup:



That's why these words are right justified and there is a ragged edge along the left side of these words.

Return to top

<div> and </div> This tag is used to create divisions or containers in the document, each of which may have different attributes, such as alignment, font size, and font type. Many elements can be included between the opening and closing <div> tag including paragraphs, tables, and lists.

This tag is most useful when working with HTML 4.01, cascading style sheets and XHTML.

There's an example of the use of the div tag on the example page.

Return to top

<h#> and </h#> This tag defines the headers in the document, where # is a number from 1 (the largest) to 6 (the smallest). Headers will place an automatic paragraph break after the last of the text, so you don't have to use a  in conjunction with this tag.

Here are two examples:

This is the largest header (h1)

This is the smallest header (h6)

Headers can be positioned using the align attribute, which takes three values:
1. <h# align="left"> The default is to be aligned to the left side, so you don't have to use this one.
2. <h# align="center"> will center the header
3. <h# align="right"> will start the header from the right margin
For example:

Here is a large, centered header

Here is a tiny, right-aligned header

You can nest other html tags inside of h# markup; remember to close them in reverse order! Also, don't use h# markup to change the font characteristics of the page - there are better ways to this.

Return to top

<address> and </address> The address tag is used to create a block of text containing information about the document and its author. It will italicize all of the text included between the tags. The address is typically used at the bottom of the page and looks like this:

<address>This page prepared by Howard Rosenbaum Last update:12.31.99
</address>

It is displayed like this:

This page prepared by Howard Rosenbaum
Last update:12.31.99

Return to top

 and  The no break tag can be used to prevent the browser from breaking the line at the edge of the browser window (which can be set by the user). A line of text will not wrap if it is enclosed within this tag.

For example, the use of the  tag can be really annoying because the reader will try to make the browser window as wide as possible, but if you make the sentence long enough, he or she will still have to use the scroll bar to get to the end of the sentence. Obviously, use this one with care.

Return to top

<center*> and </center> This tag

centers text

The center tag also will center whatever else you include on your pages,including images, tables, and forms. You use one set of center tags to enclose all of the consecutive elements on the page that you want to appear in the center of the page. This term has been deprecated in HTML 4.01

Return to top

<blockquote> and </blockquote> This tag sets off text by indenting a block of text the equivalent of one tab stop from the left margin. It can also separating it from the preceeding paragraph with an empty line and indentation.

To use it properly, you should use another tag, such as the  after the opening <blockquote> tag. As you can see, this paragraph has been enclosed in a pair of <blockquote> tags.

There's another example of a blockquote on the example page.

Return to top

<pre> and </pre> This tag preserves the formatting of the text, but displays it in a monospaced font like Courier, so it will not look the same as the font or fonts used on the rest of the page.

You can use some HTML tags inside the paired pre tags. Those that force line and paragraph breaks cannot be used, but physical and logical tags can be used, although browsers will always use the monospaced font.

An interesting use of the pre tag is to insert a block of blank lines into a document. For example, here will be six blank lines after this sentence because of the use of the <pre>tag.
There's another example of the pre tag on the example page that shows how it preserves original spacing in an ASCII document.

Return to top

<font*> and  This tag provides some control over characteristics of the text display. It is a deprecated tag in HTML 4.01. font characteristics can be controlled with cascading style sheets.

There are three main attributes that will work with this tag, size, face, and color. The first two will be discussed here, the third will be discussed on the Image and Color page.
-  This tag will change the font size based on a value from number from 1 (the smallest) to 7 (the largest). A font size of 3 is the default.
 
 You can use the font size tag to change a single character, a word, a sentence, or a paragraph.
-  This tag will suggest a series of font styles to a browser, which will try to display the first one it can find on the user's computer. If it can't find any of them, it uses the default font set by the user.
 
 The order of fonts should be from a specific font face (Times-Roman) to a general font family (Serif). The browser will go through the suggested fonts in order. The markup looks like this:
 
 text
You can use this tag and its attributes as many times as you want in a document. You can also combine these attributes, for example:

text 

Remember that it must always have the closing  tag

There are some examples of the font tag with the size and face attributes on the example page.

Return to top

There is a set of physical style tags which can be used to mark up documents. These tags force different browsers to display the marked up elements in the same way. This is a short list which is not complete because some of these tags are only supported by a single browser or are part of proposed standards not yet in use.
1.  and  Bold text, which the user's browser cannot change.
2.  and  This tag produces italicized text
3. <big> and </big> This tag will make the text bigger than surrounding text
4.  and  This tag will make the text smaller than surrounding text
5. <strike*> and </strike> Strike out text by placing a ~~line~~ through it. Note that not all browsers can display this, so be careful about using it. This term has been deprecated in HTML 4.01
6.  and  This tag produces _subscript
7.  and  This tag produces ^superscript
8. <tt> and </tt> This tag produces a fixed width font that resembles typing.
9. <samp> and </samp> This tag also produces a monospaced display and is used to indicate text that is part of a computer process. For example, type exit to quit the editor
10. <u*> and  This tag produces underlined text. Since many browsers indicate links with underlined text, you should probably use this sparingly. This term has been deprecated in HTML 4.01

Return to top

There are also logical or content-based markup tags that will make text stand out,but they will vary with the browser used to view them. Logical or content-based markup is concerned more with the meaning and intent of the document than with its appearance.
1. <cite> and </cite> This tag can be used for citations, such as:
 
 Rosenbaum. (1996). html Demonstration Pages.
2. <code> and </code> This tag uses a fixed width font to display text, but has the advantage of allowing the coded text (typically actual lines of code) to be extracted from the page by a search tool. This text is smaller than the default text displayed by the browser. If you are not displaying computer code, you should use the <tt> tag.
3.  and  This tag produces emphasized text which is rendered differently by different browsers.
4.  and  This tag produces strong text which is rendered differently by different browsers.

Return to top

You can also use paired and unpaired tags to organized text into different types of lists. This page has an explanation of the different types of lists you can use in your markup with examples of each type.

Return to top

Want to know more? Here are links to other pages about HTML.

Use the Back button to return to this page when you are ready to continue.

Demo Page
Navigation: DemoPage contents About html UNIX help HTML tags Lists Links Images

Imagemapping Tables Forms Frames Javascript CSS (style sheets) XML

Demo Page Navigation:	DemoPage contents	About html	UNIX help	HTML tags	Lists	Links	Images
Imagemapping	Tables	Forms	Frames	Javascript	CSS (style sheets)	XML

Page by Howard Rosenbaum

Find me at [email protected] http://www.slis.indiana.edu/hrosenba/www/Demo/Demo.html

Page by Howard Rosenbaum
Find me at [email protected]	http://www.slis.indiana.edu/hrosenba/www/Demo/Demo.html

Paired and Unpaired Tags

How HTML works

Some common markup tags (unpaired and paired)

This is the largest header (h1)

This is the smallest header (h6)

Here is a large, centered header

Here is a tiny, right-aligned header