By default, the HTML tag rendered for an XPage only includes an attribute for the page language (<html lang="en">). In this post I’ll show how to add additional attributes to the HTML tag rendered for the page.
Adding an Attribute
You can add an attribute to the HTML tag via the attrs property, which can be found in All Properties > basics > attrs. Click the plus (+) button to add an attribute and then specify the attribute name and value.
Here is what’s added to the page, below the tag:
<xp:this.attrs> <xp:attr name="myAttribute" value="myValue"></xp:attr> </xp:this.attrs>
When the page is loaded in the browser, you can see the attribute in the source:
<html lang="en" myAttribute="myValue">
Usage
One handy use for this is the HTML5 manifest attribute, which specifies the location for caching the page for offline and faster access.
Here’s an example:
<xp:this.attrs> <xp:attr name="manifest" value="myCache.appcache"></xp:attr> </xp:this.attrs>
Note: If you want to use an HTML5 feature, you need to change the HTML doctype to HTML5 on the Page Generation tab of the Xsp Properties design element.
Default doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5 doctype:
<!DOCTYPE html>
There are other global attributes that can also be applied to the HTML tag, such as id, style, dir (page direction – left to right or right to left), but there are other built-in properties for those on an XPage, so there isn’t a need to set them with a page-level attribute.
Note
In order to be applied to the HTML tag, the attribute must be defined at the XPage level. If added to a custom control, they’ll become attributes of a <div> tag.
