Advanced Search

Log In | Not a Member?

Contact ADC

< Previous PageNext Page > Hide TOC

HTML Extensions

Safari and the Web Kit implement a large subset of the HTML 4.01 Specification defined by the World Wide Web Consortium (W3C). There are other tags that are not defined by the Specification, but are extensions to it. These are listed here. If a tag is not listed here or in “Standard HTML” , it is not implemented by Safari and the Web Kit.

Contents:

Additional HTML Elements
Additional meta Tag Keys

Additional HTML Elements

canvas

Used to specify an advanced drawing region.

Example

<canvas id="identifer" height="value" width="value">

This tag specifies the location of an advanced drawing region. The canvas tag supports the same attributes as the <img> tag with the exception of the src attribute, which is ignored. You can specify any of the other attributes you would normally specify for an image. The identifier specified by id is required for Dashboard widgets, as are the height and width specified by height and width respectively.

embed

Used to embed an object within a page.

Example

<embed height ="value" width ="value" src/code="URL" > content </em>

The object, if visible, will be displayed at the location of the tag in the page, with a height specified by height and a width specified by width . The location of the object is given by the URL specified by src , or code if the applet is in a standard java class file.

keygen

Used to provide for public key generation for forms.

Example

<keygen name="name" challenge="challenge_value">

This tag places a form element on the page which will generate a 512, 1024, or 2048-bit public key as its value. The challenge specified by challenge and the public key are DER encoded and digitally signed with a private key (stored in a local database). The result is then encoded in base64 and is returned as the value of this field.

layer

Used to specify individual layers on a web page.

Example

<layer>content</layer>

This tag specifies an independent layer of content on a web page. This tag is not well-supported and should be replaced with <iframe> frames using CSS styling techniques in HTML 4.01 Transitional documents. In HTML 4.01 Strict documents, this tag should be replaced with <object> or <div>.

marquee

Used to specify a horizontally-scrolling block of content.

Example

<marquee>content</marquee>

This tag specifies a block of content that scrolls horizontally (by default, across 100% of the enclosing element). The content specified by content can be arbitrary—it is not limited to text alone. You can specify a custom width using CSS styling techniques.

nobr

Used to specify a region of content with no embedded line breaks.

Example

<nobr>content</nobr>

The content specified by content will be displayed with no line breaks. It is intended for blocks that must remain on one line.

noembed

Used to specify content to display to browsers that do not support embedded objects.

Example

<noembed>content</noembed>

nolayer

Used to specify content to display to browsers that do not support layers.

Example

<nolayer>content</nolayer>

plaintext

Represents a block of pre-formatted text.

Example

<plaintext>content</plaintext>

This tag preserves the formatting of the block of text specified by content, specifically line breaks and multiple spaces (normal text operation in Safari displays no difference between a single space and multiple consecutive spaces). In Safari, text enclosed in this element is also rendered in a monospace “tele-type” font. This also stops the interpretation of HTML tags, so they are rendered onscreen. This tag is not well-supported and may cause unintended behavior in Safari, consider using the <pre> tag instead.

wbr

Used to specify a block in which line breaks are permitted.

Example

<wbr>content</wbr>

Within a <nobr> block (in which line breaks are disabled), any content specified by content will be permitted to use line breaks. The line breaks themselves must still be requested using the <br> tag.

xmp

Represents a block of literal text.

Example

<xmp>content</xmp>

This tag preserves the formatting of the block of text specified by content, specifically line breaks, multiple spaces, and the greater-than and less-than symbols that accompany HTML tags. This block is also prefaced with a newline. In Safari, text enclosed in this element is also rendered in a monospace “tele-type” font. This tag is not well-supported and may cause unintended behavior in Safari, consider using the <pre> tag instead.

Additional meta Tag Keys

viewport

Changes the logical window size used when displaying a page on iPhone.

Example

<meta name = "viewport" content = "width = 320,

       initial-scale = 2.3, user-scalable = no">

Use the viewport meta key to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.

For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, you should set the width to the width of the device.

Table 1 describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements.

When referring to the dimensions of a device, you should use the constants described in Table 2 instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iPhone infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name = "viewport" content = "width = device-width">

To set the initial scale to 1.0, add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 1.0">

To set the initial scale and to turn off user scaling, add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

Use the Safari on iPhone console to help debug your webpages as described in Debugging. The console contains tips to help you choose viewport values—for example, it reminds you to use the constants when referring to the device width and height.

< Previous PageNext Page > Hide TOC

Did this document help you? Yes: Tell us what works for you. It’s good, but: Report typos, inaccuracies, and so forth. It wasn’t helpful: Tell us what would have helped.

	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. | Terms of use | Privacy Notice