Putting HTML in your LMS

How to Insert Custom HTML into Moodle or Canvas Pages

Learning management systems like Moodle and Canvas let you paste raw HTML directly into a page. This supports accessible, semantic markup; makes it easy to reuse the same content across courses and semesters; allows content to display responsively on phones and tablets; and avoids forcing students to download files to their local machines just to view basic course information.

Pages live directly inside the course site, so links behave like links, content scrolls naturally in the browser, and materials roll over cleanly from one term to the next.

Video Overview

This guide walks through the process step by step for both platforms and highlights a few practical
tips shown in the video.

Before You Start

  • You already have text you want to place into a page, or HTML created elsewhere.
  • Your HTML does not rely on external JavaScript. Most LMS platforms block scripts.
  • Inline CSS is often allowed, but global <style> blocks may be stripped or ignored.

Moodle: Using the HTML Source Editor

  1. Open the course and turn editing on.
  2. Create or edit a Page.
  3. In the text editor, click View, then Source Code. (In some editors, this may appear as </>.)
  4. Paste your HTML directly into the source window.
  5. Click Save to return to the visual editor.
  6. Save and Display the page.

Fast Shortcut (Shown in the Video Above)

If you already have an HTML file, you can drag the file directly into the HTML source window. Moodle will automatically insert the contents. No copy-and-paste is required.

Notes for Moodle

  • Moodle may sanitize HTML on save. If something disappears, it was likely disallowed. Tags like <html>, <head>, or <body> are typically stripped and harmless.
  • Use semantic elements such as <section>, <nav>, <figure>, and properly ordered headings for accessibility.

Canvas: Using the HTML Editor

  1. Open the page, assignment, or discussion you want to edit.
  2. Click Edit.
  3. Click HTML Editor (the </> button).
  4. Paste your HTML into the editor pane.
  5. Click Save or Done.

Fast Shortcut (Also Works in Canvas)

As in Moodle, you can drag an HTML file directly into the HTML editor pane. Canvas will insert the HTML automatically.

Notes for Canvas

  • Canvas cleans HTML aggressively. Inline styles often survive; scripts do not.
  • Canvas may rewrite tags or attributes after saving. This is expected.

Why Pages Instead of Files?

  • Pages are responsive and easier to read on phones and tablets.
  • Links behave like links, without sending students to their Downloads folder.
  • Content remains inside the course site and rolls over cleanly between semesters.
  • HTML is easier to make accessible than most PDFs, and accessibility checkers work better on it.

What You Should and Should Not Paste

Safe to Paste

  • Headings (for example, <h2> through <h4>)
  • Paragraphs and lists
  • <div> and <section> containers
  • <a> links with clear, descriptive text
  • <img> elements with appropriate alt text
  • Embedded iframes from approved services (YouTube, Panopto, and similar)

Avoid

  • <script> tags
  • External CSS files
  • IDs that rely on global JavaScript
  • Overly complex nested tables for layout

Accessibility Tips (Strongly Recommended)

  • Use headings in order. Do not skip levels.
  • Always include alt text for images.
  • Do not rely on color alone to convey meaning.
  • Use descriptive link text instead of “click here.”
  • Run the LMS accessibility checker after saving the page.