HTML Glossary
This is a glossary of HTML tags, which defines each tag and shows examples of their use and what they will look like. Note that how each of these tags looks is dependent on the browser that you are using and the Preferences set within it.
The tag definitions are seperated according to function. Going to the alphabetical listing at the end of the glossary is the quickest way to find a particular tag.
The following tags are primarily for the purpose of making your HTML easier to read, by seperating it into different components. Netscape's additions to the <body> tag make it more functional than that.
<html> </html> - mark the beginning and end of the entire HTML document.
<head> </head> - mark the beginning and end of the head portion of the HTML document.
<body> </body> - mark the beginning and end of the body of the HTML document.
- background = URL - optional. Specifies an image that should appear behind the text of a page (the image will be tiled to fit the page). URL specifies the image file that contains this image (either a GIF or a JPEG). This page, for instance, uses the image file tile.gif. Note how small the image is -- the smaller the image file, the quicker it and the page will load. Any image file can be used, but it should be one that can be tiled, and it should be as small as possible. Netscape has a Background Sampler that you can download background images from. Other links to sites with background images are on the class page.
- bgcolor = #rrggbb - allows you to specify a background color for your page. If used in conjuntion with background, allows you to specify the background color that will be used if a user has automatic loading of images turned off. The #rrggbb is a hexadecimal red-green-blue triplet (don't know these off the top of your head? check out this Color Index).
If the background attribute has been used, Netscape will default to that, unless automatic loading of images has been turned off, or Netscape cannot load the image file specified by the background attribute.
- text = #rrggbb - allows you to specify a text color for your page. Uses the same hexadecimal red-green-blue triplets as bgcolor.
- link = #rrggbb - allows you to specify a color for links on your page.
- vlink = #rrggbb - allows you to specify a color for visited links on your page.
- alink = #rrggbb - allows you to specify a color for active links on your page.
The head portion of an HTML document is generally used to specify a variety of things that are specific to the document. The only tag in general use is:
<title> text </title> - specifies the text that will appear in the title bar of your browser (in Netscape it will appear in the blue bar at the top of the Netscape window, right after "Netscape - "). If you don't specify a title, Netscape puts the URL of your Web page in the title bar. The title of a page is also the text generally used by Netscape and other browsers as the name of bookmarks pointing to that page.
Others include:
<base> - specifies the base URL of the Web page in question. Generally used for documentation purposes, where the page may be read out of context. Relative URLs will be resolved relative to the URL specified in the <base> tag (whereas they are normally resolved relative to the URL used to access the Web page).
The only attribute in the <base> tag is
- URL = URL - URL specifies the base URL of the Web page.
Web browsers don't recognize carriage returns in an HTML document. So, even if your HTML looks neatly divided up into seperate lines and paragraphs in your HTML or text editor, Netscape et al will run it all together unless you use the following tags.
<p> - the paragraph tag. Inserts a blank line between the text preceding the tag and that following it. <p> is not cumulative -- that is, several <p> grouped together have the same effect that a single <p> does. Doesn't have an ending tag.
<br> - the line break tag. Text following this tag starts on a new line, but without a blank line between it and the text before the tag. <br> is cumulative -- a blank line will be inserted for each <br>. Doesn't have an ending tag.
- clear = left|right|all - for use with floating images. Allows you to specify that the text following the tag should begin beneath a floating image on the left margin, one on the right margin, or beneath images on all of the margins.
<hr> - the horizontal rule tag. Produces a shaded engraved line seperating the text preceding the tag and that following it. Doesn't have an ending tag.
- size = number - allows you to specify the thickness of the line.
- width=number|percentage - the default horizontal rule is the width of the page. Using this tag, you can specify the width of the rule as a number of pixels, or as a percent of the width of the page. The horizontal rule will be placed in the center of the page, unless you use the align specification below.
- <hr align=left|right|center> - if you change the width of the horizontal rule so that it isn't the same width as the page, you should specify whether it should be aligned to the left side of the page, the right side, or in the center.
- <hr noshade> - lets you eliminate the shading under the line.
Examples
The above is an example of a header. Headers are used to seperate out sections of the Web page. A blank line is placed before and after each line of a header. There are six levels of header:
<h1>Produces this size text</h1>
<h2>Produces this size text</h2>
<h3>Produces this size text</h3>
<h4>Produces this size text</h4>
<h5>Produces this size text</h5>
<h6>Produces this size text</h6>
There are numerous ways to make some text stand out, including boldfacing and italization. The following four tags are specific -- forcing the Web browser to display the text in an exact way.
<b> text </b> - specifies that text should be boldfaced.
<i> text </i> - specifies that text should be italicized.
<u> text </u> - specifies that text should be underlined. Ignored if the Web browser showing the page is configured to underline links (which is the default in Netscape).
<tt> text </tt> - specifies that text should be printed in the fixed font specified in the browser's preferences rather than the variable font (which text is normally displayed in).
The following tags are handled differently by different browsers. Using them allows the browser to decide whether boldfacing or italization is appropriate for providing emphasis, or for showing citations etc., rather than you deciding.
<address> text </address> - specifies that text is an address. It will be set off on a seperate line as well as having a different appearance.
<cite> text </cite> - specifies that text is a citation.
<code> text </code> - specifies that text is computer code (HTML or some other language).
<dfn> text </dfn> - specifies that text is a definition.
<em> text </em> - specifies that text should have emphasis.
<kbd> text </kbd> - specifies that text is text that should be entered on the keyboard.
<sample> text </sample> - specifies that text should be set off as a sample.
<strong> text </strong> - specifies that text should be strong.
<var> text </var> - specifies that text is a variable.
Netscape adds the following text appearance tags:
<basefont> text - specifies the base font characteristics for all text following the tag. Generally used to change the base that relative uses of <font> works from. No closing tag.
Currently the only attribute supported by the <basefont> tag is
- size = number - required. Specifies a size for all text following the <basefont> tag. Number can range from 1 to 7, and defaults to 3.
<blink> text </blink> - specifies that text should .
<center> data </center> - specifies that data should be centered on the page.
<font> text </font> - specifies font characteristics of text.
Currently the only attribute supported by the <font> tag is
- size = number - required. Specifies a relative size for all text following the <basefont> tag. Number can either refer to an absolute size (which can range from 1 to 7), or by including a + or - in front of number, it can refer to a size relative to the basefont (which defaults to 3).
Lists
HTML has several ways to format lists in order to make them more readable. The different types are bulleted lists, definition lists, directory lists, menu lists, and numbered lists. Their elements are discussed seperately below, except for <li> (list item), which is common to all of them except definition lists.
<ul> <li>list item <li>list item . . . </ul> - produces a bulleted list (each list item is preceded by a bullet/symbol). If bulleted lists are nested, the bullets go from solid discs at the highest level, to circles, to squares, and so on to the deepest level. Each list item is preceded by the <li> tag. If no <li> tags are used, text within the <ul> tags will be indented, but will not have any bullets in front of it. Normal <br> and <p> tags can be used to break up the text.
- type = disc|circle|square - optional. Specifies that all list items at this level of indentation will use either a disc, circle, or square as their bullet.
<dir> <li>list item <li>list item . . . </dir> - produces a directory. Functionally equivalent to <ul>.
<menu> <li>list item <li>list item . . . | text </menu> - produces a menu. Functionally equivalent to <ul>.
<ol> <li>list item <li>list item . . . </ol> - produces a numbered list (an ordered list).
- type = 1|A|a|I|i> - optional. Specifies whether list items should be preceded by numbers (type = 1; this is the default), capital letters (type = A), small letters (type = a), large Roman numerals (type = I), or small Roman numerals (type = i).
- start = number - optional. Specifies where the list should start numbering (the default being at number 1). Although number should always be a number, what is displayed will follow the type specification above (thus start=5 will display 5, E, e, V, or v depending on the type attribute).
<li> data - a list item. The data from the <li> tag until the next <li> tag, or the end tag of the list will be treated as a seperate item (bulleted or numbered or just lined seperately depending on the type of list). Data can be either text or images.
- type=disc|circle|square - optional. Allows you to change the symbol used in a bulleted list. All list items after and including the current one will use this symbol rather than the one originally specified.
- type=1|A|a|I|i - optional. Allows you to change the character set used to order the list. All list items after and including the current one will use this character set rather than the one originally specified.
- value=number - optional. Allows you to change the count in an ordered list, for that item and all subsequent ones.
<dl> <dt>term item <dd>definition item </dl> - produces a definition list. Term items generally alternate with definition items.
<dt>text - specifies that the text from the <dt> until the next <dt>, <dd> or </dl> is a term item (a term to be defined). The text is left-justified.
<dd>text - specifies that the text from the <dt> until the next <dt>, <dd> or </dl> is a definition item (the definition of the preceding term item presumably). The text is indented.
The thing that makes a Web page a hypertext is its ability to link text to other Web pages, other text within the same text, other Internet resources, or images. Anchors are the HTML elements that make this possible. An anchor can either be a link to another place, or a target for other anchors.
<a> data </a> - Specifies that data is an anchor.
- href="URL" - either this attribute or the name is required. Data will be highlited in the manner specified by your Web browser (the default in Netscape is to underline it and color it blue if it is text or to put a blue outline around it if it is an image). Clicking on item will take you to the resource specified by URL (Web page, FTP site, an anchor within the same page, etc.).
- name="anchor name" - either this attribute or the href is required. Specifies that data is a named anchor/target, with the name anchor name. Items within the same Web page as the anchor can be linked to it with <a href="#anchor name">, while items in other Web pages can be linked to it with <a href="URL#anchor name">.
An in-line image is one that shows up directly on the Web page.
<img> - places an in-line image in the Web page at the position of the <img> tag.
- src = "URL" - required. Specifies the image file to be used (either a GIF or JPEG).
- align = top|middle|bottom - optional. Specifies where the first line of text following the image should be placed -- to the right of the image, at the top, middle or bottom of the image. See below for Netscape's additions to this attribute. The default is middle.
- align = left|right - optional. Creates a floating image. Setting align=left or align=right causes the image to float down to the margin specified (left or right). All text following the image tag will wrapped around the image (to the right if the image is aligned left or to the left if the image is aligned right), until/unless a br clear=left|right|all is encountered.
- align = texttop|absmiddle|baseline|absbottom - optional. These are variations on the normal top|middle|bottom alignments. texttop aligns the top of the tallest piece of text in the line to the top of the image. absmiddle aligns the middle of the text with the middle of the image (middle aligns the baseline of the text with the middle of the image). baseline is the same as bottom. absbottom aligns the bottom of the text with the bottom of the image (rather than aligning the baseline of the text with the bottom of the image, as bottom and baseline do).
- width = number - optional. Specifies the width of the image as number pixels. Using this and height together speeds the display of the Web page.
- height = number - optional. Specifies the height of the image as number pixels. Using this and width together speeds the display of the Web page.
- vspace = number - optional. Useful with floating images. Allows you to specify (as number pixels) the amount of space you want left above and below an image.
- hspace = number - optional. Useful with floating images. Allows you to specify (as number pixels) the amount of space you want left to the left and right of an image.
Netscape (and the upcoming HTML 3.0 specification) allow you to create tables on a Web page. Tables can be used to attractively format information into rows and columns (see our class syllabus for an example).
<table> </table> - mark the beginning and end of a table.
- border - optional. specifies that the table should have a border around cells. If this attribute is not present, the table will not have visible borders around cells, but there will be the same amount of space between cells as there would be if there were borders.
- border = number - optional. Specifies that the table should have a border around cells of relative width number. Specifying border=0 is different from not having a border tag at all. With border = 0, there is no space between cells reserved for a border, resulting in a more compact table.
- cellpadding = number - optional. Specifies the amount of space that should be left between the contents of a cell and the borders of that cell. The default is 1.
- cellspacing = number - optional. Specifies the amount of space that should be left between cells. The default is 2.
- width = number|percentage - optional. Specifies a width for the table, either as number pixels, or as percentage of the Netscape window. When a width is specified in pixels and it's contents won't fit, Netscape comes as close as it can. If you don't specify the width, Netscape calculates one based on the size of the contents of the cells comprising the table.
<tr> </tr> - mark the beginning and end of a row within a table. The width of a row in columns is determined by the largest number of cells in the widest row of the table.
- align = left|center|right - optional. Specifies that data in the cells within the row should be aligned to the left, center, or right of the cell. The default is left.
- valign = top|middle|bottom|baseline - optional. Specifies that data in the cells within the row should be aligned at the top, middle, bottom or baseline of the row. The default is middle.
<td> data </td> - Specifies that data is the contents of a cell within the table. Data can be either text or an image/s.
- align = left|center|right - optional. Specifies that the data in the cell should be aligned to the left, center, or right of the cell. The default is left. The align attribute in a particular cell overrides the align attribute of the row.
- valign = top|middle|bottom|baseline - optional. Specifies that data in the cell should be aligned at the top, middle, bottom or baseline of the row. The default is middle. The valign attribute in a particular cell overrides the valign attribute of the row.
- nowrap - optional. Specifies that text within this cell may not be broken to fit the width of the cell.
- colspan = number - optional. Specifies that the cell should stretch across number columns.
- rowspan = number - optional. Specifies that the cell should stretch across number columns.
<th> data </th> - Specifies that the cell with data in it is a header cell. Any text in the cell will be in a bold font and the default align is center, rather than left. Data can be either text or an image/s.
<caption> data </caption> - Specifies the caption for the table. Data will be centered horizontally with respect to the table and can appear either above or below the table. The <caption> tags should be within <table> tags, but not within <tr>, <td>, or <th> tags.
- align = top|bottom - optional. Specifies whether the caption should appear above (top), or below (bottom) of the table. The default is top.
Below is an alphabetical listing of HTML tags, with links to the definitions above:
Maintained by C. Robert Stevens (crstevens@mail.utexas.edu)
Last changed 10/31/95
