Visit Our Sponsor

HTML Tags
 
Here are all the tags known to man (well, almost). They are listed according to use. If you're looking for text formatters, choose those. Frames, forms, and tables have their own settings. Have fun!

[ The Basics | Text Control | Lists | Page Breaks | Applets and More ]
[ Frames, Tables and Forms | Images and Links ]
[ Special Tags ]

Basics
The basics cover the tags you need in order for the page "to exist". This doesn't include what goes in the page. Only what you need in order for the browser to recognize that it truly is a web page.

<html> </html>

The basic tag for every page. This tells the browser that the file being loaded is a HTML document. Please look at this basic layout of any web page to see how it's used.
<head> </head>
Head - defines the head of your page. Includes the <title> </title> tag.
<body> </body>
Allows you to define the body arguments. This can include:
  • background="file.gif"
  • bgcolor="#rgbcode"
  • text="#rgbcode"
  • link="#rgbcode"
  • vlink="#rgbcode"
  • topmargin=n - defines the top of the margin for the body.
  • leftmargin=n
  • rightmargin=n

    For help with colors, try this powerful Color Program.

    <title> </title>
    Title - allows you to display a title at the top of the browser.
    <;meta>
    Meta Tags - allows the owner to display certain information to the browser without the page seeing it. Here are some examples:
    <;meta name="description" content="This is my page description.">- describe your page
    <;meta name="keywords" content="word1, word2, word3, word4"> - enter keywords for your page
    <;meta HTTP-EQUIV="refresh" content="10; url=index2.html"> - reloads the page after 10 seconds to index2.html
    <;meta HTTP-EQUIV="text" content="This is my page description."> - another text tag
    <;meta HTTP-EQUIV="pragma" content="no-cache"> - forces the browser not to cache the page. Thus all hits are true.
    <;meta HTTP-EQUIV="expires" content="Mon, Feb 1997 12:12:12 EST"> - used along with the previos tag to show the expiration of the pages cache.

    Text Control and Tags
    <h1> </h1>
    Header - this allows you to change the size of the letter or words it's surrounding. Covers H1 - H6, H1 being the biggest and H6 being the smallest.
    <center> </center>
    Center - allows you to display the text in the center of the page.
    <ins> </ins>
    Inserted Text - allows you to insert text.
    <person> </person>
    Person's Name - allows you to distinguish someone's name, like Shpank.
    <q> </q>
    Quotation - set certain test as a quote. Like this.
    <big> </big>
    Big - makes the test bigger than the rest.
    <small> </small>
    Small - makes the text smaller than the rest.
    <sub> </sub>
    Subscript - allows you to make the text look like this.
    <sup> </sup>
    Superscript - gives superscript effect to your text.
    <abbrev> </abbrev>
    Abbreviation - abbreviate certain text.
    <acronym> </acronym>
    Acronym - well, I don't know, let's try it out.
    <au> </au>
    Author's Name - insert the author's name into the page, like Shpank.
    <del> </del>
    Deleted Text
    <font> </font>
    Font - allows you to control different aspects of the text. Includes:
    size=n (+1 - +5) (-1 - -5)
    color=#rgbcode - defines the color
    face="name" - defines the font face. Could be Helvetica, Arial, etc.
    <b> </b>
    Bold - makes a word or group of words bold. <b>bold</b>.
    <strong> </strong>
    Strong - basically the same as bold, just longer code. <strong>bold</strong>
    <i> </i>
    Italics - italicizes a word or group of words.
    <em> </em>
    Emphasis - basically the same as italics.
    <u> </u>
    Underline - underlines a word or group of words. But does not work with all browsers.
    <tt> </tt>
    Typewriter Type - makes a fixed width font.
    <address> </address>
    Address - another
    italics tag
    . There are alot of them.
    <blockquote> </blockquote>
    Block Quote - indents the left and right-hand sides of the text.
    <cite> </cite>
    Cite - another italics tag.
    <code> </code>
    Code - another kewl fixed width font tag.
    <dfn> </dfn>
    Definition - allows to embolden or italicize a word or group of words.
    <kbd> </kbd>
    Keyboard - another fixed width font.
    <samp> </samp>
    Sample - can you believe it? Another fixed width tag.
    <var> </var>
    Italics - yet another way to italicize a word or group of words.
    <pre> </pre>
    Preformatted - allows the text to appear in the browser as it does on the page. Look below for an example.
    <listing> </listing>
    Listing - a small fixed-width font tag - kind of like <pre> </pre> that spaces everything out.

    Lists
    <dl> </dl>
    Descriptive List - another way to list things. This is what I use on a majority of my pages.
    <dt> </dt>
    Defines the topic of the descriptive list.
    <dd> </dd>
    The Descriptive Description. This the indented part that is displayed.
    <ol> </ol>
    Ordered List - a way to group items into a list.
    <li></li>
    Line item tag defines the list items with a number or a dot. Includes the following:
  • start=n
  • type="A/a/I/i" for upper or lower case and Roman numerals.
    <ul> </ul>
    Unordered List - another way to list items. Also uses the <li></li> tags to define the list items with a bullet instead of a number number. Includes the following options:
  • type="DISC/CIRCLE/SQUARE"

    Page Breaks and Lines
    <hr>
    Horizontal Rule - allows you to divide a page with a line. Includes the following options:
  • width=pixels/percentage
  • align=left/right/center
  • size=n noshade - takes away the shading inside.
    <br>
    Break - allows the text to break without a full paragraph. The options are:
  • clear=left/right/all
    <nobr> </nobr>
    No Breaks - allows the test to continue without breaking.

    Frames, Tables, and Forms
    <table> </table>
    Tables - these tags allow you to insert tables into your page like all of mine. It has the following options:
  • width=n
  • height=n
  • border=n
  • cellpadding=n
  • cellspacing=n

    It also includes the following tags with their associated options:

  • <tr></tr>
  • <td></td>
  • <th> </th>

  • align=left/middle/right
  • valign=top/middle/bottom
  • color=#rgbcode
  • colspan=n
  • rowspan=n

    For more info, please see my tables tutorial.

    <frameset> </frameset>
    Frameset - allows you to setup frames on your page. Includes the following:
  • rows="pixels/percentage"
  • cols="pixels/percentage"
  • frameborder=n
  • framewidth=n
  • marginheight=n
  • marginwidth=n

    Also includes the frame tag to establish content. These include:

  • marginheight=n
  • marginwidth=n
  • name="name"
  • noresize
  • src="file.html/file.gif/file.jpg"
  • scrolling="yes/no/auto"

    Don't forget the <noframes> tag for those browsers who can't handle frames or they won't get bunk.

    <frame>
    Frame - includes the frame tag to establish content. These include:
  • marginheight=n
  • marginwidth=n
  • name="name"
  • noresize
  • src="file.html/file.gif/file.jpg"
  • scrolling="yes/no/auto"

    For more information about frames, please visit my frames tutorial.

    <form> </form>
    Form - this allows you to insert forms onto your page. It includes the following options:
  • method=POST/GET
  • action="file/script

    Also, you can use the following to add checkbox's, text box's, and more. They include:

  • <input type="text/hidden/checkbox/radio/submit/reset size="n" maxlength="n" name="name" value="file/URL">
  • <select name="name" size="n">
  • <option value="value1">Value1</option>
  • <textarea name="name" rows="n" cols="n" value="file/URL" wrap="virtual"> </textarea>

    For more information, please check out my forms tutorial.

    <multicol> </multicol>
    Multicolumns - allows almost the same effect as tables. It has the foowling options:
  • cols="n"
  • gutter="n"
  • width="pixels/percentage"

    Images and Links
    <a href="file"> </a>
    Hypertext Anchor - this allows you to make certain text or picture a link to another page or graphic not on the page. It can include the following options:
  • target="frame name"
    <img>
    Image - this allows you to insert a .jpg or .gif image into your web page. It has the following options:
  • src="file.gif"/src="file.jpg"
  • height=n
  • width=n
  • lowsrc="file.gif"/lowsrc="file.jpg"
  • alt="text"
  • usemap="#mapname"
  • ismap
  • align="left/right/middle/bottom/top/absmiddle/textop/absbottom"
  • border=n
    <map> </map>
    Image Map - used to define the areas and coordinates of an image map. If you would like more information on image maps, check out my tutorial. It will hopefully answer any of your questions.

    Applets, JavaScript, and Other Tags
    <applet> </applet>
    Java Applet - allows you to insert a Java applet directly into your page. It includes:
  • code="java.class"
  • codebase="/dir/to/applet"
  • height="n"
  • width="n"
    <script> </script>
    Javascript - allows a JavaScript applet to load within the page. This tag usually appears after the </title> and before the </head> tag. It usually looks like this:
    <title>Title</title>
    <script language="JavaScript">
    Script goes here.
    </script>
    </head>
    <!-- text -->
    Allows text to appear invisible on the page. This is used if you would like to save comments on the page, but not have them load on the page. Like:
    <!-- This section is for beginners -->
    <!--# -->
    This tag is used with SSI scripts. Instead of loading the text, it performs an action. For more information on Server Side Includes, click here.
    <marquee> </marquee>
    Marquee - an IE only tag, so only IE users will see it. It allows scrolling text in the browser. Includes:
  • behavior=slide/alternative
  • width=pixels/percentage
  • hspace=n
  • vspave=n
  • loop=n/-1/infinite
  • bgcolor=#rgbcode
  • scrollamount=n
  • scrolldelay=n

    • I know I've left some tags out. But I'm in the process of adding them. This should put you on the right path either way. And if you know of something I have wrong here, or if I've forgotten something, please tell me. I'm always open for suggestions.

    Return Home