XHTML Tags and
Thier Attributes.



<a> | <abbr> | <acronym> | <address> | <applet> | <area> | <b> | <base> | <basefont> | <bdo> | <big> | <blockquote> | <body> | <br /> | <button> | <caption> | <center> | <cite> | <code> | <col> | <colgroup> | <dd> | <del> | <dfn> | <dir> | <div> | <dl> | <dt> | <em> | <fieldset> | <font> | <form> | <frame> | <frameset> | <h1> -- <h6> | <head> | <hr /> | <html> | <i> | <iframe> | <img> | <input> | <ins> | <isIndex> | <kbd> | <label> | <legend> | <li> | <link> | <map> | <menu> | <meta> | <noframes> | <noscript> | <object> | <ol> | <optGroup> | <option> | <p> | <param> | <pre> | <q> | <s> | <samp> | <script> | <select> | <small> | <span> | <strike> | <strong> | <style> | <sub> | <sup> | <table> | <tbody> | <td> | <textarea> | <tfoot> | <th> | <thead> | <title> | <tr> | <tt> | <u> | <ul> | <var>

Script unchangables in Blue
Script changables in Red

These elements have been grouped into there families. E.G. Table, lists, etc, etc, etc.
They are also written in order of the way the document tags are set up, HTML, HEAD then BODY.

Wherever possible working examples are given.

<html>
The HTML element is the container of the entire document content, including the HEAD element it is the root element of each XHTML document. NOTE: it has no X. Both the start and end tags are optional but good style dictates the inclusion of both and also if you are debugging a page, it is helpful to see the HTML tags when viewing the source to verify that the page has fully loaded into the browser. Usually, the HTML element start tag is the second line of an HTML document, following the Document Type Definition (DTD) statement.
E.G.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> If a XHTML doc must be fixed with a html xmlns="http://www.w3.org/1999/xhtml"
If no DTD is provided in the file it assumes the browser's default DTD, (which is usually PUBLIC) the HTML start tag becomes the first line of the file.
The end tag should be in the last line of the document but it does not have to stand on its own line.
Attributes: lang, xml:lang, dir, xmlns

Back to Menu.

Head Tag Elements.

<head>, <title>, <meta>, <link>, <style>, <base>, <basefont>, <noscript> & <script>
The HEAD element contains the document’s non-displayed informationthat is generally not used as part of the BODY element in the browser. The TITLE element is the exception and affects what the user sees when a browser displays its content in the titlebar.

The content of the HEAD element consists entirely of other elements that are intended to assist the browser in working with document data. One or more META elements, can also assist search engines and document parsers to learn more about the document based on the information supplied by the author. The following shows the elements that may be nested inside a HEAD element. Styles, Scripts, Links, Base, Basefont, IsIndex & Title.
Attributes:lang, xml:lang, dir, profile.

The TITLE element identifies the overall content of a document. The element content is not displayed as part of the document but in the browsers titlebar. One TITLE element only is permitted per document and it must be located inside the HEAD element. It’s OK to be somewhat blasé in assigning the title but please give the document some context as well.
Attributes: lang, xml:lang, dir.

A META element conveys hidden information about the document, both to the server and to the client that downloads the document. The element is also used to embed document information for search engines to use for indexing and categorising documents on the WWW.
Several META element may be included in a document and all META elements should be nested inside the HEAD element. The specific purpose of each META element is defined by its attributes. Characteristically, a META element reduces to a name/value pair for either the server or the client use. E.G. Most browsers recognize attribute settings that force the page to reload as indicated in the META element, this is useful in a page whose content is updated minute-by-minute.
E.G. Click Here
Attributes: content (required), lang, xml:lang, dir, http-equiv, name, scheme.

The LINK element belongs inside the HEAD element and is a place for the document to establish links with external documents, such as style sheet definition files or font definition files. It has no relationship to the A element that is offhandedly called a link when it contains an HREF attribute. A variety of attributes let the author establish relationships between the current document and potentially related documents.
E.G. <link href="Classes/Tutes.css" type=text/css rel=stylesheet>
Attributes: id, class, style, title, lang, xml:lang, dir, charset, href, hrefLang, type, rel, rev, media

The STYLE element is a container for style sheet rules. The STYLE element should only be placed inside the HEAD element although most browsers will accept for style sheet rules anywhere in the HTML element. You may include more than one STYLE element in a HEAD element. You can also set up style sheet rules for the whole site by creating a Cascading Style Sheet (CSS) and linking it to each page by using the LINK element.
E.G. Click Here
Attributes: type (required), lang, xml:lang, dir, media, title, xml:space.

A BASE element is defined inside a document's HEAD tags to instruct the browser about the URL path to the current document. This path is then used as the basis for all relative URLs used to specify various SRC and HREF attributes in the document. The BASE element's URL should be a complete URL, including the document name. The browser calculates the base URL path to the directory holding that document. So if you specify <base href="http://www.mySite.com/Jokes/index.htm">, the HREF attribute on that page to book1/NoahsTrobles.htm resolves to the full URL of http://www.mySite.com/Jokes/book1/NoahsTrobles.htm.

In the same way, a URL can walk up the hierarchy with the dot syntax.
E.G. An IMG element in the document may be set for src="../pics/Alien Wave.gif", would resolve to http://www.mySite.com/pics/AlienWave.gif.

AlienWavingLeft_Big.gif

Attribute: href.

The BASEFONT element advises the browser of font information to be used as the basis for text rendering of the current page below the BASEFONT element. You can apply this element in either the HEAD or BODY portion of the document and you can also place a BASEFONT elements as often as you like to set the base font for a portion of the document. Be aware that settings of the BASEFONT element dose not necessarily apply to content in tables. If you want table content to resemble a custom BASEFONT setting, you may have to set the font styles to table elements separately.

