www.dtp-aus.com Minibanner Ad

< back
back to the many other free HTML tutorials

Learning and looking inside HTML Tags

Learning to look inside HTML tags
Most of the major tags in the HTML 3.2 specification are here, as well as a few Netscape extensions included in Netscape Navigator up to versions 3.0+.
Maverick tags (extensions) exclusive to Netscape or I.Explorer are maked in red.
HTML 4 (not yet ratified) and Browser versions 4 are not covered, as only a portion of the worlds web surfers can take advantage of them; something all designers should keep in mind.
  • Tag attributes are listed separatly allowing clear tutorial descriptions. However, multiple attributes should be included in the one tag where possible.
  • Although the tags are shown in upper case, you can use upper and lower case in your HTML code, But it is best that one OR the other is used to make your code easier to read.
    Note: Many servers are case sensitive or do not accept special characters and spaces in URLs and Paths.

Comments or suggestions are welcome; and you can contact me via e-mail at webmaster@dtp-aus.com.

*** All you need is a basic Text Editor, the tags, and save your file with the .htm or .html extension - plus save each file as a Text only file. Simple realy!!! ( cough )

READ this before studying the tags below.

It's all well and good to study these tags, one by one. But how do they fit together as structured HTML source code. a picture. Tutorial on Tags, html tags, learn web page design, learn html tags, for Internet, Desktop Publishing and HTML.

Well maybe
these few lines
will help you

Nesting, the way tag pairs enclose other tags (ie <tag1> ... <tag2> ... </tag2> ... </tag1>), is one of the most troublesome concepts for learners of the HTML Language to grasp.

As for what you just read, here it is, from the first horizontal line to the second:

<hr width="60%">
<p align="center">It's <a name="sample-bookmark">all</a> <em>well and good</em> to study <u>these tags</u>, one by one. <font face="arial,helvetica,geneva" size="2">But
<strong><big>how do</big></strong> they fit together </font>as structured
HTML source code.
<a href="#sample-bookmark"><img src="images/num1.gif" alt="a picture"
align="middle" border="0" width="12" height="12"
  <dt>Well maybe</dt>
    <dd>these few lines</dd>
    <dd>will help you</dd>
<p><strong>Nesting</strong>, the way <font color="#008000">tag pairs enclose other tags </font> (ie &lt;tag1&gt; ... &lt;tag2&gt; ... &lt;/tag2&gt; ... &lt;/tag1&gt;), is one of the most troublesome concepts for learners of the HTML Language to grasp
<hr width="60%">



Bookmarks | Hyperlinks | Lines | Headings | Image Maps
Tables, Forms, Frames and Image Maps have separate free tutorials
To learn more, go to the HTML Code Room via the Back Button at the top of the page.

Menus | Symbols

GENERAL (all HTML documents should include the first four tags listed)
<HTML> </HTML> (yes, this page is displayable code)
menu Document Type. Do not load the page as an image file or plain text only file but load and parse all the text looking for tag information to layout the page objects.
<HEAD> </HEAD> (layout preparation and server info)
menu Very important tag that directs the browser to look for and respond to other special tags contained within this tag pair. Most common information tags placed within this tag pair are the TITLE, and multiple META tags (to be covered separately, or About Tags)
<TITLE> </TITLE> (very important tag)
This tag should be nested within the HEAD tag.
1. It contains the text that will appear in the top bar of the Browsers,
2. is used by some search engines for indexing and,
3. contains the primary information displayed with a search engines description of the page, if successfully listed following a search.
<BODY> ... </BODY> (all of the viewable-page code goes here)
menu Every thing that is to be displayed in the browser window is contained within this tag pair. The tag attributes also set the defaults for the page. (detailed next section)
<body bgcolor="#FFFFFF" background="animage.???" text="#000000" link="#3333CC" vlink="#9933CC" alink="#CC0000"> ... </body>

The basic page code. Start each new page with this template.

<title> ... </title>
<body bgcolor="#" background="" text="#" link="#" vlink="#" alink="#">
     all of the visible page stuff goes here

If you haven't tried it before, copy this text (<html> to </html>), paste it into a text editor window and save as a Text Only file with the .html extension using any name. Then open your new file in a Browser.

