A reference guide for Educators using Connect at TAFE Queensland.

Format HTML unit content

The HTML Editor integrates with all Connect tools that have HTML content creation capabilities. For example, the HTML Editor is available when you edit discussion topics, create custom instructions for assignment folders, and create content topics.

What are the basics of HTML Editor?

The HTML Editor has three options you can choose when viewing content:



Design view

The design view loads automatically when the HTML Editor is accessed. Use this view to quickly create and format content without needing any prior knowledge of HTML. Enter your content and use the available controls to apply formatting to your text, insert images and tables, and create links.

Source Editor view

Click the The source editor icon HTML Source Editor icon to display the source editor view. This view displays the code that structures and formats your content. Use this view if you have experience with HTML and prefer to author your content in HTML or want to apply styles from a cascading style sheet (CSS). If you have HTML-based content from another application, you can also copy and paste that code into the source editor view.


Use the view to display a preview of your HTML content in a new window. This allows you to preview content and ensure that it displays as expected prior to saving any changes.

Compliance to accessibility standards in HTML-authored content

An accessibility checker is now available within the HTML Editor for use within Content, Quizzes, Assignments, Calendar, Assignments, and any other tools where you can access the HTML Editor.

The accessibility checker is available on the HTML Editor bar. After you add content to the HTML Editor, you can click the checker to ensure that the HTML page meets conformance to WCAG and Section 508 accessibility standards.

The accessibility checker reviews content for the use of the following items:

The checker indicates if the content is free of accessibility issues, or offers suggestions to fix them.

Note that the accessibility checker does not check multiple files at the same time and does not check files that you have imported into a unit. Also be aware that the accessibility checker is only available for HTML files in the HTML Editor tool; it cannot be used to check any other file type, such as MS Word, PDF, PowerPoint, and so on.

Use the Accessibility Checker on HTML-authored content

The accessibility checker gives you a way to ensure that the content you author in the HTML Editor conforms to WCAG and Section 508 accessibility standards. The accessibility checker is available within the HTML Editor for use within Content, Quizzes, Assignments, Calendar, Assignments, Discussions and any other tools where a user can access the HTML Editor.

  1. Enter HTML content in the HTML Editor.
  2. Click htmlEditor_accessibility-checker to start the checker.
  3. If there are any compliance issues, read the report for suggestions on how to fix the issue.

About inserting equations in the HTML Editor

The Graphical Equation Editor enables users to insert mathematical equations within the HTML Editor. It supports the input of MathML and LaTeX, and includes a graphical editor where you can visually create equations. Depending on your org settings, you may not have access to all input methods.

The Graphical Equation Editor in Connect does not require Java support or have specific browser compatibility considerations.




MathML is a standard adopted by the World Wide Web Consortium (W3C). It uses XML to describe mathematical notation by capturing both its structure and content. This enables MathML to support visual display and assistive technology access.

As a standard, Connect stores and displays all equations in the MathML format, regardless of the format you use to enter equations. Connect uses the MathJax JavaScript engine to display MathML equations.

Go to to learn more about MathJax features.


LaTeX is a typesetting system based on TeX. It provides a text syntax for complex mathematical formulae. Connect stores equations entered in LaTeX format as MathML to ensure consistency and accessibility.

About the Graphical Equation Editor

The Graphical Equation Editor is a Javascript-based application in the HTML Editor tool that enables users to add graphical, MathML, and LaTeX equations to their content. The editor provides the necessary elements to construct equations quickly and easily. Each button in the editor tool bar opens a palette of related mathematical symbols. When equations are inserted into the HTML Editor, educators can see the equations inline while they are editing their work.

Before using the editor:

Tabs in the Graphical Equation Editor





General tab

  • Add a template for building equations.
  • Add and edit text in the equation using the Cut, Copy, Paste, Undo, Color, and other text editing function


Symbols tab

Add mathematical symbols to equations


Arrows tab

Update or add arrows to equations


Greek and letters tab

Update or add uppercase and lowercase Greek characters to equations


Matrices tab

Update or add matrices to equations


Scripts and layout tab

Add scripts or layouts to build equations


Decorations tab

Add fences such as brackets and vertical bars around text fields


Big operators tab

Update or add big operators to equations


Calculus tab

Add a template for building Calculus equations

Create an equation

  1. Navigate to the HTML Editor where you want to create an equation.
  2. From the Graphical equation drop-down list, do one of the following:
    • To insert a graphical equation, click Graphical equation.
    • To insert a MathML equation, click MathML equation.
    • To insert a LaTeX equation, click LaTeX equation.
  1. In the Insert Equation window, enter your equation.
  2. Click Insert.

Edit an equation

  1. Navigate to the unit item that contains the equation you want to edit.
  2. From the context menu of the unit item, click The edit icon Edit HTML.
  3. Inside the HTML Editor, click on the box with the The insert equation icon capital sigma sign.
  4. From the Graphical equation drop-down list, do one of the following:
    • To edit the equation using the graphical equation format, click Graphical equation.
    • To edit the equation using the MathML equation format, click MathML equation.
    • To edit the equation using the LaTeX equation format, click LaTeX equation.


  1. Make your changes.
  2. Click Insert > Update.