A Glossary of HTML Tags

Table of Contents

  1. Definitions
  2. The Basic Tags
  3. Document Formatting Tags
  4. Text Formatting Tags
  5. Graphics Formatting Tags
  6. Linking Tags
  7. Lists
  8. Tables
    1. Table of Hexidecimal Color Codes
  9. Frames

  1. Definitions

    HTML
    (Hyper Text Mark-up Language) While it is not an official computer language such as C++ or pascal, HTML is the way in which computers communicate across the world wide web. It consists of many tags that allow writers to mark-up text documents so that they can be viewed by others using web browsers.

    Web Browsers
    Web browsers are the applications that allow one to view HTML documents from either your own computer or from anyother computer connected to the internet.

    Tags
    Tags are the commands that give HTML documents their functionality. They consist of commands placed within < and >. Some tags work by placing a start and stop tag at each end of the desired text, such as below;

    <big>This makes the text bigger.</big>

    The stop tags are often the same as the start with the addition of "/" at the beginning of the stop tag. Using both of these tags places the desired text in a container. But not all tags need to use a container, and thus don't need a stop tag. In the glossary below you will find a "</>" next to the tags that require a stop tag.

    Containers
    Containers refer to the area enclosed by <start> and </stop> tags where the commands take effect. Some tags, such as <HTML> enclose the entire document, others enclose lists, and others can enclose a single world. One of the more common problems in writing HTML is when one forgets to add a stop tag and clse of the container, thus leaving the tag to effect the rest of the document. So try and keep track of each container that you create.

    Pixels
    Pixels are a method of measurement used in the computer world. Your computer screen's resolution is measured in pixels, 832*624, 640*480, etc. They are the number of dots, or pixels, that computer displays horizontally and vertically. This allows for a standard to be set, so that a 100*50 picture always comes up as the same relative size, but could vary in absolute size depending on the resolution of your monitor.

    Relative and Absolute Links
    Relative and absolute links are styles of links that one finds connecting a web page to other pages, files, etc. Relative links look like this /htmlprimer.html. They consist of telling the link where to find what it is looking for, but leave out the server that the page is attached to because the original page and the one being sought after are in the same directory(folder or server). The same link in absolute link format would look like this http:/serendip.brynmawr.edu/htmlprimer.html. It includes the complete web address of the sought after page. They accommplish the same goal, but each has it's advantages and disadvantages. If you move a folder with web pages with relative links to a new server, then nothing will happen and all the links will remain stable. But if you were to only move one of those pages, then it's links would be broken because the other pages would be in a differnt directory(folder or server). Absolute links have the opposite effect, if you move one file then it's links will be fine.

    Top of the Page

  2. The Basic Tags

    <html></>---begins and ends web document,tells the browser that the document is in HTML
    <head></>---header, used after html tag
    <title></>---located within header container
    <body></>---creates the body of the document
    body attributes---to be used within <body> tag
    background="sample.jpg"---background picture
    bgcolor=    "color"---background color
    text="color"---text color
    alink="color"---active link color
    vlink="color"---visited link
    bgproperties---when equal to "fixed", bacground does not scroll
    topmargin---sets height of top margin
    leftmargin---sets width of left margin(not used in netscape)

    <address></>---place your name and date of page creation within at bottom of page

    Top of the Page

  3. Document Formatting Tags

    <p>---place at the end of a paragraph, it will then skip a line for the next paragraph
    <align=left,right,center></>---alignment
    <br>---line break, it will begin again on the next line
    <nobr></>---no line breaks are allowed to occur within the container(be careful)
    <wbr>---gives the browser suggestions for where a break should occur if needed, use within the <nobr> tag
    <h1></>---heading style, choose from sizes 1(largest)-6(smallest)
    <hr>---horizontal line
    horizontal line attributes--- to be used within the <hr> tag
    align=left, right, center---alignment
    width=---in percentages or pixels
    size=---thickness, in pixels
    noshade---keeps browser from using 3D effects on line
    color="color"---line color
    <pre></>---for preformatted text, comes up as monospaced
    & lt;, & gt;---(without the spaces)represent < and > without the functionality, so you can display them without being interpreted as commands

    Top of the Page

  4. Text Formatting Tags

    <i></>---italics
    <b></>---bold
    <u></>---underline
    <tt></>---teletype, monospaced text
    <blockquote></>---formatted for quoted text
    <strike></>---strikethrough style
    <big></>---bigger text
    <small></>---smaller text
    <sub></>---subscript
    <sup></>---superscript
    <font face="font name"></font>---to select specific font
    <font size=1></font>---font size, sizes 1-7
    <font color="color"></font>---font color
    <base font>---the font for the document, can use face,size and color with it

    Top of the Page

  5. Graphics Formatting Tags

    <img src="filename">---Places an image within your document, review relative vs. absolute links.
    image attributes
    align=top,middle,bottom---align text with picture's top, middle, or bottom
    align=left,right---place picture on left or right and wrap text around it
    width,height=---in pixels or percentage, dimensions of picture can be altered(be careful with the ratio if using pixels)
    alt=---description of the picture so that text-only browsers know what it is
    border=---in pixels, border around the picture
    vspace,hspace=---in pixels, empty space around picture

  6. Linking Tags

    <a href="http://serendip.brynmawr.com/text.html">text link</a>---text link, absolute link
    <a href="text.html">text link</a>---text link, relative link
    <base href="http://serendip.brynmawr.com">---gives web site for all relative links
    <a href="http://serendip.brynmawr.com"><img src="sample.jpg"></a>---graphic link
    <a name=middle>middle section of web page</a>---internal anchor
    <a href="#middle">jump tp the middle</a>---link to the internal anchor
    <a href="mailto:me@serendip.brynmawr.edu"></a>---link to email
    <a href="news:news.newuser.questions"></a>---link to usenet group
    <a href="ftp://ftp.mysite.com/pub/FAQ"></a>---link to ftp
    <a href="gopher://gopher.mysite.com"></a>---link to gopher site

    Top of the Page

  7. Creating Lists

    <ol></>---ordered lists
    Ordered List Attributes
    compact---makes list more compact
    type=A---uses uppercase letters
    type=a---uses lowercase letters
    type=I---uppercase roman numerals
    type=i---lowercase roman numerals
    type=1---uses numbers
    start=n---uses n as beginning of that set

    <li></>---list item
    <lh></>---list header
    <ul></>---unordered list
    Unordered List Attributes
    type=square---closed square bullet
    type=circle---open circle bullet
    type=disc---closed circle bullet
    ---to replace the bullets with an image us <img src...> instead of <li>
    <menu>---basically works the same as unordered list
    <dl>---definition list
    <dt>---definition term
    <dd>---definition itself

    Top of the Page

  8. Tables

    <table></>---table tag
    Table attributes---all of which can refer to the whole table or single cell(by using <th>, <td>, <tr>)
    border=---in pixels
    align=left, right, center---alignment of data within the cells
    valign=top, middle, bottom---vertical alignment of data within the cells
    width/height=---in pixels, of table or individual cells
    cellpadding/cellspacing=---in pixels, adds space within cell/border
    bordercolor/bgcolor=    "color"---will change table, row, or cell border/background color, us with td,th, and tr tags
    rowspan/colspan---allows one cell to occupy more than one "cellblock"
    <th></>---table header within the cells-can use valign=top/middle/bottom and align=left/right/center
    <td></>---table data within the cells-can use valign=top/middle/bottom and align=left/right/center
    <tr></>---table row
    <caption></>---places a caption, either babove or below table<align=top/bottom>
    ---keep in mind that you can place a picture in a table by using <img src...> between <td>...</td>

    Top of the Page

    Hexadecimal Color System
    Black#000000Maroon#800000Green#008000Olive#808000
    Navy#000080Purple#800080Teal#008080Gray#808080
    Silver#C0C0C0Red#FF0000Lime#00FF00Yellow#FFFF00
    Blue#0000FFFuchsia#FF00FFAqua#00FFFFWhite#FFFFFF

    Top of the Page

  9. Frames

    <frameset></>---to designate use of frames, but will be ignored if <body> tag is present
    Frameset Attributes---found within the <frameset> tag
    rows/cols=---in pixels/percentages/proportions, pixels set an absolute distance while the other two give relative distances
    ---proportions are designated by *,2*,*;which is 1/4,1/2,1/4
    border=---in pixels, assigns a width to all frames
    frameborder=yes,no---default is yes for a 3-D look, no turns off the effect
    bordercolor="color"---defines color for all frame borders
    <frame>---defines each individual frame, and there must be one per created frame
    Frame Attributes---found within the <frame> tag
    src=---must use URL of either a HTML document or picture, text alone can not be used
    name=---assigned to each frame so that they can be linked to from other frames
    target=---it designates which frame a new link will be opened up within when used in the <a href> tag
    ---for example, <a href="list.html" target="one"> will open list.html in frame one
    ---can also be used to name windows
    ="_blank"---will launch a new browser window with the link's contents
    ="_self"---will replace the frame with the link's contents
    ="_parent"---the frameset will be replaced by link's contents
    ="_top"---replaces current browser window with link's contents
    scrolling=yes,no,auto---auto is the default, but the scrollbars can be turned on or off when possible
    marginwidth/height=---in pixels, area within border where source content will not be shown
    noresize---prevents users from resizing individual and adjacent frames, in order to preserve layout
    bordercolor="color"---defines color for individual frame border
    <noframes></>---use this tag to provide alternate content for those with non-frames compatible browsers
    ---can safely use the <body> tag with it's attributes within this container
    note---one can place frames(<frameset>) within frames(<frameset>) to create more complex layouts
    Top of the Page

    || Home Page | HTML Glossary ||

    This page was last updated on Febuary 5th, 1999
    and is maintained byZach Hettinger.