<BASE HREF="url"> Place within the <head> </head> element.
menu Base identifies the correct (base) location of your document. This can be useful if you allow people to copy your page from its original location, enabling browsers to determine any partial URL's that might be specified (for example, in <a href> elements, or paths pointing to <img src=> objects (a server will normally look for file paths on its self unless otherwise redirected. Web servers do not use drive names).
<!--****--> (COMMENT)
menu The Comment Tag (Note the exclamation mark). Text and other objects enclosed by this tag will not be visible on the page. This is not a tag pair, but one complete tag. Just the contents between <!-- and --> are hidden, and the start <!-- and closing --> do not have to be on one line. If keeping the code for a page object, but hiding it, make sure all relevant object tags etc are enclosed within the comment.

<!-- This is the start of the first table -->. This is a simple comment.

<!-- <a href="wallyworld.html">Wally World</a> -->. This is a page object hidden from view without destroying the code. Simply removing the comment tag will reactivate it.

<!-- hide this stuff for a while

   <img src="images/widget.jpg" width="80" height="23" alt="A Widget">

-->. This comment also hides an object although the left and right tag arrows are on different lines.

Menus | Symbols

<BODY BGCOLOR="#rrggbb"> </BODY>
menu Sets the default page background colour usually described in Hexadecimal.
<BODY BACKGROUND="url" (path to an image)> </BODY>
menu If a page background image is to be used this attribute includes the path and file name of the image file. The image is tiled automaticly to fill the browser windows background even when it is resized.
<BODY TEXT="#rrggbb"> </BODY> (default body text colour)
menu Sets the default body text colour for all visible text (can be over ridden by the font color= tag and attributes).
<BODY LINK="#rrggbb"> </BODY> (hyperlink text colour)
menu Sets the default colour highlighting any hyperlinked text appearing on the page. This will over ride any other text colour attributes.
<BODY VLINK="#rrggbb"> </BODY> (been there, done that!)
menu Sets the default colour highlighting any visited hyperlinks displayed on the page. Only shows if the browsers history list has a matching URL. History lists have a limited life.
<BODY ALINK="#rrggbb"> </BODY> (just clicked on it!)
menu Sets the colour of hyperlinked text as it is clicked on. Only shows very briefly.
I.E. <BODY BGSOUND="****"> *Note the alternatives
menu Background Sounds. This is an Internet Explorer extension. It works very well with .mdi files, is easy to implement and does not require plugins etc in the viewers Browser, but unfortunately Netscape will not recognise this tag attribute.

With the many plugins and extensions around, people are often complaining about the difficulty in implementing interoperability for their background sounds. Some sites have simply placed the three basic pieces of code hoping that one or the other will load correctly. They are as follows.

<sound src="lotofnoise.mid"> early mosaic method

<body bgsound="lotofnoise.mid"> Internet Explorer

<embed src="lotofnoise.mid" hidden="true"> Netscape

Menus | Symbols

<H?> </H?> (defines 6 preset font sizes, H1 to H6. Auto forced to bold)
menu Text included between this tag pair is forced to display as bold text in one of the following text sizes. Only other tags having a direct affect on Header text is the FONT color= tag and attribute, the <BR> line break tag  plus <em> <u> etc.

<h1>Size H1</h1>

<h2>Size H2</h2>

<h3>Size H3</h3>

<h4>Size H4</h4>

<h5>Size H5</h5>
<h6>Size H6</h6>
<H? ALIGN=left|center|right> </H?>
menu Sets the alignment of the header object within the page or container (i.e. a table cell). The default without an align attribute is left aligned.

Size H2

Size H2

Size H2

menu Indents all objects within this tag pair and can be applied more than once as long as it is nested properly.

Both of these lines are indented.

The text is indented both left and right, and a line of text long enough will close-wrap.

?? <DIV> </DIV> *works differently between browsers.
menu The DIV element, according to the HTML 3.2 specs, should be used with Style Sheet attributes to name a section of text as being of a certain style (per Internet Explorer). Netscape has implemented the element to work like the <p align= > methods.

Will create a line space between objects in Explorer 3+, whereas Netscape does not.

<DIV ALIGN=left|right|center|justify> </DIV>
menu *Aligns the enclosed objects similarly to the <p align=??> attribute.
<DFN> </DFN>
menu This text is marked with the DFN tag and probably appears in italics.
<EM> </EM>
menu This is emphasized text and displays italisized in most browsers.
  <I> </I>
