8.1. Working with HTML Components

This section describes how to work with HTML components in Studio.

8.1.1. HTML Component Overview

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. Web browsers present HTML code in a more readable format.

When students see text and images in your course, they are seeing HTML code that is formatted and presented by their browsers. For more information about HTML, see Wikipedia.

8.1.1.1. HTML Components

HTML components are the basic building blocks of your course content. You use HTML components to add and format text, links, images, and more. You can work with your HTML components in a “visual” or WYSIWYG editor that hides the HTML code details, or in a “raw” editor that requires you to mark up your content.

Note

Review Developing Your Course and Use Best Practices for HTML Markup before you start working with HTML components.

8.1.2. Options for Editing HTML Components

You can use two different editing interfaces to work with an HTML component.

  • The Visual Editor

    With the visual editor you create, edit, and format content in a word processing-like interface, without using HTML markup directly. With the visual editor, you can more easily format your content, and add links and images. The visual editor includes an HTML option for you to review the HTML markup and make small formatting changes to your content. However, this HTML option does not provide the detailed control you can get with the raw HTML editor, and does not support custom formatting or scripts.

    If you add an HTML component and select Text, when you select Edit the visual editor opens by default.

  • The Raw HTML Editor

    If you prefer to mark up your content directly with HTML markup, you can use the raw HTML editor. If you need to include custom formatting or scripts in your content, you must use the raw HTML editor.

    If you add an HTML component and select Raw HTML, when you select Edit the raw HTML editor opens by default.

You can switch back and forth between these two editing interfaces at any time. For more information, see Set the Editor for an HTML Component.

Note

If you copy text from another source and paste it into either the visual or raw HTML editor, be sure to proofread the result carefully. Some applications automatically change quotation marks and apostrophes from the “straight” version to the “smart” or “curly” version. Both editors require “straight” quotation marks and apostrophes.

8.1.2.1. Set the Editor for an HTML Component

  1. Add or locate the HTML component in your course.
  2. Select Edit, and then select Settings.
  3. Select Visual or Raw.
  4. Select Save, and then reopen the component to use the new editor.

Warning

If you work with content in the raw HTML editor, then switch to the visual editor, custom HTML can be lost. If you need to create custom HTML, edX recommends that you start by using the visual editor, and then switch to the raw HTML editor when you are ready to add the custom HTML.

8.1.3. The Visual Editor

The visual editor provides a “what you see is what you get” (WYSIWYG) interface that allows you to format text by selecting options at the top of the editor.

The following image shows callouts for the editing options and is followed by descriptions.

An image of the visual editor toolbar, with numbers next to each of the formatting buttons.
  1. Choose a formatting style for the selected text, such as paragraph, preformatted (monospace), or a heading level. The heading levels available for an HTML component begin with Heading 3. Because HTML components are part of a complete page, and heading levels 1 and 2 are in use by other elements on the page, any text with a heading 1 or 2 style within an HTML component can interfere with the functionality of tools such as screen readers.
  2. Choose a font family for selected text, such as Arial, Courier New, or Times New Roman.
  3. Format the selected text in bold, or remove bolding. The editor inserts <strong> tags around the selected text.
  4. Format the selected text in italics, or remove italicization. The editor inserts <em> tags around the selected text.
  5. Underline the selected text, or remove underlining. The editor encloses the selected text in the tag <span style="text-decoration: underline;">.
  6. Apply a color to the selected text. The editor encloses the selected text in the tag <span style="color: color-hex-code;">.
  7. Format the selected text as a code block, or remove this formatting. The editor inserts <code> tags around the selected text, which is then displayed in a monospace font.
  8. Create a bulleted list, or remove this formatting. The editor inserts <ul> tags around the selected text, and encloses each paragraph in <li> tags.
  9. Create a numbered list, or remove this formatting. The editor inserts <ol> tags around the selected text, and encloses each paragraph in <li> tags.
  10. Decrease and increased the indentation of the selected paragraph.
  11. Format the selected paragraph as a blockquote. The editor inserts <blockquote> tags around the selected text, which is then displayed as a separate paragraph in a monospace font.
  12. Create a hypertext link from the selected text. See Add a Link in an HTML Component.
  13. Remove a hypertext link from the selected text.
  14. Insert an image at the cursor. See Add an Image to an HTML Component.
  15. Review the HTML markup.

Note

The visual editor is not available for course handouts.

8.1.3.1. Review HTML Markup in the Visual Editor

To review the HTML markup added to content in the visual editor, select HTML from the visual editor’s toolbar. The HTML source code editor opens.

The HTML source code editor for the visual editor in Studio.

You can edit text and the HTML markup in this editor. However, you cannot add custom styles or scripts in this editor. Use the raw HTML editor instead.

Select OK to return to the visual editor. The visual editor attempts to correct any problems with the markup that you entered. For example, if you do not provide a close paragraph tag, the editor adds the tag for you.

You can then continue working in the visual editor.

Warning

Selecting OK in the source code editor does not save your changes to the HTML component. To save your changes and close the component, select Save in the visual editor. If you select Cancel, the changes you made in the HTML source code editor are discarded.

8.1.4. The Raw HTML Editor

The raw HTML editor is a text editor. It does not offer a toolbar with formatting options.

The raw HTML editor.

When you use this editor, you must supply valid HTML. The raw HTML editor does not validate your HTML code. If you use this editor, you should thoroughly test the HTML content in your course.

Important

Because HTML components are part of a complete page, any text with a heading 1 or 2 style within an HTML component can interfere with the functionality of tools such as screen readers. Be sure that the headings you add to an HTML component are Heading 3 <h3> through Heading 6 <h6>, and not <h1> or <h2>.

8.1.5. HTML Component Templates

When you create an HTML component, you select from a list of templates.

The list of HTML Component templates in the Studio unit page.

The raw HTML template uses the raw HTML editor by default. All of the other templates use the visual editor by default. You can switch between the editors in any HTML component. For more information, see Set the Editor for an HTML Component.

8.1.6. Create an HTML Component

  1. Under Add New Component, select HTML.

  2. Select the template.

    The rest of these instructions assume that you selected Text, which creates an empty HTML component with the visual editor selected.

    An empty HTML component appears at the bottom of the unit.

  3. In the component, select Edit.

    The HTML component opens in the visual editor.

  4. Enter and format your content. You can review the HTML markup if needed.

    An image of the HTML component in the visual editor.
  5. Enter a display name for the component. The display name identifies the component for learners, so it should describe the content effectively. To do so, select Settings, and then enter text in the Display Name field.

    Each HTML template supplies a default display name. Changing the default to a unique, descriptive display name can help you and your learners identify course content quickly and accurately. If you delete the default display name and do not enter your own identifying name, the platform supplies “html” for you.

    To return to the visual editor, select Editor.

  6. Select Save.

When using the visual editor, you can also perform the following tasks.