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. It is worthwhile to learn the basics, however, from sites such as W3Schools or MDN. I've included some lesser known HTML features below that you may want to use. It is recommended 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 them 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, use <ol start="">
with the number. (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">
.)
- This list starts with six.
- This is number seven.
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 do this 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. Then type the text for the link on the page, select the text, and add a link to the id name preceded by # instead of an actual URL. The code will look like the following:
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>
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 page. 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!)