custom Element | custom Object

DHTML, HTML, & CSS

previous page next page

currentStyle Object

dataTransfer Object

DHTML Objects

Web Workshop | DHTML, HTML & CSS

custom Element | custom Object

Represents a user-defined element.

HTML Syntax

<HTML XMLNS:namespace>
<HEAD>
<STYLE>
@media all {
    namespace\:elementname { css-attribute1:value1; [  css-attribute2:value2; ... ] }
}
</STYLE>
</HEAD>

<BODY>
<namespace:elementname>
</namespace:elementname>
</BODY>
</HTML>

Remarks

Microsoft® 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 they have behaviors applied to them.

To declare a namespace, use the XMLNS attribute of the HTML element.

When defining custom tags, you must enclose custom tag definitions within an @media wrapper.

Custom tags become much more interesting when applied with a DHTML behavior. dhtml behaviors (or behaviors) and styles are applied to elements on a page the same way—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.

The custom element is an inline element and requires a closing tag.

This element is available in HTML and script as of Internet Explorer 5.

Members

custom Members

Styles

Custom Styles

Example

This example uses the custom element to create custom RED, GREEN, and BLUE elements. These elements change the color of the text to red, green, or blue, depending on whether it is surrounded by RED, GREEN, or BLUE tags. In this example, the RED, GREEN, and BLUE tags are defined within a namespace called CUSTOMTAG.

Sample Code
<HTML XMLNS:CUSTOMTAG>
<HEAD>
<STYLE>
@media all {
    CUSTOMTAG\:RED { color: red; }
    CUSTOMTAG\:GREEN { color: green; }
    CUSTOMTAG\:BLUE { color: blue; }
}
</STYLE>
</HEAD>

<BODY>
<CUSTOMTAG:RED>
This text is red because it is enclosed within opening
and closing CUSTOMTAG:RED tags.
</CUSTOMTAG:RED>
<CUSTOMTAG:GREEN>
This text is green because it is enclosed within opening
and closing CUSTOMTAG:GREEN tags.
</CUSTOMTAG:GREEN>
<CUSTOMTAG:BLUE>
This text is blue because it is enclosed within opening
and closing CUSTOMTAG:BLUE tags.
</CUSTOMTAG:BLUE>
</BODY>
</HTML>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.