BASEFONT overrides the default font settings in the browser and is used instead of style sheets but style sheets provide a much greater control over fonts.
E.G. <basefont face="Times New Roman, Times, serif" size="4">
Attributes: id, size, color, face.

The SCRIPT element provides a container for lines of code written in a script language that the browser is capable of interpreting. Script that are not written inside a function definition are executed as the page loads. Function definitions are loaded but their execution is deferred until they are invoked by user or an event. You can have more than one SCRIPT element in a document and they can be written in different script languages within the same document but it is important to specify the scripting language. E.G. <script language="Javascript">

Browsers will also allow script statements to be imported into the document from a document whose URL is specified by the SRC attribute. E.G. This would create a link to the JS sheet <script language=Javascript1.2 src="Classes/Tutes.js" type=text/javascript></script> .
Attributes: type (required), charset, src, defer, xml:space.

The NOSCRIPT element is intended to display content when a browser is not set to run the scripts embedded in the current document. When a user disables scripting in a browser, the NOSCRIPT element's content is rendered wherever it falls in the source code. For browsers that don't support scripting the NOSCRIPT element is ignored completely.
<noscript>
This document contains programming that requires a scriptable browser, such as NS or IE. You may not have full access to this page's at this time.
</noscript>
Attributes: id, class, style, title, lang, xml:lang, dir

Back to Menu.

Body Tag Elements.

<body>
After the material in the HEAD portion of an HTML file, the BODY element contains the genuine content of the page that the user sees in the browser window or may hear. It is also where window object event handlers are placed. E.G. an onLoad event handler.

Most browsers do not split hairs when you omit either or both the start and end tags but if you are debugging a page, it is helpful to see the end tags for both the BODY and HTML tags when viewing the source to verify that the page has fully loaded into the browser.
E.G.
<body bgcolor="#ffffe6" background="whiteSatin.jpg" text="#000000" onLoad="init" leftmargin="0" topmargin="0">
Attributes: id, class, style, title, lang, xml:lang, dir, onLoad, onUnload.

Back to Menu.

<a>
The A element is the rare element that can be an anchor and/or a link, depending on the presence of the NAME and/or HREF attributes.
E.G. <a name="goHere">An anchor named "goHere."</a>
<a href="goHere">
Link to navigate to "goHere" in the same Document.</a>
<a href="
http://www.somePlce.com/somePage.html">
Document Link / Document Anchor.

Attributes: id, class, style, title, lang, xml:lang, dir, charset, type, name, href, hrefLang, rel, rev, accessKey, shape, coords, tabIndex, onFocus, onBlur.

Back to Menu.

<address>
The ADDRESS element was often regarded as a display formatting tag appropriate for displaying a page author's contact information on the page. But the increased focus on separating content from form in HTML adds some extra meaning to this element. Search engines and future HTML may apply special significance to the content of this element and perhaps in cataloging author information separate from the information located in META elements. To use this structural meaning of the element while keeping the rendering in line with the rest of your body text, you need to assign style sheet rules to override the browser's default formatting tendencies for this element. Any standard BODY elements, such as links, can be contained inside an ADDRESS element.

E.G.

Send comments to:<a href="mailto:Gary@thisSite.com?Subject=This is fome my site &body=Please make a comment.""></a>

Attributes:id, class, style, title, lang, xml:lang, dir.

Back to Menu.

<applet>
You can embed an executable piece of Java code (not to be confused with JavaScript) in an HTML document in the form of an applet. An APPLET element usually occupies a rectangular area of the page. An applet may require that some initial values be set from the HTML document. provided the applet is written to accept parameters, one or more PARAM elements can be pass to the applet before the applet starts. PARAM elements go between the start and end tags of an APPLET element.

Attributes: id, class, style, title, codebase, archive, code, object, alt, name, width, height, align, hSpace, Vspace.

Note: IE 7+ No longer supports Applets.

Back to Menu.

<bdo>
The BDO element stands for bidirectional override. The LANG and DIR attributes of most elements are designed to take care of most situations involving the mixture of writing systems that compose text in opposite directions. The BDO element is designed to assist in instances when due to various conversions during text processing, the normal bidirectional algorithms must be overridden.
E.G.
<bdo dir="ltr">Some Mixed Script Text Here</bdo>
Attributes:
dir (required), id, class, style, title, lang, xml:lang, onClick, onDblClick, onMouseUp, onMouseDown, onMouseMove, onMouseOut, onKeyPress, onKeyUp, onKeyDown.

Note: Most broswers No longer supports this.

Back to Menu.

<blockquote>
The BLOCKQUOTE element is intended to set off a long quote inside a document. It has been rendered as an indented block, with wider left and right margins of approx 40 pixels, plus some extra whitespace above and below the block. EG. Click Here
Attributes: id, class, style, title, lang, xml:lang, dir, cite.

Back to Menu.

<br>
The BR element forces a visible line break wherever its tag appears in the document. Browsers tend to honor the BR element as a genuine line break, whereas paragraphs defined by the P element are given more vertical space between elements on the page.

If the text containing the BR element is wrapped around a floating image or other object, you can direct the next line via the CLEAR attribute to start below the object, rather than on the next line of the wrapped text.
EG. Click Here
Attributes: id, class, style, title.

Back to Menu.

<button>
The BUTTON element is patterned after the INPUT element of types (button, submit and reset) but carries some extra powers, particularly when used as a submit-type button. Content for the button's label goes between the element's start and end tags, rather than being assigned as an attribute. Other elements can be used to generate the label content, including an IMG, FONT and TABLE elements if so desired.
E.G. Click Here
Attributes: id, class, style, title, lang, xml:lang, dir, name, disabled, accessKey, value, type, tabIndex, onFocus, onBlur.

Back to Menu.