menu This text has been marked with the I (i) tag which is equivalant to EM.
menu Text displayed with the STRONG tag appears as bold text in most browsers.
<B> </B>
menu This text has been marked with the B tag which is equivalant to STRONG.
<BIG> </BIG>
menu Every BIG tag placed around any text will enlarge the text by one value for each BIG tag used. In other words you can use multiple tags to raise the size one step for each.
menu Every SMALL tag placed around any text will reduce the text by one value for each SMALL tag used. In other words you can use multiple tags to reduce the size one step for each.
<U> </U>
menu This text has been marked with the U tag and should appear underlined.
menu This text has been marked with the STRIKE tag and should appear with a strike- through line.
<S> </S>
menu This text has been marked with the S tag and should appear with a strike-through line the same as the original STRIKE tag.
<SUB> </SUB>
menu This text has been marked with the SUB tag and should appear as subscript
<SUP> </SUP>
menu This text has been marked with the SUP tag and should appear as superscript

The Internet has been around for many years as a text-only communication system, used mostly by boffins and professors etc.. Some of the early tag names simply defined text that was used for an address, a citation or code and so on, thus allowing users to define the significance of various blocks of text. Most of these special definitions are listed and yet appear to do very simple things like <em> italicise text etc.. Their special significance has just about been lost on todays colourfull commercial web pages. Avoid using them as some will be phased out.

The Author's Address was often marked with the ADDRESS tag

and probably appears as italicised text, with space between it and other text.

menu This is text marked with the CITE (citation) tag and probably appears italicised.
menu This is text marked with the CODE tag and probably appears in a monospaced font i.e. courier.
<KBD> </KBD>
menu This is text marked with the KBD (keyboard prompt) tag and probably appears in a monospaced font.
menu This is text marked with the LISTING tag and probably appears in a monospaced font, plus it is forced to a small font size on a separate line(s).
menu This is text marked with the SAMP (sample) tag and probably appears in a monospaced font.
<TT> </TT>
menu This text has been marked with the TT (typewriter) tag and should appear as monospaced text
<XMP> </XMP>
menu This text has been marked with the XMP (example) tag and should appear as monospaced text, with space between it and other text.

Menus | Symbols

<PRE> </PRE>
menu The pre tag will display all text between the tags exactly as typed and will include spaces. Browsers normaly ignore multiple spaces and display them as one, but this tag negates that inbuilt system. (The one space only system allows us to write our code in multiple lines. ie a paragraph of 100 words does not have to be written on one line, and long tags can be broken into multiple lines at any space between attributes)
This 'foo' is used often to display the monospaced spacing with the PRE tag.
         (@ @)
      Buttons : $1.50
       Towels : $13.56
 Baggy Shorts : $24.95

The text will appear in a monospaced font style i.e. courier


This line of text has been nested within the CENTER tag pair, and if the line is long enough it will close-wrap and show the results. Use for any page object.

N1.0 <BLINK> </BLINK> (use cautiously*)
menu Blinking text is one of the most unpopular tags, as many people are distracted by animations etc. *A Netscape extension and only works in a few browsers
<FONT SIZE="?"> </FONT> (ranges from 1-7)
menu Force the Font to a specific size
<FONT SIZE="+|-?"> </FONT>
menu Force a change in Font size
<FONT COLOR="#rrggbb"> </FONT>
menu Force the Font to a specific colour. Overrides the <body text=???> tag attribute.

Alternative font attributes can be nested within other 'Font' tags: ie::
<font face="arial,helvetica,geneva" size="2">....<font color="#000080">....</font>....</font>
Example:: Default text colour, now changed, now back to default colour.

<FONT FACE="***"> </FONT>
menu Select a different Font face. Overrides the Browser default. Use with care because few computers will have exactly the same fonts as yours. Multiple names allowed with commas between.
ie face="arial,helvetica,geneva"
I.E. <MARQUEE> </MARQUEE> (use cautiously*)
menu Marquee. *only works in a few browsers.

A few most recent Browsers can handle:   border="?", align="?", behavior="?", scrollamount="?", scrolldelay="?" attributes.

