Documentation & Help

How can we help you?

Use Best Practices for HTML Markup

Use Best Practices for HTML Markup

HTML is the best format for creating accessible content. It is well supported and adaptable across browsers and devices. Also, the information in HTML markup helps assistive technologies, such as screen reader software, to provide information and functionality to people with vision impairments.
Most of the problem type templates in Xen.ed Studio conform to our recommended best practices in terms of good HTML markup. You can manually add appropriate HTML tagging even if it does not exist in the component template. Depending on the type of component you are adding to your course in Xen.ed Studio, the raw HTML data is available either automatically or by selecting the “Advanced Editor” or “HTML” views.
Keep the following guidelines in mind when you create HTML content.

Use HTML tags to describe the meaning of content, rather than changing its appearance. For example, you should tag a section title with the appropriate heading level (such as <h3>) rather than making the text appear like a heading by applying visual elements such as bold text and a larger font size. Format list items into a list rather than using images of bullets or indents. Using HTML to describe your content’s meaning is valuable for learners who use screen readers, which, for example, can read through all headings of a specific level or announce the number of items in a list.

Use HTML heading levels in sequential order to represent the structure of a document. Well-structured headings help learners and screen reader users to navigate a page and efficiently find what they are looking for.

In your HTML and problem components, be sure to apply only heading levels 2 through 6 to your content. Because the components that you add are part of a complete page, and heading level 1 is already in use by other elements on the page, any text with a heading 1 style within an HTML or problem component can interfere with the functionality of tools such as screen readers.

Use HTML list elements to group related items and make content easier to skim and read. HTML offers three kinds of lists.

Unordered lists, where the order of items is not important. Each item is marked with a bullet.

Ordered lists, where the order of items is important. Each item is listed with a number.

Definition lists, where each item is represented using term and description pairs (like a dictionary).

Use table elements to format information that works best in a grid format, and include descriptive row and column headings. Tag row and column headers with the <th> element so screen readers can effectively describe the content in the table, and include the appropriate scope attribute on the <th> element.

1. HTML Markup Resources

Creating Semantic Structure provides guidance on reflecting the semantic structure of a web page in the underlying markup (WebAIM).

Creating Accessible Tables provides specific guidance on creating data tables with the appropriate semantic structure so that screen readers can correctly present the information (WebAIM).

Was this article helpful?