• Page Layout How-To

Page Layout How-To

• Main index pages
• Sub index pages
• Pages with anchor tags
• Headings
• Tables

---

Main Index Pages

Main index pages display the topics below each main topic. The listings are laid out in two columns using the div tag and left and right classes.

Each main topic uses a heading 2 <h2> and follows with an unordered list <ul> and list items <li>. Be sure to close all your tags.

Example:

Code:

<div class="left">
<h2><a href="<%? Objects("health_index").URL;%>">Health</a></h2>
<ul>
<li>Getting Covered</li>
<li>Medical Program</li>
<li>Dental Program</li>
<li>Disability Program</li>
<li>Group Term Life Insurance</li>
<li>Health & Wellness Resources</li>
<li>Vision Discount Program</li>
<li>How Claims Are Paid</li>
<li>COBRA - Continuing Coverage</li>
</ul>
<h2><a href="<%? Objects("wealth_index").URL;%>">Wealth</a></h2>
<ul>
<li>Savings and Retirement Plan (SARP)</li>
<li>Associate Stock Purchase Plan (ASPP)</li>
</ul>
</div>
<div class="right">
<h2><a href="<%? Objects("lifestyles_index").URL;%>">Lifestyle</a></h2>
<ul>
<li>Family Resources</li>
<li>Associate Merchandise Discount</li>
<li>Home Office Flex Time</li>
<li>Time Off</li>
<li>Leaves of Absence</li>
<li>Financial Resources</li>
</ul>
</div>

---

Sub Index Pages

Sub index pages display the sub-topics below each topic. The lisitings are laid out in a two column table.

Each main topic uses a heading 3 <h3> and follows with an unordered list <ul> and list items <li>. Be sure to close all your tags.

Unlike the Main Index pages the headings are not links, however the topics are links.

Example:

Code:

<div class="left">
<h2>Family Resources</h2>
<ul>
<li><a href="<%? Objects("adoptionassistance").URL;%>#CE">Adoption Assistance</a></li>
<li><a href="<%? Objects("childcareresourceohioaa").URL;%>#Elig">Childcare Resources</a></li>
</ul>
<h2>Home Office Flex Time</h2>
<ul>
<li><a href="<%? Objects("flextime").URL;%>#1">Description of Flex Time</a></li>
<li><a href="<%? Objects("flextime").URL;%>#2">How Flex Works</a></li>
<li><a href="<%? Objects("flextime").URL;%>#3">How To Get Started</a></li>
</ul>
<h2>Time Off</h2>
<ul>
<li><a href="<%? Objects("holidays").URL;%>">Holidays</a></li>
<li><a href="<%? Objects("pto").URL;%>">Paid Time Off</a></li>
</ul>
<h2>Financial Resources</h2>
<ul>
<li><a href="<%? Objects("campusdoor").URL;%>#1">The Campus Door Education Program</a></li>
<li><a href="<%? Objects("tuitionreimbursement").URL;%>#3">Tuition Assistance</a></li>
<li><a href="<%? Objects("youdecide_1_1").URL;%>#2">YouDecide</a></li>
</ul>
</div>
<div class="right">
<h2>Associate Merchandise Discount</h2>
<ul>
<li><a href="<%? Objects("associatediscounts").URL;%>#AD">Amount of Discount & Service Requirements</a></li>
<li><a href="<%? Objects("associatediscounts").URL;%>#DW">How Your Discount Works</a></li>
</ul>
<h2>Travel Life Insurance</h2>
<ul>
<li><a href="<%? Objects("companytravel").URL;%>#About">About The Program</a></li>
<li><a href="<%? Objects("companytravel").URL;%>#Bene">Benefit Amount</a></li>
</ul>
<h2>Leaves of Absence</h2>
<ul>
<li><a href="<%? Objects("requestleave").URL;%>">Requesting a Leave</a></li>
<li><a href="<%? Objects("typesofleave").URL;%>">Types of Leave</a></li>
<li><a href="<%? Objects("fmla").URL;%>">FamilyMedical Leave Act (FMLA)</a></li>
<li><a href="<%? Objects("keepbenefitswhilegone").URL;% & >">Maintaining Your Benefits While You're Gone</a></li>
<li><a href="<%? Objects("returnfromleave").URL;%>">Returning To Work From A Leave</a></li>
</ul>
</div>

---

Pages with anchor tags

The anchor list is made up of an unordered list <ul> and list items <li>. The list is followed by a horizontal rule <hr />. Be sure to close all your tags.

Example:

• Coverage
• Eligibility and Enrollment
• Tax Implications of Benefits

---

Code:

<ul>
<li><a href="#coverage">Coverage</a></li>
<li><a href="#eligibility">Eligibility and Enrollment</a></li>
<li><a href="#tax">Tax Implications of Benefits</a></li>
</ul>
<hr />

---

Headings

Use heading tags to separate portions of content on the page. Heading 2 <h2> is used for the main sections and heading 3 <h3> for sub sections. Be sure to close all your tags.

Example:

This is an h2 heading

This is an h3 heading

Code:

<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>

---

Tables

Tables are constructed using basic table tags: table <table>, table row <tr>, table heading <th> and table data <td>.

Use the summary attribute inside the table <table> tag to provide additional information to users that require a screen reader:

<table summary="This table contains information about...">

The caption tag <caption> is optional but is encouraged. Use the caption as a title for the table:

<caption>Amount of Discount</caption>

Use table heading tags <th> for the headings at the top of the table. The remainder of the table should use table data tags <td>.

Include the scope attribute inside the th tags <th> to enable screen readers to speak the header and data in the proper order:

<th scope="col">Length of Service

Use <th scope="col"> for columns and <th scope="row"> for rows.

Be sure to close all your tags.

Example:

Amount of Discount

Length of Service	Part-Time	Full-Time
At hire	20%	20%
60th day	30%	40%

Code:

<table summary="This table outlines the discount percentage you will receive as an employee of the Limited.">
<caption>Amount of Discount</caption>
<tr>
<th scope="col">Length of Service</th>
<th scope="col">Part-Time</th>
<th scope="col">Full-Time</th>
</tr>
<tr>
<td>At hire</td>
<td>20%</td>
<td>20%</td>
</tr>
<tr>
<td>60th day</td>
<td>30%</td>
<td>40%</td>
</tr>
</table>