DR. JENNIFER LYNN WAGNER

D2L Brightspace Tips: HTML Tricks

The D2L toolbar includes many options for formatting your text content, such as adding lists and indentations to your pages, similar to Microsoft Word or Google Docs. You do not necessarily need to know HTML to create HTML pages in D2L; however, it is worthwhile to learn the basics from sites such as W3Schools or MDN. I've included some lesser known HTML features below that you may want to use. You can either open the source code editor or use Insert Stuff and Enter Embed Code from the toolbar to type or paste in HTML code. Don't forget to check all of your course pages with the axe DevTools extension for any accessibility issues (such as insufficient color contrast or missing alt text) that need to be addressed before making your pages available to students.

Highlight Text

Use the <mark> </mark> element to highlight text in yellow. Similar to bold and italics, screen readers will not indicate that the text has a visual style, so you may also want to add the word Important before the highlighted passage.

This is <mark>yellow.</mark>

This is yellow.

Abbreviations with Titles on Hover

Surround abbreviations with the <abbr title=""> </abbr> element with the words in the title so that they will appear on hover and some screen readers will read them out.

<abbr title="Desire2Learn">D2L</abbr>

D2L

Start Ordered List at Different Number

If you want an ordered list to start with a number other than 1, specify the number as in <ol start="6">. (If you are using the HTML Content Templates, you will need to use a slightly different code with the number minus one, e.g. <ol style="counter-reset: item 5"> instead of <ol start="6">.)

  1. This list starts with six and increases in number.
  2. This is number seven.

You can also reverse the order of the numbers by using <ol reversed>.

  1. This list starts with two (because there are only two list items) and decreases in number.
  2. This is number one.

It is also possible to combine reversed and start as in <ol reversed start="4">.

  1. This list starts with four and decreases in number.
  2. This is number three.

Click to Reveal

Use <summary> </summary> within <details> </details> to add interactivity to your pages. The summary text will be visible on the page, and the text after the closing summary tag will be hidden until the title is clicked. 

<details>
  <summary>Clickable Title</summary>
  This text is hidden until title is clicked.
</details>
Clickable Title This text is hidden until title is clicked.

Jump to Any Location on Page

Add an ID attribute to any element on the page, and then link to that location by using # plus the ID for the href (URL). You can add the ID with the toolbar instead of going into the source code by clicking the element you want a link to jump to, clicking the + sign in the toolbar, choosing Attributes, and typing in a name for the ID. The source code will then look like the following:

<h1 id="top">Introduction</h1>

Then paste in the code for the link on the page using Insert Stuff and Enter Embed Code. For example: 

<a href="#top">Go to top of page</a>

Set All Links to Open in New Window

If you have several links on a page and want all of them to open in a new window, add <base target="_blank"> in the <head> element at the top of the source code. This will automatically add a blank target to every link on the page so that you will not need to set it individually for each link. (Beware when using this as it will also open your jump to any location on the page in a new window!)