Teaching Commons > Teaching Guides > Technology > Desire2Learn > Tools > More Tools > HTML Editor

HTML Editor

The HTML editor in D2L appears in a number of instances: when creating or editing new pages in Content , sending emails from the Classlist, creating and editing News items, and creating and editing widgets from the Course Home. In addition, it appears when adding instructions to Submission folders, Quizzes, and Discussion topics and forums. 

When using the HTML Editor, it is important to check for accessibility to ensure that content is accessible for all students. See the section on Using the Accessibility Checker for more information.

Insert a Link 

There area two types of Quicklinks in the HTML editor: external links to websites outside of the D2L course and relative links to other parts of the D2L course site.

Insert a Link to an External Website

  1. Select the location for the link within an html text box.
  2. Select the Insert Quicklink icon [A].
    insert quicklink icon
  3. A pop-up window will open. Select URL from the list.
  4. Enter the link in the “URL” field.
  5. Enter the text to be displayed in the "Title" field.
  6. Choose how the link should open. To ensure that the course is accessible to all users, the best practice is to choose "Same Frame."
  7. Select Insert.

Insert a Link to an Item in a Course Site

  1. Select the location for the link within the textbox.
  2. Select the Insert Quicklink icon.
  3. Choose the type of activity from the options on the list.
    • Select Submissions to select the folder from the list of existing folders.
    • Select Discussions to select a forum, then select the topic from the list of existing topics.
    • Select News to select the news item from the list of existing items.
    • Select Self-Enrollment Groups to select a group for students to enroll in from the list of existing self-enrollment group categories.

Insert an Image

  1. Select where to place the image within the HTML textbox.
  2. Select the Insert Image button [A].
    insert image icon
  3. Choose the image location:
    • If the image is on the computer, select the Upload button. Choose the file from the computer, then select Add.
    • If the image is located on the web, select URL. Enter or paste the web address for the image, then select Add button.
  4. To ensure that the image is accessible to all users enter descriptive text for your image. Only select "This image is decorative" if the image contains no information valuable to the student.
  5. Select OK.

Insert an Audio File

  1. Select the insert stuff icon [A].
    insert stuff icon
  2. Select My Computer.
  3. Select Choose File to choose the audio file.
  4. Note: If choosing a .m4a audio file, the audio with autoplay when the question is opened. To avoid possible issues with multiple audio files playing at once, the file can be converted to .mp3.

  5. Select Open to add the file.
  6. Select Upload.

Add Headings

  1. Highlight the text to format.
  2. Select the dropdown arrow next to "Paragraph," then select the heading style to apply. The text will be changed to this heading style.

Note: If the Paragraph dropdown menu is not immediately visible in the ribbon of options, select the icon to display all of its buttons.


Embed YouTube Videos and Other Content

These instructions are for embedding a video hosted on an external website, such as YouTube or Ooyala. This procedure can also be used to embed other content in D2L, such as Twitter feeds and calendars, as long as the site provides a secure embed code. To embed a local video file, refer to the Panopto guide.

  1. Copy the embed code from the host site.
  2. Select the Insert Stuff icon [A].
    insert stuff icon
  3. Choose Enter Embed Code.
  4. Paste the copied embed code.
  5. Select the Next button.
  6. Select the Insert button.

Note: An embed code is HTML code that can be added to the course site to display content stored in an external website. The embed code will be located in different places depending on which website is hosting the content. 


Check for Accessibility

The HTML Editor in D2L has an Accessibility Checker tool that can help determine if the content entered is accessible. The Accessibility Checker looks for potential issues with font size, colors, lists, and other formatting choices.

  1. Navigate to a tool that has the HTML editor.
  2. Open the HTML Editor by selecting to Edit an existing item or topic, or create a new one.
  3. Enter or edit content in the HTML Editor text box.
  4. If altering the font color, check for accessibility by looking for a green check mark or a red x [A].
    accessibility check for font color
  5. Once text has entered or edited, select the ellipses [A].
  6. Then, select the eye with check mark icon [B].
  7. The Accessibility Checker will indicate if there are accessibility issues or if the content is accessible [C].
    accessibility checker
  8. If the content is flagged with an accessibility issue, make any changes, then check again.