About
Content structure is the practice of organizing information on a web page so that it is sensible and accessible. Structuring page content is a critical best practice that governments must be aware of for content design and Americans with Disabilities Act (ADA) compliance.
Example
We created a structured content example page, and below are examples of properly-structured content using the ProudCity visual and text editors.
Technical details
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.”
When organizing text elements on a page, there are a few basic structure rules:
- h1, h2, h3, h4, h5, h6 (for page headings)
- p (for paragraphs)
- ol / ul (for ordered and unordered lists)
Do's and don'ts
Do
- Use only one h1 heading per page.
- Use <h2>, <h3>, <h4>, <h5>, <h6> headings for page section subheadings.
- Use the headings in correct order (h2 > h3 > h4) to create hierarchy (each of these can be used multiple times on a page - ideally no more than three per page).
- Use unordered lists (<ul>) to display a simple list.
- Use ordered lists (<ol>) items that have sequential steps.
Don't
- Use more than one h1 heading on a page.
- Use headings solely for aesthetic purposes.
- Use bold for page headings.
ProudCity and content structure
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.
Content structure and ProudCity
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:
Visual editor
Structured content in the ProudCity visual editor:
Text editor
Structured content in the ProudCity text editor:
