Skip to main content

Mathematical Expressions & MathML in D2L

Your course content should be designed for all types of users.  This includes students with disabilities, and also students with different learning styles and in non-classroom environment.  For a online, self-directed primer on Universal Course Design, login to D2L and look under Self Registration (menu near the top, on the right).


MathML allows an individual to express mathematical equations visually in an HTML format that can be read by screen readers. The World Wide Web Consortium recommends MathML format for creating accessible mathematical equations, which should be used to ensure all users can interact with course equations.

In this tutorial, creation of MathML equations within D2L will be covered through:

Accessing the HTML Editor

To create mathematical equations, use D2L’s HTML Editor, which can be found in several tools (e.g., Content: Create a File, News, Dropbox, Discussions, Quizzes, Surveys, Manage Files: New File, etc.).

To create a new file with the HTML editor, click Course Tools on D2L’s navigation menu, and then click Manage Files in the drop down menu.

  Screenshot of Course Tools drop down menu. Manage Files is highlighted as the last item on the list.

Then select New File to open up a blank file with the HTML editor.

Screenshot of the Manage Files tab selected. New File is near the beginning of the menu items.

Accessing the Equation Editor

To access the equation editor in the HTML editing tools, click the Show All Components ellipsis (…) to display all tools.

Screenshot of the HTML editor. The Show all Components button is highlighted on the top right hand side.

Then select the Graphical equation icon.

Screenshot of the HTML Editor. A new row of tools are placed below the original row after the Show All Components button is clicked. The Graphical Equation icon is a Sigma and is located in the middle of this second row.

You may need to disable any pop-up blockers and install the most recent update of Java Runtime Environment from Sun Microsystems Inc. to ensure the graphical equation editor functions properly.

After opening the graphical editor, use the graphical equation toolbar to help construct your equations.

Click Insert when you are finished constructing your equation.

Screenshot of the Graphical Equation editor with the Quadratic formula in the entry field. The Insert button is highlighted on the bottom left.

Your equation is now complete. If you wish to view an equation you’ve created prior to saving, click the Preview button located at the bottom of the HTML editor.

Screenshot of HTML editor containing the previously created equation, now represented as a box containing a sigma within the HTML editor. The preview button is highlighted on the bottom right hand side.

Editing Equations with the Graphical Editor

To edit already existing equations with the graphical editor, right-click the equation you would like to change, then click Edit File from the drop-down menu.

Screenshot of right-click menu shown on an equation named the Quadratic formula. Edit File is highlighted as the first item on this list.

Click the Show All Components ellipsis to expand the toolbar.

Screenshot of the HTML editor. The Show all Components button is highlighted on the top right hand side.

You must first click your already-existing equation (place holder icon) to highlight it. Then click the Graphical equation button to open the equation.

Screenshot of the Sigma box representing the original equation is selected. The Graphical Equation button is highlighted in the middle of the second row of tools.

Make any necessary updates and click the Insert button to update your equation.

Screenshot of the Graphical Equation editor. The Quadratic Formula has been edited so that b and c have assigned values. Insert is highlighted on the bottom left.

Clicking the </> symbol will show the MathML code that was created while using the graphical editor.