Using Custom Tags in Internet Explorer

  • Article

Microsoft Internet Explorer 4.0 introduced support for custom properties in an HTML document. Also known as expandos (derived from the Dynamic HTML expando property), custom properties allow Web authors to assign values to arbitrarily-defined properties and set or retrieve them as regular properties of DHTML objects. Beginning with Internet Explorer 5, Web authors can start using custom tags in an HTML document as well.

This article discusses the benefits of defining custom tags in a document, as well as the details involved in using them on a page.

  • Why Use Custom Tags? 
  • Declaring a Namespace 
  • Applying Behaviors to Custom Tags 
  • Related Topics 

Why Use Custom Tags?

Custom tags allow a Web author to introduce structure to a document while associating style with that structure. For example, in the absence of a predefined <JUSTIFY> tag in HTML that justifies the contained text within a specified width, you could define your own <JUSTIFY> tag in your document as follows:

<HTML XMLNS:MY>
<STYLE>
@media all {
   MY\:JUSTIFY  { text-align:justify; width:500 }
}   
</STYLE>

Every block of text that you then want to appear justified within a section in your document can simply be wrapped in <MY:JUSTIFY> tags as follows:

<MY:JUSTIFY>
   This paragraph demonstrates sample usage of the custom MY:JUSTIFY tag in a document. 
   By wrapping the paragraph in start and end MY:JUSTIFY tags, the contained
   text is justified within the specified width. Try resizing the window to verify that the
   content is justified within a 500-pixel width. And don't forget to right-click anywhere on the
   window and "View Source".
</MY:JUSTIFY>

Note  

The use of the XMLNS attribute in the preceding sample code defines a namespace for the custom tag, and is discussed further in the next section. More information on the @media syntax can be found in the Cascading Style Sheets, Level 2 (CSS2) Specification.

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/dhtml/customtags/justify.htm

Declaring a Namespace

Windows Internet Explorer's support for custom tags on an HTML page requires that a namespace be defined for the tag. Otherwise, the custom tag is treated as an unknown tag when the document is parsed. Although navigating to a page with an unknown tag in Internet Explorer does not result in an error, unknown tags have the disadvantage of not being able to contain other tags, nor can behaviors be applied to them.

To declare a namespace, use the XMLNS attribute of the HTML element, as follows:

<HTML XMLNS:MY>

It is also possible to define multiple namespaces on a single html tag, as shown in the following example:

<HTML XMLNS:MyNS1 XMLNS:MyNS2="www.microsoft.com">

Once the namespace is defined, it is used as a prefix to the custom tag, as shown in the example above with the <MY:JUSTIFY> tag.

Note  

This namespace declaration mechanism supported by Internet Explorer is based on the W3C Namespaces in XML.

Applying Behaviors to Custom Tags

Custom tags become much more interesting when applied with a DHTML behavior. Introduction to DHTML Behaviors (or behaviors) are applied to elements on a page, the same way styles are, using cascading style sheets (CSS) attributes. More specifically, the proposed CSS behavior attribute allows a Web author to specify the location of the behavior and apply that behavior to an element on a page.

Using DHTML in Internet Explorer 4.0.0, it is possible to create simple animated effects, such as flying text, by manipulating the position of elements on a page over time. Beginning with Internet Explorer 5, this functionality can be encapsulated in a behavior, applied to a custom <InetSDK:FLY> tag, and wrapped around blocks of text on a page. This can be applied to cause text to fly from various directions.

The following example demonstrates how a behavior can be applied to a custom FLY tag:

<HTML XMLNS:InetSDK >
<HEAD>
<STYLE>
   @media all {         
      InetSDK\:FLY  { behavior: url(fly.htc); position: relative }
   }            
</STYLE>
</HEAD>
<H1>Flying Text</H1>
<HR SIZE="1" />
<UL>
   <LI CLASS="yellow">
      <InetSDK:FLY DELAY="1000" FROM="top">
         Use Dynamic HTML to differentiate your content and create compelling Web sites.
      </InetSDK:FLY>
   </LI>
   <LI CLASS="yellow">
      <InetSDK:FLY DELAY="2000" FROM="right">
         Use the Document Object Model (DOM) to create interactive documents.
      </InetSDK:FLY>
   </LI>
   <InetSDK:FLY DELAY="3000" FROM="bottom">
      <UL>
        <LI CLASS="white">Interact with the user through the event model.</LI>
        <LI CLASS="white">Interactively change the appearance of the document with dynamic styles
           and dynamic content.</LI>
        <LI CLASS="white">Take precise control over your layout with CSS positioning.</LI>
      </UL>
   </InetSDK:FLY>   
</UL>
:
</HTML>

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/dhtml/CustomTags/CustomFlying.htm