<MARQUEE  WIDTH=??%|??(pixels)>
menu width= *width of Marquee in Page/Table cell.
menu bgcolor= *colours the marquee background.
N3.0 <SPACER> (*Netscape only, use cautiously)
menu Spacer object (invisible). Can be used to put space between objects. However, because it is a *maverick Netscape Extension (not in ratified W3C HTML specs) most designers use "&nbsp;" or "&nbsp;<br>" for forcing space instead. Small transparent GIFs can be used also. I have only included this tag for general knowledge. Designers using <spacer> plus the attributes do not realise how different, and usually messy, their pages look viewed with browsers that do not recognise this tag.

*If you cannot see an area of white space indenting the first few lines of the text above, then your Browser does not recognise this extension.

Menus | Symbols

<P> </P> (Paragraph. Closing tag often unnecessary)
menu Forces a line space above and below text/objects nested within the tag pair. The default alignment is 'Left". Paragraph text will be auto wrapped (close lines) if the text cannot fit in the Browser window.
<P ALIGN=left|center|right> </P>
menu Horizontal justification alignment of above.
<BR> (a single carriage return)
menu Forces a Line Break at
a predermined position and close wraps. Use with most objects.
<BR CLEAR=left|right|all>
menu Clear Textwrap. example: An image aligned left or right can have text wrapped around (next to) it. Using this BR attribute at the end of a paragraph forces other text/objects away from the image, even if widening the Browser window would normaly also bring other text/objects up and next to that image.
menu Horizontal Rule. A simple 3D line across the page or table cell.
<HR ALIGN=left|right|center>
menu An HR ruled line that is shorter than its container can be forced to a horizontal position according to the attribute.
<HR SIZE=?> (in pixels)
menu Thickness. By default, an HR line is 2 pixels high. Use this attribute for an alternative. ie:
<HR WIDTH=?> (in pixels)
menu Force the width of an HR line to a specific size in its container. ie 50 pixels.
<HR WIDTH="%"> (as a percentage of page width)
menu Force the width of an HR line to a specific size in its container. ie 50%.
<HR NOSHADE> (without the 3D cutout look)
menu Remove the 3D appearence of an HR line. ie:
<NOBR> </NOBR> (prevents line breaks)
menu No Break. Can be a dangerous tag; if a page is designed on a high resolution monitor and the NOBR tag is applied to a paragraph of text, then viewers that use low resolution monitors will need to scroll right and left to see all the page. This tag is identical to the NOWRAP attribute used in Tables.