<center>
The CENTER element was introduced by Netscape and became widely used before the W3C-sanctioned DIV element came into being. The content of a CENTER element is aligned along an axis that runs down the middle of the next outermost containing element E.G. a table cell but it is usually the BODY. The element is deprecated in HTML in favor of the DIV element or the style sheet rule of text-align:center. In lieu of style sheets , you can use a DIV element with align="center".
Attributes: id, class, style, title, lang, xml:lang, dir.

Back to Menu.

<dir>
The DIR element is treated the same as a UL element in that it is presented an unordered single column list of items usually preceded by a bullet, although the original idea of the DIR tag was to allow browsers to generate multicolumn lists of items. In any case, you should be using the UL element, because should this element ever disappear from the browser landscape.
E.G.
<dir>
<li>
Chapter 1
<li>
Chapter 2
<li>Chapter 3
</dir>

  • Chapter 1
  • Chapter 2
  • Chapter 3
  • Attributes: id, class, style, title, lang, xml:lang, dir, compact.

    Back to Menu.

    <div>
    The DIV element gives structure and context to any block-level content in a document. Unlike some other structural elements that have very specific associations attached to them, for instance the P element, you are free to give meaning to each particular DIV tag by the element's attributes and content. Each DIV element becomes a generic block-level container for all content within the start and end tags.

    The DIV element is now recommended as the element to use to center text or objects on a page, in place of the CENTER tags. It is also convenient to use the DIV element as a wrapper for multielement content that is to be governed by a single style sheet rule. For example, if a block of content includes three paragraphs, rather than assign a special font style to each of the P elements, you can wrap all three P elements with a single DIV element whose style sheet defines the requested font style. Such a style sheet could be defined as an inline STYLE attribute of the DIV element or assigned via the CLASS or ID attribute, depending on the structure of the rest of the document.

    Thus:<div align="center" style="font-family: Comic Sans MS, Courier New; font-size:30px; font-weight: bold; word-spacing:10px; letter-spacing:8px; line-height:55px;"> <p> This is paragraph 1</p><p> This is paragraph 2</p><p> This is paragraph 3</p></div> will give you this:

    This is paragraph 1

    This is paragraph 2

    This is paragraph 3

    Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    <font>
    A FONT element is a container whose contents are defined by the element's attributes.
    <font color="#ff0000" size="4" face="Georgia, Times, serif">
    Attributes: id, class, style, title, lang, xml:lang, dir, size, color, face.

    Back to Menu.

    <h1>, <h2>, <h3>, <h4>, <h5> & <h6>
    The H1 element represents the most important, whereas H6 represents the least important of a series of six HTML heading levels whose associated numbers are intended to signify the importance of the section below the heading.
    It is up to the browsers to determine the font, weight and other characteristics of each level. Each heading element is on its own line, with no line break or paragraph elements necessary. You can always override the browser's style for any of the heading tags with CSS.
    E.G.

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Attributes: id, class, style, title, lang, xml:lang, dir

    Back to Menu.

    <hr>
    The HR element draws a horizontal rule according to visual rules built into the browser with a variety of attribute controls. Being a block element, the HR element starts and ends its rule on its own line, as if it were surrounded by BR elements. This element is not a content container. The default appearance specifications are left up to the browser maker.
    E.G.
    <hr width="100%" color="#ff00ff" size="8" noshade>


    Attributes: id, class, style, title, noShade, color, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, xml:lang, dir.

    Back to Menu.

    <iframe>
    An IFRAME element creates an inline frame within the natural flow of a document's content. The frame is a rectangular space into which you may load any other HTML document or use scripts to dynamically write the content. If you assign a value to the NAME attribute of an IFRAME element, you may supply that name as the value of a TARGET attribute of other elements that let you define a target for a document.

    The IFRAME element's rectangular space begins immediately following the content that comes before it, all content following the end tag starts on the next line following the frame rectangle. The content between the IFRAME start and end tags is ignored by supporting browsers. It is a good idea to place the URL of the iframe page in-between the tags so that the non-supporting browsers users can read the page if they wish.
    E.G.
    <iframe align="center" src="DailyMessageDateScript.htm" width="750" height="600"> </iframe>

    Attributes:id, class, style, title, longDesc, name, src, frameBorder, marginWidth, marginWeight, scrolling, align, height, width.

    Back to Menu.

    <img>
    The IMG element displays a image in whatever image types the browser is equipped to handle.WebStuff/DotCom.gif The most common image types are GIF, BMP, TIff, PNG and JPEG. IMG elements are inline elements, that can appear any place in the document you specify, including in the left, right and middle of a line of text. There are a large N° of attributes that affect the visual presentation of the image.

    To make an image a clickable link, wrap the element inside the A element. To eliminate the link border around the image, set the BORDER attribute to 0.
    E.G. (As In Dot Com above)
    <a href="InternetTheTrueOrigin.htm" target="_blank"><img src="Pics/DotCom.gif" alt="DotCom.gif" width="154" height="38" hspace="2" vspace="0" border="0" style="float:right" title="DOT COM"></a>

    Attributes: src (required), alt (required), id, class, style, title, lang, xml:lang, dir, longDesc, height, width, useMap, isMap.

    Back to Menu.

    <isIndex>
    The ISINDEX element is a longtime holdover from the earliest days of HTML and is deprecated in HTML to favour of the text INPUT element. The ISINDEX element tag belongs in the HEAD element & in modern browsers is rendered as a text field between two HR elements.

    When the user types text into the field and presses the Enter key, the field content is URL encoded with + symbols substituted for spaces & sent to the server with the URL of the current document.

    A CGI program on the server must know how to process this URL and return HTML for display in the current window or frame.
    E.G.
    <head>
    <isindex prompt="
    Please Enter a Search String:">
    </head>

    Attributes: id, class, style, title, lang, xml:lang, dir, prompt

    Back to Menu.

    <object>
    The OBJECT element supplies the browser with information to load and render data types that are not natively supported by the browser. If the browser must load some external program like a Java applet or a plugin the information about the content that's to be rendered is contained by the OBJECT element, its attributes and the associated PARAM elements nested inside of it. Although nearly all today's browsers recognize elements such as APPLET and EMBED, the HTML 4 specification pointed toward the trend to combine all of this into the OBJECT element.

    HTML allows nesting of OBJECT elements to give the browser a chance to load alternate content if no plugin or other content aids that are available in the browser. Basically, the browser should be able to go through nested OBJECT elements until it finds one it can handle.
    E.G.
    <object code="goGetIt.class" codebase="classes"></object>
    Attributes: id, class, style, title, lang, xml:lang, dir, declare, classid, code, codeBase, data, type, codeType, archive, standby, height, width, useMap, name, tabIndex.

    Back to Menu.

    <param>
    The PARAM element is usally fournd within an APPLET or OBJECT element to pass parameters as it is being loaded. Parameters provide ways for HTML authors to adjust settings without having to recode the applet or Object. A parameter typically passes a name/value pair, which is assigned to the NAME and VALUE attributes. You can several PARAM element per applet or Object.
    For an example see <applet>
    Attributes: id, name, value, valuetype, type.

    Back to Menu.

    <p>
    The P element defines a paragraph in a document and is formally a block-level element, that means that the content begins on its own line and content following the P element also starts on its own line. (As though it is surrounded by BR elements.) No other block-level elements may be nested inside a P element. If you omit the end tag then the element will end at the next block-level element start tag.

    The content of a P element does not recognize extra whitespace that appears in the source code. Unlike other elements, such as PRE that render the content just as it is formatted in the source code. If you want extra white spaces you can use the Ampersand Command &nbsp; to create them.
    Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    <pre>
    The PRE element defines a block of preformatted text. Preformatted text is usually rendered by default in a monospace font and, more importantly, it preserves the whitespace (i.e. multiple spaces between words) and new lines entered into the source code for the content. The PRE element doesn't ignore HTML tags. Instead, it passes such tags onto the browser for normal rendering. If you want to display HTML tags in a block of preformatted text, use the < (Less than) and > (Greater Than) symbols. This prevents them from being interpreted as genuine tags but renders the symbols within the preformatted text block. Most browsers ignore a whitespace line break immediately following a PRE element start tag in case you wish to start the content on a new line in the source code.

    The HTML specification is adamant about the PRE element maintaining its monospaced font size and line spacing and lists the following elements that should not be included inside a PRE element: APPLET, BASEFONT, BIG, FONT, IMG, OBJECT, SMALL, SUB and SUP, because these destroy the fixed-size pitch of the element. The recommendation also encourages authors to avoid overriding the monospaced font settings with CSS.
    E.G.
    <pre>
    &lt;script language="JavaScript"&gt;
         document.write("Good'ay mate.")
    &lt;/script&gt;
    </pre>

    
    <script language="JavaScript">
       document.write("Good'ay mate.")
    </script>
    

    Attributes: id, class, style, title, lang, xml:lang, dir, xml:space.

    Back to Menu.

    <q>
    The Q element is intended to set off an inline quote inside a document. The HTML specification indicates that browsers should automatically surround the content of a Q element with language-sensitive quotation marks and that authors should not include quotes. IE 6 does not render such quote marks but NS 7, Opera and Firefox all do. If you need quotes around quoted text, you have no choice at this point but to include them yourself via the Ampersand Commands &#8220; = “ and &#8221; = ” or &quot; = " and not use the Q element at all.
    Attributes: id, class, style, title, lang, xml:lang, dir, cite.

    Back to Menu.

    <span>
    The SPAN element gives structure and context to any inline content in a document. Unlike other structural elements the author is free to give meaning to each SPAN element via the element's attribute settings.
    Each SPAN element becomes a generic container for all content within the required start and end tags.
    It is convenient to use the SPAN element for a small piece of content that is to be governed by CSS. i.e. If you want to distinguish a few words in a paragraph you could wrap the affected words with a SPAN element and add style sheet rules to define the font and text. Such a style could be defined as a STYLE attribute of the SPAN element or assigned via the CLASS or ID attributes.
    Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    Phrase Tag Elements.

    <abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <samp> & <var>
    All these are a part of what is called phrase elements.

    The ABBR element provides an encapsulation for abbreviations that appear in the text body. EG, consider a web page that includes your address in the document, the abbreviation NSW is used for New South Wales. A spelling checker, language translation program or speech synthesizer might balk on this abbreviation; a search engine would not include the words "New South Wales" in its relevancy rating calculation. But by turning the NSW text into an ABBR element and assigning a TITLE attribute to it, you can provide a full-text equivalent that a search engine. A text-to-speech program would read aloud the full state name instead of some gobbledygook.
    A related element, ACRONYM, offers the same services for words that are acronyms. Both elements are part of a larger group called phrase elements.
    Example: 1313 Furtop Road Adaminaby, <abbr title="New South Wales">NSW</abbr>

    The ACRONYM element provides an encapsulation for acronyms that appear in the body text. EG, consider a web page that includes the acronym WWJD?
    This element bacially dose the same as the ABBR element.
    E.G. <acronym title="What Would Jesus Do?">WWJD?</acronym>

    The CITE element is one that contains a citation or reference to some other source material. This is not an active link but simply notation indicating what the element content is. Search engines and other HTML document parsers may use this information for other purposes for example, assembling the bibliography of a document.
    The browsers have free rein how to distinguish CITE element content from the rest of the body. Both IE & NS elect to italicize the text. If you like this can be overridden with CSS.
    E.G. “In the entire world, God has created nobody else exactly like me. Everything about me is authentic, for I am an original, designed in God's own unique pattern.”
    (Gary Ivin, <cite>I Am Me</cite>)

    The CODE element is one that is used for the most part to display one or more inline characters representing computer code E.G. variable names, programming statements, keywords, Etc, Etc, Etc).
    Again the browsers have free rein to how determine the CODE element from the rest of the body. Both IE & NS elect to render CODE element content in a monospace font, usually in a slightly smaller font size than the default body font. This also can be overridden with CSS.
    White space & carriage returns are treated the same way in CODE tags as it is in the BODY element. Line breaks must be inserted with BR elements.
    E.G.
    To initialize a date in JavaScript we use this <code>var thisDate = new Date();</code>.

    An EM element is to be represented differently from body text to designate emphasis. Indervidual browsers have free rein to determine how or whether to distinguish content. Both IE and NS elect to italicize the text. CSS can override this as you see fit.
    E.G.
    <p>The storm raged; while Gary struggled against the wildly churning waters of river that were <em>exceedingly</em> cold.</p>

    The DFN elements assign structural meaning to a designated portion of the document. The DFN element signifies the first usage of a term in a document. A common technique in documents is to italicize an important vocabulary term the first time it is used in a document. This is generally the place in the document where the term is defined so that it may be used in subsequent sentences with its meaning understood. By default, IE italicizes all text within a DFN tags but you can define your own style with CSS.
    E.G. The Australian vernacular is hard to understand some times. For example, they seem to run many of there words together like digabringadrinkalong. <dfn>did-you-bring-a-drink-along</dfn>

    The KBD elements assign structural meaning to a designated portion of the document. A KBD element displays text that a user is to type on the keyboard, most likely to fill a text field or issue some command.
    Browsers have free rein to determine how to distinguish the content from the rest of the BODY element. Both IE and NS use a monospace font for the text but this can be overridden with a style sheet.
    E.G. If the answer, dosen't apply please type <kbd>N/A</kbd> into the text box.

    The SAMP element is one that contains text that is sample output from a computer program or script. This is different from a code example, which is covered by the CODE element.
    Browsers have free rein to determine how to distinguish SAMP element content from the rest of the BODY element. Both IE and NS elect to render the text in monospace font. This can be overridden with CSS. E.G.
    You will see <samp>Good'ay mate!</samp> on the screen if you Click Here.

    The VAR element is one that is used predominantly to display one or more inline characters representing a computer program variable name.
    Browsers have free rein to determine how (or whether) to distinguish VAR element content from the rest of the BODY element. Opera, NS and IE all elect to render VAR element content in an italic font. This rendering can be overridden with CSS.
    E.G.
    The variants in this clock are: <var>clockColour</var>, <var>BG_colour</var>, <var>fontType</var>, <var>siz</var>, <var>alternate</var>, <var>standardbrowser</var>, <var>clockobj</var>, <var>Digital</var>, <var>hours</var>, <var>minutes</var>, <var>seconds</var>, <var>day</var> & <var>dn</var>.

    All these elements have these Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    Map Tag Elements.

    <area> & <map>
    The MAP element defines a client-side image map that is linked with an image or other object that occupies space on the page. The only job of the MAP element is to assign a name for one or more AREA element definitions.

    Each AREA defines how the page should respond to user interface with a specific region of the image or Object. The client-side image map area can act like the A element link in that it can link to a destination or JavaScript. It's not uncommon to use client-side area maps as a navigation bar. This allows creative menu design, while the power to turn any segment of a image into a link.
    E.G.
    <map id="menu">
    < area coords="45,70,100,175" href="menu.html" target="display" alt="
    Menu">
    </map>

    Area Attributes: alt (required), id, class, style, title, lang, xml:lang, dir, shape, coords, href, noHref, tabIndex, accessKey, onFocus, onBlur.
    Map Attributes: id (required), lang, xml:lang, dir, class, style, title, name, onClick, onDblClick, onMouseDown, onMouseUp, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp.

    Back to Menu.

    Font Style Tag Elements.

    <b>, <big>, <i>, <small>, <strong>, <s>, <strike>, <sub>, <sup>, <tt> & <u>
    These are font style elements in HTML.

    The B element renders the content into a boldface version of the font face. EG.

    (This is BOLD.)

    The BIG element renders its content in the next font size larger than the previous body font size in HTML's 1 through 7 scale. Default font size is dependent upon the browser, operating system and user preferences settings. For a more precise font size, use style sheets.
    E.G.
    This is a bigger font size.

    If you nest BIG elements, the effects are accumulative, with each nested level rendered one size larger than the next outer element.
    <div> <font size="1" face="Georgia, Times, serif">This <big>is <big>big <big>and<big> getting <big>bigger!</big></big> </big></big></big> </font></div>

    This is big and getting bigger!

    The I element renders its content in an italic version of the font face. It is up to the browser to italicize a system font or to load an italic version of the currently specified font. You can enhance this element by assigning style sheet rules to some or all I elements in a page. E.G.
    You may want all italics to be coloured red. This can be done easily by the style rule in the HEAD element <style> i {color:red} </style> for the whole doc or individual <i style="color:red"> Italics<i>.

    The SMALL element renders its content in a relative size one level smaller than the text preceding the element. E.G. This is smaller font.

    The STRONG element is one that contains text that indicates a stronger emphasis than the EM element. Whereas an EM element is typically rendered as italic text, a STRONG element is generally rendered as boldface text and is basically the same as the B element. E.G.

    This is strong

    The STRIKE element renders its content as strikethrough text. This element is identical to the S element, which was adopted because it more closely resembled the one-character element names for other type formatting (such as B, I and U elements). In any case, both STRIKE and S elements are deprecated in favor of the CSS text-decoration:line-through.

    The SUB & SUP elements are typographical elements that instructs the browser to render its content as subscript/superscript and in a font size consistent with the surrounding content. Browsers tend to render this content in a smaller size than surrounding content.
    E.G. This is subscript & superscript

    The TT element renders its content as monospaced text to indicate a teletype text output. The element is intended to be strictly for formatting rather than a contextual element. If you’re looking for a contextual setting for input or programming code, checkout the CODE, KBD and SAMP elements. As with most font-related elements you format it how you like with CSS.
    E.G.
    Hal said, "Hello Dave."

    The U element renders its content as underlined text. This has deprecated in HTML in favor of the CSS text-decoration:underline.

    You can nest multiple font style elements to create combined styles.
    E.G.
    sup, italic, underline & bold
    .

    All these have the same Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    Table Tag Elements.

    <table>, <caption>, <thead>, <tfoot>, <tbody>, <th>, <tr>, <td>, <col> & <colgroup>
    The TABLE element is a container for additional elements that specify the content for a table. The table consists of rows and columns of content and other elements related to the TABLE element. E.G. CAPTION, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, & TR.
    The purpose of the TABLE element is to define a number of visible attributes that apply to the entire table, regardless of the number of rows or columns within it. Many of these attributes can be overridden by Style Sheet Rules for a given row, column or cell. The number of rows and columns is strictly a factor of the structure of TR and TD elements within the table.
    Tables have been in use for a long time not only to organize the rows and columns of content but also to position the content.
    Table Attributes: id, class, style, title, lang, xml:lang, dir, summary, width, border, frame, rules, cellspacing, cellpadding.

    The CAPTION element may be placed only inside a TABLE element and placed immediately after the <TABLE> start tag to denote the text to be used as a table caption. The caption applies to the entire table, unlike a table heading <TH> that only applies to a single column or row in the table.

    The caption is usually a brief description of the table but a longer explanation may be written for the SUMMARY attribute for browsers that use text-to-speech technology or for users who cannot see browsers. The primary distinguishing attribute of the CAPTION element is ALIGN, which lets you define where the caption appears in relation to the actual table. Only one CAPTION element is recognized within a TABLE element.
    Caption Attributes: id, class, style, title, lang, xml:lang, Dir.

    The THEAD element is a special-purpose container of one or more rows of table cells rendered at the top of the table. No more than one THEAD element for Rows or Columns may be defined within a single TABLE element and the THEAD element should be located in the source code imediately after the TABLE element's start tag unless you have a CAPTION tag then it follows that. You are free to use any combination of TD and TH elements you like within the THEAD element.

    A TFOOT element is a special-purpose container of one or more rows of table cells rendered at the bottom of the table and typically, it mirrors the THEAD element content for users who have scrolled down the page. No more than one TFOOT element may be defined within a single TABLE element and the TFOOT element should be located in the source code after the THEAD element and before any TBODY elements are defined in the table. A TFOOT element is a row grouping, like the TBODY and THEAD elements.

    The TBODY element consists of one or more rows of table cells. You can have more than one TBODY element defined within a single TABLE element. The TBODY element is used to define structural segments of a table that can require their own styles or borders. A TBODY element is the row-oriented equivalent of the COLGROUP element for columns. Other types of row groupings available are the TFOOT and THEAD elements, neither of which should overlap a TBODY element.
    THEAD, TFOOT, TBODY Attributes: id, class, style, title, lang, xml:lang, dir, char, charoff, align, valign.

    The TH element is a container for content that is rendered inside one cell of a TABLE element in a format that distinguishes it as a header. Most browsers render the content as boldface. A cell is the intersection of a column and row. In addition to providing a wrapper for a cell's content, the TH element defines a number of visible attributes that apply to a single cell, often overriding similar attributes set in lesser-nested elements in the table.
    Four attributes ABBR, AXIS, HEADERS and SCOPE have been added to the HTML specification for nonvisual browsers that will use text-to-speech technology to describe content of an HTML page.
    TH Attributes: id, class, style, title, lang, xml:lang, dir, abbr, axis, headers, scope, rowspan, colspan, char, charoff, align, valign.

    A TR element is a container for one row of cells. Each cell within a row may be of the TH or TD element. Every row requires at least a start tag to instruct the browser to begin rendering succeeding cell elements on the next line of the table.TR Attributes: id, class, style, title, lang, xml:lang, dir, char, charoff, align, valign.

    The TD element is a container for content that is rendered inside one cell of a table. In addition to providing a wrapper for a cell's content, the TD element defines a number of visible attributes that apply to the cell, often overriding similar attributes of the table.
    TD Attributes: id, class, style, title, lang, xml:lang, dir, abbr, axis, headers, scope, rowspan, colspan, char, charoff, align, valign.

    The COL element provides shortcuts to assigning widths and other styles to one or more column subsets within the table or within a table's column group. With this information appearing early in the TABLE element as a browser starts rendering the table before all source code for the table has loaded. You can use the COL element in combination with the COLGROUP element or by itself but no matter how you address the column structure of your table, the total number of columns defined in all COL and COLGROUP elements should equal the physical number of columns you intend for the table.
    COL Attributes: id, class, style, title, lang, xml:lang, dir, span, width, align, valign, char, charoff.

    The COLGROUP element provides shortcuts to assign widths and other styles to one or more subsets of columns within a table. With this information appearing early in the TABLE element source code so that a browser equipped to do so starts rendering the table before all source code for the table has loaded.
    The COLGROUP element can be used in combination with the COL element or by itself. You can also define a COLGROUP that has COL elements nested within to assist in defining subsets of columns that share some attribute or style settings. The need for the element's end tag is determined by the presence of standalone COL elements following the COLGROUP element. That is if you specify column groupings entirely with COLGROUP elements, end tags are not necessary:
    COLGROUP Attributes: id, class, style, title, lang, xml:lang, dir, span, width, align, valign, char, charoff .

    Back to Menu.

    Del & Ins Elements.

    <del> & <ins>
    The DEL element and the INS element define a format that shows which segments of a document's content have been marked up for deletion or insertion in order to update a document during the authoring process. This gives us a WYSIWYG authoring tool, these elements can also assist in controlling generational changes of a document in process. Both element have the same attributes
    E.G.
    A long, long time ago in the<del cite="Fix Spelling"> kindgom</del> <ins>kingdom</ins> of ...
    A long, long time ago in the kindgomkingdom of ...
    Attributes: id, class, style, title, lang, xml:lang, dir, dateTime, cite.

    Back to Menu.

    Frameset Tags.

    <frameset>, <noframes> & <frame>
    The FRAMESET defines the layout of a multiple-frame presentation in a browser's application window. The primary duty of the FRAMESET element is to specify the layout in a column and row array of rectangular frames. Attributes that are defined in a FRAMESET apply to all FRAME elements nested within unless thay are overridden by a similar attribute for a specific FRAME.
    You may nest a FRAMESET element within a FRAMESET element. This tactic allows you to subdivide a frame from the outer FRAMESET element into two or more frames. That is, if you define one FRAMESET element with three columns and two rows, you would get a total of six frames.
    Attributes: id, class, style, title, rows, cols, onLoad, onUnload

    The FRAME element defines properties of an individual window space that is a fractional portion of the entire browser window. A FRAME element must be defined within the context of a FRAMESET element. It is the FRAMESET that defines the row and column arrangement of a related group of frames.
    A browser treats a frame as a separate window within the browser application's so that each frame window can independently load its own content. Although no attributes of the FRAME element are required, it is highly recommended to assign a value to the NAME attribute.
    E.G.
    Click Here
    Attributes: id, class, style, title, name, src, longdesc, frameborder, marginheight, marginwidth, noresize, scrolling.

    The NOFRAMES element contains HTML that is rendered if a browsers incapable of displaying frames. Browsers that are capable of displaying frames will ignore the NOFRAMES element and all the content it contains. Content for this element should offer a link to a frameless version of the page. The most common location for the NOFRAMES element is inside a FRAMESET element.
    E.G.
    <frameset cols="120,*">
    <frame name="menu" src="
    menu.htm">
    <frame name="main" src="firstUp.htm">
    <noframes>
    Your browser does not support frames.
    Please <a href="noFrames.htm">Click Here</a> for a frameless version.
    </noframes>
    </frameset>

    Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    OL, UL & Menu Elements.

    <ul>, <ol>, <menu> & <li>
    The UL element is a container for an unordered list of items. An "unordered list" means that the items are rendered with a leading bullet symbol depending on the TYPE attribute you set. The content for each list item is defined by a nested LI elements.
    UL Attributes: id, class, style, title, lang, xml:lang, type, dir.

    The OL element is a container for an ordered list of items. An "ordered list" means that the items have a leading sequence numbers or letters depending on the TYPE attribute setting. Again the content for each item is defined by a nested LI element.
    OL Attributes: id, class, style, title, lang, xml:lang, start, type, dir.

    The original idea of the MENU element was to allow browsers to generate single-column lists of items. Now nearly every browser treats the MENU element the same as a UL element to present an unordered single column list of items usually preceded by bullets. The MENU element has deprecated in HTML and you should be using the UL element because this element will most likely disappear from the browser landscape. E.G.
    <menu>
    <li>
    Steak &amp;Chips</li>
    <li>
    Hamsteak &amp; Pineapple</li>
    </menu>

  • Steak & Chips
  • Hamsteak & Pineapple
  • Menu Attributes: id, class, style, title, lang, xml:lang, dir, compact.

    The LI element is a single list item that is nested inside an OL or UL list container. The outer container determines whether the LI item is preceded with a number or letter in sequencual order or a symbol that doesn't have any particular order. A special category of CSS attributes are devoted to list formatting. If you apply a style sheet rule to either an OL or UL element, the style is inherited by the nested LI elements.
    E.G. Click Here
    LI Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    DL Tag Elements.

    <dl>, <dd> & <dt>
    The DD element is a part of the DL, DT, DD elements that are used to create a definition list in a document. The entire list is bracketed by the DL element's tags. Each definition term is denoted by a leading DT element tag and the definition for the term is denoted by a leading DD element tag.

    The DT element is an inline element, whereas a DD element can contain block-level content, including bordered text, images and other objects. End tags are optional for both DT and DD elements because the next start tag automatically signals the end of the preceding element. The entire list, however, must close with an end tag for the encapsulating DL element

    The HTML specification sets no particular way of rendering a definition list, both NS and IE left-align a DT element and indent any DD element that follows it. No special font formatting or visual elements are added by the browser but you are free to assign any CSS you like. You can stack multiple terms or definitions, by placing multiple DT or DD elements after each other in the source code. E.G. Click Here
    Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.

    Form Elements.

    <form>, <input>, <label>, <option>, <optgroup>, <select>, <textarea>, <fieldset> & <legend>.
    This is used to generate an interactive form. A FORM element is nothing more than a container of controls. Most, are created in the document as INPUT elements.
    E.G.
    <form name="MailForm" method="post" onSubmit="check (this)" action='mailto:yourName@yourSite.com?Subject=Test Mail' enctype='text/plain'>
    Form Attributes: action (required), id, class, style, title, lang, xml:lang, dir, method, enctype, onsubmit, onreset, accept-charset.

    An INPUT element is sometimes known as a form control. It is not necessary that all INPUT elements are visible on the page. Mostly, an INPUT element provides a place for users to enter information and make selections from lists. The data from this interaction is submitted to a server-side program when the form is submitted.

    There are several attributes that determine the kind of control that is displayed on the page. These can have one of the following types: button, checkbox, file, hidden, image, password, radio, reset, submit or text. E.G.
    <input name="boxName" type="checkbox" value="boxValue" checked> A ticked checkbox.
    <input name="buttonName" type="radio" value="buttonValue" checked> A checked radio button.
    More Examples: Click Here
    Input Attributes: id, class, style, title, lang, xml:lang, dir, type, name, value, checked, disabled, readOnly, size, maxLength, src, alt, useMap, tabIndex, accessKey, onFocus, onBlur, onSelect, onChange, accept.

    The LABEL element defines a structure and container for the label that is associated with an INPUT element. Because the rendered labels for most form controls are not part of the element's tag, the LABEL attribute provides a way for a browser to clearly link label content to the control.

    There are two ways to provide the association. First is to assign the ID attribute value of the control to the FOR attribute of the LABEL element and the other is to wrap the INPUT element inside a LABEL element. The second is possible only if the label and control are part of running body content; if you separate the label from the control because they exist inside separate TD elements of a table, you must use the FOR attribute linkage. Whether the label is rendered in front of or after the control depends entirely on the relative locations of the tags in the source code.
    E.G.
    <form>
    <label>
    Name:<input type="text" name="name "></label>
    <label for="
    address">Address:</label>
    <input type="
    text" name="add" id="address">
    <<<<Other Content>>>>
    </form>


    Attributes: id, class, style, title, lang, xml:lang, dir, for, accessKey, onFocus, onBlur.

    The OPTION element defines an item that appears in a SELECT element listing, whether the listing is in a scrolling list or pop-up menu. OPTION elements associated with a SELECT element must be nested within the SELECT tags.
    The SELECT elements supply name or value pairs when the element is submitted as part of a form. The NAME and VALUE attribute of the selected option are submitted as a name or value pair. Therefore, this means that it is important to assign a meaningful value to the VALUE attribute of each OPTION element in a select list.
    E.G.
    <select id="townsNSW">
    <option selected>
    NSW Towns</option>
    <option>
    Adjunbilly</option>
    <option>
    Balgownie</option>
    ----------------
    <option>Yalgogrin</option>
    </select>

    The OPTGROUP is a hierarchical SELECT element. An OPTGROUP element represents a container of OPTION elements. The LABEL attribute is the text that would appear in the main SELECT element listing, with nested OPTION elements cascading off the side when the OPTGROUP element is highlighted.
    It is up to the individual browser how to render the OPTGROUP element. Both IE and NS Italicise group while indenting the list but Opera makes the background Black and the text White while indenting the list. E.G.
    <select name="FriutVeg">
    <option selected>
    Fruit/Vegetables</option>
    <optGroup label="Fruit">
    <option value="apple">
    Apples</option>
    <option value="pear">
    Pears</option>
    <option value="tom">
    Tomatoes</option>
    </optGroup>
    <optGroup label="Vegetables">
    <option value="beans">
    Beans</option>
    <option value="peas">
    Peas</option>
    <option value="carrots">
    Carrots</option>
    </optGroup>
    </select>

    Select Attributes: id, class, style, title, lang, xml:lang, dir, name, size, multiple, disabled, tabIndex, onFocus, onBlur, onChange.

    Option Attributes: id, class, style, title, lang, xml:lang, dir, selected, disabled, label, value.

    optGroup Attributes: label (required), id, class, style, title, lang, xml:lang, dir, disabled.

    The TEXTAREA element is a multilined text input control primarily for usage inside FORM elements. Unlike the text type INPUT element, a TEXTAREA element can be sized to accept multiple lines of text. word-wrapping is available, as well as enter carriage return. When a TEXTAREA element is inside a submitted form, the name/value pair is submitted, with the value being the content of the text box and the NAME attribute to be assigned. To display text in the TEXTAREA when it loads, it goes between the start and end tags.E.G.
    <textarea name="Comments" cols="40" rows="5" id="user_coments" title="FormComments" wrap="virtual" >This is the Initial Value.</textarea>

    For more on Forms Click Here
    Textarea Attributes: rows (required), cols (required), id, class, style, title, lang, xml:lang, dir, name, disabled, readonly, tabIndex, accessKey, onFocus, onBlur, onSelect, onChange.

    Back to Menu.

    Fieldset Tag Elements.

    <fieldset> & <legend>
    A FIELDSET element is a structural container for form elements as distinguished from the functional containment of the FORM element. In fact, you can define multiple FIELDSET elements within a single FORM element to supply context to logical groupings of form elements. For example, one FIELDSET element might contain text input fields for personal info and another FIELDSET might be dedicated to other information.

    You can also attach a LEGEND element immediately after the start tag of a FIELDSET element. Both IE & NS boosts the attractiveness of this element by automatically drawing a rule embedding the legend tags around the form elements within each FIELDSET back to the legend. If you'd rather have the box cinch up around the visible form elements, you have to set the width with a style sheet.
    E.G.
    <form method="post" action=" ">
    <fieldset>
    <legend>
    Personal Information</legend>
    <<<<<<<<<<Other Input>>>>>>>>>>
    </fieldset>
    </form
    >

    Personal InformationName:

    Address:

    Postcode:

    <fieldset style="font-family: Comic Sans MS, Georgia, Times New Roman; font-size: 20px; font-weight: bold; color:#993333; width:300px; border-color:red; border-width:10px; border-style:outset">

    Other InformationMaleFemale
    Are you married?YesNo

    Attributes: id, class, style, title, lang, xml:lang, dir.

    Back to Menu.


    CU
    May the God of your choice help your spirit to fly like the eagle.

     

     

    BlueBar.gif


                  Visitor N°
                   
    Free Text Counter.
    Counter added 4/02/2014.

     

    Top