DEV: HTML - For anyone switching to Code or Source View

Many CMS platforms allow content editors to switch to a Code View where HTML can be edited directly. This guide covers the most common HTML elements used when editing page content. The goal is to produce clean, accessible HTML5 markup that works well with the site's existing templates and styles.

HTML5 Basics

Modern websites use HTML5, which focuses on semantic (meaningful) markup and accessibility. In most CMS platforms, the overall page structure (<html>, <head>, <body>) is handled by the system template, so content editors usually only work with the content portion of the page.

Focus on writing clean, structured markup inside the content area.

Headings

Headings organize content and help both users and screen readers understand page structure.

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>

Guidelines

• Most CMS templates already include the page <h1>, so your content usually starts with <h2>
• Use headings in order (h1 → h2 → h3)
• Do not skip levels
• Use headings for structure, not styling

Paragraphs

Use paragraphs for blocks of text.

<p>This is a paragraph of content.</p>

Avoid using line breaks (<br>) repeatedly to create spacing.

Lists

Lists are preferred over manual formatting because they are cleaner and more accessible.

Unordered List (bullets)

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Ordered List (numbered)

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Use ordered lists when sequence matters, such as instructions.

Links

Links allow users to navigate to other pages or resources.

<a href="https://example.com">Visit Example</a>

Accessibility tip: Make link text descriptive.

Good:

<a href="/policies">View the policy page</a>

Avoid:

<a href="/policies">Click here</a>

DIV vs SPAN

Both are containers for grouping content, but they behave differently.

DIV (Block Element)

Used to group sections of content.

<div>
  <p>Content grouped together.</p>
</div>

• Starts on a new line
• Used for layout or grouping content blocks

SPAN (Inline Element)

Used to style or mark part of text.

<p>This is a <span>highlighted</span> word.</p>

• Does not start a new line
• Used inside text

Images

Images should always include alternative text for accessibility.

<img src="image.jpg" alt="Students studying in a library">

The alt text describes the image for screen readers.

Accessibility and Semantic HTML

Use HTML elements that describe the meaning of the content, not just how it looks.

Examples:

Semantic HTML improves accessibility and search engine readability.

Best Practices

• Use HTML5 semantic elements whenever possible
• Keep markup simple and clean
• Use headings to structure content
• Use lists instead of manually typed bullets or numbers
• Always include alt text for images (unless it is decorative i.e. not contributing to understanding or tone of content)
• Use descriptive link text
• Avoid unnecessary <div> or <span> elements
• Let the CMS styling control appearance

Cleaning Up Pasted Content

Content pasted from Microsoft Word, Google Docs, or websites often contains hidden formatting and unnecessary HTML.

Best Practice

1. Paste content as plain text when possible.
2. Reapply formatting using clean HTML.

Common Issues

Pasted content may include:

• Inline styles (style="font-size:14px")
• Word-specific markup
• Excess <span> tags
• Empty paragraphs

Example of messy pasted HTML:

<p style="font-size:14px;"><span>This is content</span></p>

Clean version:

<p>This is content.</p>

Always review code in Code View and remove unnecessary tags or styling.

Summary

When editing HTML in a CMS:

• Focus on structure, not appearance
• Use semantic HTML5 elements
• Keep markup simple and accessible
• Clean up content pasted from external sources

Following these practices ensures your content works well with the site's design, remains accessible, and stays maintainable over time.

Resources

For information on additional HTML elements or advanced editing outside of a CMS, check out the following resources:

• W3C: HTML Semantic Elements
• W3C: HTML Tutorial

Make sure your content is accessible. Check out the following learning opportunities provided by St. Thomas:

• Digital Accessibility Basics Badge
  • About the Digital Accessibility Basics Badge
  • Self-enroll into the Digital Accessibility Basics Badge course
• Developing for Accessibility Badge
  • About the Developing for Accessibility Badge
  • Self-enroll into the Developing for Accessibility Badge course

When developing templates or code for a specific platform, be sure to consult its documentation. We have some platforms documented under Front End Development on the Developer and Cloud Tools page.