HTML Cleanup

Chris_Hofer
Community Coach
Community Coach
‎12-20-2018 10:35 AM
0
2755

When our Technical College moved from Pearson eCollege's LearningStudio LMS to Canvas, much of the course content we migrated kept the same HTML code from eCollege.  Sometimes, this included <font> tags, <span> tags, and other HTML elements that made our pages look different style-wise compared to how we currently build courses in Canvas.  (Using this handy tool that cesbrandt found for the Community, HTML Editor Syntax Highlighter, I've been able to more easily identify "junk" code that really isn't needed in our course pages.)  While you can certainly use website software (such as Adobe Dreamweaver) to clean up HTML code, I've found that there are some online HTML editors that work just as well.  I've been able to reduce the number of lines of HTML code significantly while keeping the general look and feel of the page the same.  For example, I've used this website:

Here are the steps:

  1. Edit the course page, and switch to the HTML Editor view.
  2. Copy and paste the HTML code from the Canvas page into the right side of the website listed above.  (You should see a preview of what it looks like on the left side.)
  3. Click the "Clean" button.
    • After you click "Clean", I've found that the above website will sometimes (but not always) insert an additional line of code at the bottom of the cleaned-up code.  Keep this in mind as you complete steps #4 and #5...as you will want to remove this line of code so that it does not display on the page of your Canvas course.
    • On this particular online HTML editor's website, there is also a gear icon next to the "Clean" button where you can select other elements to clean up.  For the purposes of this blog, however, I left everything at the default settings.
  4. Copy and paste the cleaned-up HTML code back into the HTML editor of your Canvas page.
  5. Return to the Rich Content Editor view to see if things look the way you want.  There may be some minor elements you may need to fix that were changed and/or removed.

You should now have a course page that has less code but still generally looks the same for you and your students.