A well-designed webpage is more than a collection of features, it’s a thoughtful composition of elements working together to communicate clearly and effectively.

This section introduces the core components available in the WordPress 2.0 theme, including typography, imagery, UI elements, and interactive modules. Each subpage outlines how to use these components along with best practices and guidelines to support consistency, accessibility, and seamless user experience.

Choosing webpage components

Selecting components that support the user experience will help you present content in a way that is clear, concise, and easy to understand. The most effective pages are built with intention and guided by your audience’s needs, your website’s goals, and the information you want to communicate. But sometimes fewer can be better, and components do not need to be used simply because they exist.

Student Affairs webpage components:

If you’re unsure which components to use or how to structure your content, SA Communications is here to help. We’re available to partner with you on everything from full website redesigns to targeted updates to ensure your content is both strategic and effective.

Whether building a new site or refining existing pages, your thoughtful consideration will elevate both the usability and impact of your website.

Heading hierarchy for webpages

Clear and structured heading hierarchy is also a key component for creating accessible and user-friendly webpages. Headings create a logical outline of the page, helping all users quickly scan content and understand how information is organized.

For users who rely on screen readers, headings are especially important. Assistive technologies use heading levels (H1 to H6) to navigate a page efficiently, similar to how sighted users visually scan bold section titles.

Why heading order matters

Creates a logical content infrastructure to organize the page for all users
Improves accessibility for screen readers and assistive technology
Enhances usability for users searching for specific content
Supports SEO by clearly defining content sections
Reduces cognitive load through organized information

Rules for webpage headings

Use one H1 per page for the primary title
Follow headings in sequential order: H2 → H3 → H4
Do not skip levels: e.g., don’t skip from H2 directly to H4
Do not use headings simply to make text appear larger
Keep headings concise and descriptive

When used correctly, heading hierarchy improves clarity for all users and ensures content meets accessibility standards.

Heading Level 1 (H1)

57px / Used once per page for the primary page title, the H1 defines the main topic and should clearly reflect the purpose of the page. In this WordPress theme, the page title is automatically styled as the H1 by default.

Heading Level 2 (H2)

40px / H2 headings are used to organize the main sections of your content, creating clear, high-level categories. Start with H2 in the content area, since the page title is automatically an H1. Avoid using H1 within the content itself.

Heading Level 3 (H3)

30px / Used for subsections within an H2 section. H3s help group related ideas and support scannability.

Heading Level 4 (H4)

26px / Used for supporting structure beneath H3s. Helpful for detailed breakdowns or layered content.

Heading Level 5 (H5)

22px / Used sparingly for deeper sub-sections when content requires additional structure.

Heading Level 6 (H6)

17px / Reserved for highly detailed or specialized content. Rarely needed on most standard webpages.

Webpage Components