Structure a Page

Introduction: The Building Blocks of a CU Denver Web Page

Well-organized written content is the fundamental element of good web design. When you start with quality content that is written to inspire visitors and drive them to action, the design process proceeds with less friction.

A strong CU Denver webpage has a clear beginning (Hero), middle (Components), and end (Call to Action). An on-page navigation menu (Anchor List) can help organize the page and orient visitors to the most important sections. Finally, Headings provide a foundational way to organize page content visually and semantically. 

Beginning – Hero

The Hero section is the beginning of the page. Depending on which Hero component you use, you can add different information to the Hero, but it all serves one purpose: to state what the page is about.  

• Heading (all Heros)
• Image (Deluxe and Basic)
• Subheading (Deluxe and Basic)
• Video (Deluxe)
• Eyebrow (Deluxe)
• Buttons (Deluxe)

The Hero is not decorative; it establishes the page’s purpose for users, search engines, and assistive technologies. So include text/imagery/video that supports the page’s purpose.

Choosing the appropriate Hero helps signal the relative importance of the page within your site’s structure. The three different types of Hero are:

• Hero: Deluxe
  • Use for your website’s homepage and, for large sites, your level one pages just below the homepage.
  • Use to signal that the page is of higher importance.
• Hero: Basic
  • Use for your website’s level two pages.  
  • Use to signal that the page is of average importance.
• Hero: Title Only
  • Use for your site’s lower-level pages.
  • Use to signal that the page is of lower importance. 

Middle – Components

The middle of your page – often called the body – will be made up of Components that you add below the Hero. Components are fully designed blocks that you add your content to.  

Components are designed to work together consistently and accessibly. Use the Component that best matches your content need rather than trying to force a layout.

For example, the Text component is what you use to place text for simple formatting. It uses a WYSIWYG (What You See Is What You Get) interface, which allows for adding bold, italics, hyperlinks, and more, including headings, which we discuss in more detail below.

Other components allow for text/image combinations, cards, links groups, large images, statistics, testimonials, and more. Learn about each of the Components available in CU Denver’s web platform on the Components & Layouts page.

End – Call to Action

Adding a call to action at the end of your page gives web visitors something to do. Common actions at the end of a webpage include:

• Complete a form (“Request Information” or “Apply Now”)
• Learn more about the topic, linking internally to related pages
• Next step, linking to a page where the visitor can act on what they’ve learned

If there is nothing for a visitor to do at the end of the page, consider whether the content supports a clear user need or goal. After all, people visit webpages for a reason. Make sure your webpage is useful to your visitors; they are on a journey, and the call to action is how you help them along their journey. 

Anchor List

The top and bottom of any CU Denver webpage has a main navigation and footer navigation, respectively, which help organize and promote important pages on the website. You can also add on-page navigation for just your current webpage by adding an Anchor List.  

Anchor Lists work best on longer pages with multiple sections. The items in an Anchor List are sticky, which means they have a fixed position at the top of the screen as visitors scroll down a page. This allows for easy navigation up and down a webpage. The Anchor List also lets you emphasize the sections that are important. 

Headings

Headings in web language are much like the headings used in word processor documents. They are the primary way to organize sections of content semantically. Well-written web content uses headings to break up the page into meaningful segments – topics and sub-topics – and create an information hierarchy.

There are six headings in the CU Denver web template (and in HTML in general):

• Heading 1 (h1)
  • Every webpage must have one and only one Heading 1. The Hero > Heading field is what generates the Heading 1 in our web platform. This is why every page has a required Hero at the top.
  • Heading 1 is the main topic of the page.
  • The Heading 1 of this page is “Structuring a Page.”
• Heading 2 (h2)
  • Webpages may have any number of Heading 2 elements. The Heading field of most components creates a Heading 2.
  • Heading 2 elements are the major subtopics of the page. Below are the Heading 2 elements on this page:
    • The Building Blocks of a CU Denver Web Page
    • Beginning – Hero
    • Middle – Components
    • End – Call to Action
    • Anchor List
    • Headings
    • Learn More
• Heading 3 (h3)
• Heading 4 (h4)
• Heading 5 (h5)
• Heading 6 (h6)

Because Headings are structural elements, do not skip from h1 to h3, or h2 to h5. Headings must be nested logically and sequentially.

Heading 1 and Heading 2 often come from the Heading field of the Components on your webpage. When you use a Text component, the first dropdown in the WYSIWYG menu has Heading 2 – Heading 6.  

All pages will have one Heading 1; most will have Heading 2. Heading 3 is common in page content, as a subtopic of whatever Heading 2 is immediately above it. Heading 4, Heading 5, and Heading 6 are used more rarely, but they are available if needed.  

Use Headings for organizing the content structure, as you would in a document outline, not for style; use bold, italics, and other styling options in the Text component WYSIWYG menu to style text. Learn more about text styling on the Text component page.

See the Headlines section of CU Denver’s Editorial Style Guide for more information about writing text for Headings.

Here is an example of nesting Headings in a structured way. Because we are in the “Headings” section of this page, and “Headings” is a Heading 2, the next Heading will be Heading 3, because it is a subtopic of “Headings.” Note that “Colorado” and “New Mexico” are both the same type of information, so they are both Heading 3, and so on.

Colorado

Denver

CU Denver

College of Liberal Arts and Sciences

New Mexico

Albuquerque

UNM

College of Arts & Sciences