Content structure basics for government websites

Posted on May 1, 2020


Structured content

Because government serves a wide constituency, structured content in web pages is critically important in addressing the needs of all website visitors. It is particularly important for presenting truly accessible web content.

While ProudCity addresses many content structure issues “behind the scenes,” whether you’re using the our visual or text editors, it’s important to understand the basics and best practices of structured content as you design your web pages.

Web content structure and HTML

Every web page on the internet is designed using a coding language called HyperText Markup Language (HTML). As MDN says, “one of HTML’s main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly.”

This is why structuring content with the correct headings is critical best practices that governments must be aware of for content design and Americans with Disabilities Act (ADA) compliance.

Basic HTML elements

When organizing text elements on a page, there are a few basic structure rules you may use:

  • h1, h2, h3, h4, h5, h6 (for page headings)
  • p (for paragraphs)
  • ol / ul (for ordered and unordered lists)

Content structure and ProudCity visual editor

HTML elements can be coded into the page using the text editor or easily created using the ProudCity visual editor. With the visual editor, you don’t need to know code to structure your content:

Structured content in the ProudCity visual editor

Content structure best practices

  • Heading 1: Used for your page title (one once per page)
  • Headings 2/3/4/5/6: Used for sections and subsections in the correct order (h2 > h3 > h4) to create hierarchy (each can be used multiple times on a page – ideally no more than three per page)
  • Paragraph: Text that accompanies the sections and subsections.

Examples

We created a structured content example page, and below are examples of properly-structured content using the ProudCity visual and text editors.

Visual editor

Structured content in the ProudCity visual editor:

Structured content in the ProudCity visual editor

Text editor

Structured content in the ProudCity text editor:

Structured content in the ProudCity text editor

Prioritize structured content

Prioritizing structured content — and separating it from design — helps you to adhere to best practices in accessibility and equally address the needs of all members of your community.

Close window