Ribbon

The ribbon itself, a band of tools along the top edge of your page, is created using <div> markup. All of the other elements of the ribbon are nested inside this main <div>, with the main elements being Tabs. Here is some simple markup with only one tab and one group and no controls to illlustrate how these are nested. Details for each element are below.

Sample markup for creating a ribbon

<div id="ribbon">
    <ul>
        <li><a href="#FirstTab">Add Tab Names Here</a></li>
    </ul>
    <div id="FirstTab">
        <ul>
            <li id="firstgroup">
                Add buttons, spans, divs, lists, or inputs here.
            </li>
        </ul>
    </div>
</div>

Tabs

Ribbon tabs are created using unordered list <ul> markup. Each line item <li> in the list contains a hyperlink with a pound sign # indicating that it leads to a section in the same page, in this case, a tab in our ribbon. The markup for two tabs inside a ribbon looks like this.

Sample markup for creating ribbon tabs

<div id="ribbon">
    <ul>
        <li><a href="#FirstTab">First Tab</a></li>
        <li><a href="#SecondTab">Second Tab</a></li>
    </ul>
    <div id="FirstTab">Tab groups go here.</div>
    <div id="SecondTab">Tab groups go here.</div>
</div>

Once we have links to our tabs in a list, we add the tabs themselves, each as a <div> element below the list, but still nested within the main ribbon <div> element. Each tab can contain its own set of groups.

Groups

Ribbon groups are created using unordered list <ul> markup. Each line item <li> is a group, and inside it, we nest the markup for all of the tools it contains, and below all of the tools, we provide text for the ribbon group title in a <div> element. The markup for two groups inside a ribbon tab looks like this.

Sample markup for creating ribbon groups

<div id="ribbon">
    <ul>
        <li><a href="#FirstTab">First Tab</a></li>
    </ul>
    <div id="FirstTab">
        <ul>
            <li id="FirstGroup">
                Buttons and dropdown lists go here.
                <div>First Group Title</div>
            </li>
            <li id="SecondGroup">
                Buttons and dropdown lists go here.
                <div>Second Group Title</div>
            </li>
        </ul>
    </div>
</div>