(The special ISO character definition - &nbsp; - can be used as a Non-Breaking clear space. This code entered between words or objects in a paragraph will not allow wrapping at that point, while still allowing the browser to wrap the rest of the line.

Menus | Symbols

LISTS (lists can be nested)
<UL> <LI> </UL> (<LI> before each list item)
menu Unordered List
  • item 1
  • item 3
  • item 2
<li>item 1</li>
<li>item 3</li>
<li>item 2</li>
Also known as a Bulleted List. List Items are close wrapped. Different Browsers will vary the line space between the list and other objects.
N.1 <UL TYPE=disc|circles|square> Bullets *Netscape Extention
menu List items can have one of three different Bullet types. Only works with some Browsers. Netscape will apply one of three different bullets to each list item, depending on the items indent level. MS Explorer retains the one conventional bullet (enlarged ascii char 149).
menu List Item. This tag goes before each item to be included in a list. See examples above and below. The closing tag of the pair can be omitted for most Browsers.
N.1 <LI TYPE=disc|circle|square> *Netscape Extention
menu *Bullets, as UL Type above, but can be applied to individual List Items.
<OL> <LI> </OL> (<LI> before each list item)
menu Ordered List
  1. item 1
  2. item 3
  3. item 2
<li>item 1</li>
<li>item 3</li>
<li>item 2</li>
Also known as a Numbered List. List Items are close wrapped. Different Browsers will vary the line space between the list and other objects.
<OL TYPE=A|a|I|i|1> (for the whole list)
menu The Numbering method used to mark each List Item. as below
<LI TYPE=A|a|I|i|1> (this &/or subsequent items)
menu Type can be applied to each item
  1. item 1
  2. item 3
  3. item 2
  4. item 5
  5. item 4
<li type="A">item 1</li>
<li type="a">item 3</li>
<li type="I">item 2</li>
<li type="i">item 4</li>
<li type="1">item 5</li>
The Type attribute can be added to force a different bullet system-   non default type.
(the fifth value above matches the default)
<OL START=?> (for the whole list)
menu Start Number.
  1. item 1
  2. item 3
  3. item 2
<ol start="10">
<li>item 1</li>
<li>item 3</li>
<li>item 2</li>
Force the List Items to start numbering at a specific number.
menu List Item Value
  1. item 1
  2. item 3
  3. item 2
<li value=25>item 1</li>
<li value=9>item 3</li>
<li value=67>item 2</li>
Forces each List Item to a specific individual number.
<DL> <DT> <DD> </DL> (<DT> = defined term, <DD> = definition)
menu Definition List.
The Defined Term, one list.
definition 1
definition 2
definition 3
Another Defined Term, still same list.
definition 1
definition 2
<dt>The Defined Term. ...</dt>
<dd>definition 1</dd>
<dd>definition 2</dd>
<dd>definition 3</dd>
<dt>Another Defined Term ...</dt>
<dd>definition 1</dd>
<dd>definition 2</dd>
All items are close wrapped and definitions are indented below the defined term. Different Browsers will vary the line space between the list and other objects.
<MENU> <LI> </MENU> (<LI> before each list item) Rarely used.
menu Menu List
  • item 1
  • item 3
  • item 2
  • <menu>
    <li>item 1</li>
    <li>item 3</li>
    <li>item 2</li>
    <DIR> <LI> </DIR> (<LI> before each list item) Rarely used.
    menu Directory List
  • item 1
  • item 2
  • item 3
  • <dir>
    <li>item 1</li>
    <li>item 3</li>
    <li>item 2</li>

    Menus | Symbols

    <IMG SRC="url">
    menu Display Image. Find the image in the same/local/another server.
    <IMG SRC="url" ALIGN=top|bottom|middle|left|right>
    menu Alignment. Text alignment; relating to the image on the current text line.
    N1.0 <IMG SRC="url" ALIGN=texttop|absmiddle|baseline|absbottom>
    menu Alignment. As above, only these are Netscape-specific extentions.
    <IMG SRC="url" ALT="***"> (if image not displayed)
    menu Alternate Text view. A most important attribute. Some Browsers cannot display images at all. Many viewers just want information and switch off image viewing in their Browsers, thus making pages load faster. In bothe cases, the "alt=***" attribute allows people to read what the image would show them.
    <IMG SRC="url" WIDTH=? HEIGHT=?> (in pixels)
    menu The image size in pixels.  A most important attribute. Have you ever watched a page jump and shake as each bitmap image appears. Well, if the designer had bothered to include the width and hieght attributes that would not happen. People will back track away from pages that annoy them too much - Lost sales??
    <IMG SRC="url" BORDER=?> (in pixels)
    menu Border. An image that is used for a hyperlink will have a border around it if this attribute is included. The colour will be the page default hyperlink colour.
    <IMG SRC="url" HSPACE=? VSPACE=?> (in pixels)
    menu Keep away!! These attributes, together or only one, will put space between the image and any other images or text. (&nbsp; can be used effectively between images horizontally)
    N1.0 <IMG SRC="url" LOWSRC="url">
    menu Path to a low resolution copy of an image. Supposedely having a much smaller file size, this image would be loaded first, while the slower proper image is downloaded. 'Interlaced' GIFs have superceded need for this attribute.
    <IMG SRC="url" ISMAP> (requires a server-side script)
    menu Imagemap. See the "About Image Maps" tutorial.
    <IMG SRC="url" USEMAP="url">
    menu Imagemap See the "About Image Maps" tutorial.
    <MAP NAME="***"> </MAP> (map name reference for coordanants data)
    menu Map.  See the "About Image Maps" tutorial.
    <AREA SHAPE="rect" COORDS=",,," HREF="url"|nohref>
    menu Section.  See the "About Image Maps" tutorial.

    Menus | Symbols

    <A NAME="***"> </A> - (a BookMark)
    menu Define an object on the current document as a Bookmark.

    An object can be given a name that can then be called from a hyperlink. The "Menus | Symbols" bookmarks on this page are an example. Bookmarks can also be called across pages by including a URL (see "A HREF" below).
    (<a href="#top"> ... </a> is an inbuilt Browser Bookmark that will automatically scroll a page back to the top)

    <A HREF="url"> ... </A> (another page local, in another folder or on another server)
    menu Link to another page/object. The A tag hyperlink can be called from an image or text.
    ie <a href="wallyworld.html>Go to Wally World</a>
    ie <a href="wallyworld.html><img src="widget.gif"></a>
    ie <a href="wallyworld.html><img src="../images/widget.gif"></a>

    Example 1 uses a text link to another page in the same directory.
    Example 2 uses an image (clickable Bitmap) to link to another page in the same directory.
    Example 3 uses a clickable Bitmap to link to another page, one directory up and then one directory down from the linking page.

    Read the 'Some Common Basic Tags' tutorial for URL and directory references.

    <A HREF="url#***"> </A> (if in same folder, another, or on another server)
    menu Link to a Bookmark on an another page.
    <a href="wally.html#jimbo"> (assuming wally.html contains a bookmark named object - 'jimbo'.
    see 'Bookmark' aboveThe <a href... tag must contain the hash (#) symbol. The object with the name must not.

    <a href="http://www.aserver.net/wally.html#jimbo"> (assuming another site contains a page called wally.html, and that page contains a bookmark named object - 'jimbo'.

    <A HREF="#***"> </A> (if in the current document as a named Bookmark)
    menu Link to a Bookmark on the same page.
    <a href="#jimbo"> assuming the page being viewed contains a named object - 'jimbo'.
    see 'Bookmark' above. The <a href... tag must contain the hash (#) symbol. The object with the name must not.
    <A HREF="url" TARGET="***"> </A>
    menu Link to another page and open it in the Target window.
    The values for Target are:
    _blank - opens a new Browser window
    _self - forces the linked page to open in the same window as the calling page
    _parent - load the linked page in the window that created the current window
    _top - clear all frame sets and load the linked page as a full window.

    These values are really only usefull when using Frames. However, the "_blank" value may be of some interest because it will open up another Browser window leaving the calling window open.

    Many webmasters that offer links to other sites use this value so the viewer will still have a Browser window of the original site open, although they have surfed elsewhere.

    Menus | Symbols

    See a complete listing in the "Some Common Basic Tags" tutorial.
    Here are the commonly used ISO-Latin special characters.
    • &nbsp; (non-breaking space). A character (ascii 160), not a spacebar space.
    • &lt; (< less-than symbol)
    • &gt; (> greater-than symbol)
    • &amp; (& ampersand - and)
    • &quot; (" quotation mark)
    • &shy; ( soft hyphen)
    • &copy; ( copyright symbol)
    • &reg; ( registered trademark symbol)

    It is very important to include the (&) ampersand plus the (;) semicolon. These are Browser imbedded codes, so the &amp; representing the ampersand  or 'and' sign is not a contradiction.

    Why use them? Just typing on your computer and using the standard keyboard characters will not guarantee that fonts on other computers will include them. Using these will tell the Browser to default if the requested char. set cannot. If these characters are used in sentences then their meaning is special, so this method tries to ensure their inclusion.

    Menus | Symbols

    URL Represents the path to a file on - another server, same server-different folder, same folder
    ? Arbitrary number. **** Text (i.e. "middle").
    rrggbb RGB Hex value (i.e. "#00CC66")  | Separates alternatives. ,,, Comma separated (i.e. "0,0,35,35", etc.).
    N?.? - Extension introduced with Netscape Navigator version ?.?.
    I.E. - Extension introduced with Internet Explorer
    colour [U.K.] must be spelt as color [U.S.] in all HTML code.
    centre [U.K.] must be spelt as center [U.S.] in all HTML code.

    back to the HTML tutorials
    < back

    Over 120 pages: All major topics divided into Classrooms
    Free Backgrounds & Buttons! DTP and HTML "My First Page" HTML lessons
    Tutorial Text Search Perl CGI Scripts Typography & Layout
    4 pages of Links Visitors Book Perl Scripts Forum n/a
    Free Links page Feedback Form Q/A contact Forum

    pages Designed & Published - Ron F Woolley
    e-mail 1997 '98. Last Revised:  Friday, 31 October 2003 22:04