Dressed Up
- Overview
- This is how you could create a tabbed interface using nothing but CSS and an HTML Definition List (DL). One of the important requirements I have is that I don't have any redundant elements (ie, not duplicating the tab titles). One of the bizarre "features" of DLs is that there's no really explicit way to link a term with a definition. The relationship between term and definition is implied by their positions in the list, but that sense of hierarchy seems somewhat fuzzy to me.
- How it Works
- Starting out with a basic DL, I've added a target attribute to the the DTs, then given each DD an ID that matches its corresponding DT's title. This helps to lend connectivity between the Term and the Definition and gives us hooks to let the two communicate with one another.
- Varieties
- Section 3 content
- Billing Info
- Section 4 content
- Legal Info
- Section 5 content
Naked
- Overview
- This is how you could create a tabbed interface using nothing but CSS and an HTML Definition List (DL). One of the important requirements I have is that I don't have any redundant elements (ie, not duplicating the tab titles). One of the bizarre "features" of DLs is that there's no really explicit way to link a term with a definition. The relationship between term and definition is implied by their positions in the list, but that sense of hierarchy seems somewhat fuzzy to me.
- How it Works
- Starting out with a basic DL, I've added a target attribute to the the DTs, then given each DD an ID that matches its corresponding DT's title. This helps to lend connectivity between the Term and the Definition and gives us hooks to let the two communicate with one another.
- Varieties
- Section 3 content
- Billing Info
- Section 4 content
- Legal Info
- Section 5 content