All of usecases below demonstrate desired rendering if else is not stated. Each LEGEND element has dark-gray background.
Usecase 1
A text is placed before LEGEND. Both the text and the LEGEND are wrapped in common DIV that has border. Size/height of the text is not known in advance.
- Issue:
- Current HTML5 spec does not allow LEGEND to be wrapped in DIV, but wrapper is needed to style legend as integral unit with an other element (common border in particular).
Usecase 2
A left-floated list is placed before LEGEND. Both the list and the LEGEND are wrapped in common DIV that has border. Size/width of the list is not known in advance.
- Issue:
- Current HTML5 spec does not allow LEGEND to be wrapped in DIV, but wrapper is needed to style legend as integral unit with an other element (common border in particular). Placing anything before LEGEND is currently not allowed by spec too, but this is needed to make the list floating while having common border for both the list and the LEGEND.
Usecase 3
A text is placed before (3.1) or after (3.2) LEGEND. Both the text and the LEGEND are wrapped in common DIV that has border and is displayed as table. The text and the LEGEND are inside cells of this table. Sizes of the text and the LEGEND are not known in advance.
- Issue:
- Current HTML5 spec does not allow LEGEND to be wrapped in DIV (nor placing anything before LEGEND), but wrapper is needed for styling element as table (at least one wrapper for table and another wrapper for table-cell).
3.1. Text is before LEGEND
3.2. Text is after LEGEND
Usecase 4
A long text is placed before LEGEND. Both the text and the LEGEND are wrapped in common DIV that has vertical scrollbar: the text and the LEGEND are scrolled together as integral unit.
- Issue:
- Current HTML5 spec does not allow LEGEND to be wrapped in DIV (nor placing anything before LEGEND), but wrapper is needed to style legend as integral unit with an other element (e.g., common border, common scrolling).
Usecase 5
5.1. LEGEND is direct child of FIELDSET (wrong rendering)
Crossbrowser styling of LEGEND is tricky. display: block
does not work. Positioning is beyond control. margin
rendering is inconsistent across browsers.
- Issue:
- Current HTML5 spec does not allow LEGEND to be wrapped in DIV, but wrapper is needed for crossbrowser styling of LEGEND (by styling wrapper instead of LEGEND itself).
5.2. LEGEND is wrapped in DIV (desired rendering)
Styling is applied to wrapper instead of LEGEND while LEGEND element is still used for semantics purposes. Styling works correctly and consistently across all modern browsers.
6. iLEGEND is part of form tip
Marking-up existing “credentials” string (contained in the “Please provide your credentials” tip) as legend is more DRY then adding legend that duplicates the “credentials” string already contained in the tip. (iLEGEND element has a color here purely for additional demonstrativeness.)
- Issue:
- Adding separate legend would violate DRY principle (legend string would be contained in two places: in legend and in tip).