text: Markup guidelines for IBM WPS 6.1
  One of the goals in writing portlet markup is to provide a consistent, clean, and complete user interface. The portal server page is displayed using skins and themes defined by the portal designer or administrator. For portlets to appear integrated with an organization's portal or user's customized portal, they should generate markup that invokes the generic style classes for portlets, rather than using tags or attributes to specify colors, fonts, or other visual elements. See Portal style classes for more information.
  This section provides information for using HTML, WML, and cHTML markup in your portlet JSPs. Portlets are allowed to render only markup fragments, which are then assembled by the portlet framework for a complete page. Portlet output should contain complete, well-structured, and valid markup fragments. This helps to prevent the portlet's HTML code, for example, from corrupting the portal's aggregated HTML code. You should use a validation tool for your markup, such as the W3C HTML Validation Service or a tool from a markup editor.
  These guidelines are based on the JSP coding guidelines for standard portlets and for IBM portlets. See the corresponding best practices guide for the type of portlet you are developing on the WebSphere Portal Zone for complete information about portlet output guidelines.
  Use standard HTML. For the official HTML specification, see http://www.w3.org.
  Use only HTML fragments. Because portlets contribute to the content of a larger page, they should only provide HTML fragments and should not have , , or tags.
  Use only elements that can be rendered properly in an HTML table cell (...). Frames, for example, do not appear when inserted in a table.
  Make sure the fragments are well-formed to prevent unbalanced pages. Watch out for unterminated, extraneous, or improperly nested tags. The behavior of pages with improperly terminated tags is unpredictable.
  Avoid lengthy, complex HTML. Portlets share a page with others and the more content each portlet generates, the more the browser has to process before it can display anything.
  Use portlet classes in the portal server's style sheet, Styles.css. If you hard code the fonts and colors, the portlet's appearance will look out of place when the user changes the page style settings. Portal administrators and users can affect the appearance of the portal by changing the portal theme and the portlet skins. Portlets can pick up on style changes by using styles defined in the portal theme's cascading style sheet (Styles.css). For example, instead of decorating an element with the style attribute, refer to the theme's input class definition:
  Portlet style classes are marked with the following comment:
  /* Styles used in portlets
  This section of the style sheet has a mixture of classic IBM style classes and the standard WSRP style classes. When available, use the WSRP style classes, which are prepended with a portlet- prefix. See CSS Style Definitions in the WSRP specification.
  Do not use CSS for absolute positioning. This could defeat the portal features that allow users and administrators to place content on the page.
  Limit the size of the portlet output. Portlets contribute a portion of a larger page. The size of the JSPs (in terms of horizontal and vertical span) can determine how easily the portlet can fit on a page with multiple columns and other portlets. A large portlet forces other portlets off the screen and creates large scrolling regions, resulting in usability issues. Therefore, when designing a portlet's JSPs, avoid unnecessary layout elements, focus the portlet's view on the pertinent information, and consider whether the portlet is intended to be placed on pages with other portlets. In particular, take notice of image size, pre-formatted text (
  tag), and absolute widths on elements, such as tables.
  Use Java style comments instead of HTML style. HTML comments remain in the rendered content, adding to the document size and the amount of data that passes to the client. If you use Java style comments within your JSPs, instead, they are removed from the rendered source, along with the rest of the Java code. You must imbed these comments within scriptlets:
  <br />WSRP 2.0 v2 specification for CSS
  One of the goals of an aggregated page is a common     look-and-feel across the Portlets contained on that page     [A500].     This not only affects     the decorations around the Portlets, but also their content. Using a common CSS     style sheet for all Portlets, and defining a set of standard styles, provides     this common look-and-feel without requiring the Portlets to generate     Consumer-specific markup.          Portlets SHOULD use the CSS style definitions from     this specification in order to participate in a uniform display of their     content by various Consumers.          For markup types that support CSS stylesheets,     Consumers MUST supply a CSS stylesheet to the End-User's agent with definitions     for the classes defined in [Section 9.5]     of this specification.
  This section defines styles for a variety of logical units     in the markup.
  9.5.1 Links (Anchor)
  A custom CSS class is not defined for the  tag.     The Portlet should use the default classes when embedding anchor tags.
  9.5.2 Fonts
  The font style definitions affect the font attributes only     (i.e. font face, size, color, style, etc.).
  Style        Description        Example
  portlet-font                 Font attributes for the "normal" fragment font. Used for         the display of non-accentuated information.              Normal Text
  portlet-font-dim                 Font attributes similar to the portlet-font but the color is lighter.              Dim Text
  If a Portlet author wants a certain font type to be larger     or smaller, they should indicate this using a relative size.
  9.5.3 Messages
  Message style definitions affect the rendering of a paragraph     (i.e. alignment, borders, background color, etc.) as well as text attributes.
  portlet-msg-status         Status of the current operation.        Progress: 80%
  portlet-msg-info         Help messages, general additional information, etc.        Info about ...
  portlet-msg-error         Error messages.        Portlet not available
  portlet-msg-alert        Warning messages.        Timeout occurred, try again later
  portlet-msg-success        Verification of the successful completion of a task.        Operation completed successfully
  9.5.4 Sections
  Section style definitions affect the rendering of markup     sections such as div and span (i.e. alignment, borders, background color, etc.)     as well as their text attributes.
  Style        Description
  portlet-section-header        Section header
  portlet-section-body        Normal text
  portlet-section-alternate        Text in every other row in the section
  portlet-section-selected        Text in a selected range
  portlet-section-subheader        Text of a subheading
  portlet-section-footer        Section footer
  portlet-section-text                 Text that belongs to the section but does not fall in one         of the other categories (e.g. explanatory or help text that is associated         with the section).
  9.5.5 Tables
  Table style definitions     affect the rendering (i.e. alignment, borders, background color, etc.) as well     as their text attributes.
  portlet-table-header        Table header
  portlet-table-body        Normal text in a table cell
  portlet-table-alternate        Text in every other row in the table
  portlet-table-selected        Text in a selected cell range
  portlet-table-subheader        Text of a subheading
  portlet-table-footer        Table footer
  portlet-table-text                 Text that belongs to the table but does not fall in one         of the other categories (e.g. explanatory or help text that is associated         with the table).
  9.5.6 Forms
  portlet-form-label                 Text used for the descriptive label of         the whole form (not the labels for fields
  portlet-form-input-field        Text of the user-input in an input field
  portlet-form-button        Text on a button
  portlet-icon-label        Text that appears beside a context dependent action icon
  portlet-dlg-icon-label        Text that appears beside a "standard" icon (e.g. Ok, or Cancel)
  portlet-form-field-label                 Text that appears beside a form field         (e.g. input fields, checkboxes, etc.)
  portlet-form-field                 Text for a field which is not input field         (e.g. checkboxes, etc)
  9.5.7 Menus
  Menu styles define the     look-and-feel of the text and background of a menu structure. This structure     may be embedded in the aggregated page or may appear as a context sensitive     popup menu.
  portlet-menu        General menu settings such as background color, margins, etc
  portlet-menu-item        Normal, unselected menu item
  portlet-menu-item-selected        Selected menu item
  portlet-menu-item-hover        Normal, unselected menu item when the                user's pointer (typically a              mouse)        hovers over it
  portlet-menu-item-hover-selected        Selected menu item when the       user's pointer       hovers over it
  portlet-menu-cascade        General sub-menu settings such as background color, margins, etc
  portlet-menu-cascade-item        A normal, unselected sub-menu item
  portlet-menu-cascade-item-selected        Selected sub-menu item
  portlet-menu-cascade-item-hover        Normal, unselected sub-menu item when the       user's pointer       hovers over it
  portlet-menu-cascade-item-hover-selected        Selected sub-menu item when the       user's pointer       hovers over it
  portlet-menu-separator        Separator between menu items
  portlet-menu-cascade-separator        Separator between sub-menu items
  portlet-menu-content        Content for a normal, unselected menu or sub-menu item
  portlet-menu-content-selected        Content for an selected menu or sub-menu item
  portlet-menu-content-hover                 Content for an unselected menu or sub-menu item when the         user's pointer         hovers over it
  portlet-menu-content-hover-selected                 Content for a selected menu or sub-menu item when the         user's pointer         hovers over it
  portlet-menu-indicator        Indicator that a menu item has an associated sub-menu
  portlet-menu-indicator-selected        Indicator when the associated menu item is selected
  portlet-menu-indicator-hover        Indicator when the associated menu item has the         user's pointer         hover over it
  portlet-menu-indicator-hover-selected                 Indicator when the associated menu item is selected and has the         user's pointer         hover over it
  portlet-menu-description        Descriptive text for the menu (e.g. in a help context below the menu)