Including basic HTML tagging in eLearning content is an essential first step to creating well-organized content. It’s also a key building block of accessible content; assistive devices like screen readers rely on HTML tags to understand—and communicate to learners—the hierarchy and relationships between content elements. This article introduces 12 basic HTML tags that you should include with eLearning content.

Titles and headers

Most eLearning content features a title or headline. This should be treated as a level-1 header in HTML rather than as a title. Using a title tag in HTML is important when creating a web page, since the HTML title is used as an identifier for the page. SEO (search engine optimizer) engines and browsers use the title to find the page. But as far as eLearning content is concerned, the title is not important; it does not even appear on the body of the page!

The text that shows up as a headline or heading on the page is the level-1 header. Each page of content should have one—and only one—level-1 header.

Basic HTML tags

Most HTML tags travel in pairs: <command> begins an effect; adding a forward slash to the command: </command> ends it, whether the effect is emphasizing text, starting or ending a paragraph, or setting text as a headline or sub-header.

All text content should include these tags:


Header 1: The level-1 header serves as a title or headline for the page of content; place a </H1> tag—end header 1—at the end of the heading text.


Header 2: The level-2 header serves as a sub-head; place a </H2> tag—end header 2—at the end of the sub-heading text.


Body: The body tag is used for ordinary content—body text.


Paragraph: Body text can be divided into paragraphs using the <p> tag at the beginning and the </p>—the end paragraph tag—at the end of a paragraph.

Text might also include these tags:


Header 3: The level-3 header serves as a sub-sub-head; place a </H3> tag—end header 3—at the end of the sub-heading text.

<strong> or <em>

Emphasis: Browsers display <strong> as bold and <em> as italic. These tags also come in pairs: <strong> to begin the bolding and </strong> to end it. Likewise, <em> starts emphasis or italic text and </em> ends it.

<ol> or <ul>

Lists: An <ol> is an ordered—numbered—list; a <ul> is an unordered—bulleted—list. These work with the <li> tag. The last item on a list is followed by the </ol> or </ul> tag, ending the list.


List item: Each item on a list begins with the <li> tag and ends with the </li> tag. It’s possible to format the bullet or number or letter used for list items, but that’s beyond the scope of basic HTML.

<br />

Line break: The forced line break does not start a new paragraph or change formatting. There must be a space between the “br” and the forward slash. There is not an opening and closing line break tag; just the <br /> tag.


HTML and tables

Data tables can be very confusing to learners who use screen readers or otherwise access them in a nonvisual manner. Using correct tags helps the screen reading software sort out the relationships between data elements, but if used at all, tables are best kept very simple.

A table uses these HTML tags:


Table: The table command defines the next section of content, until the </table> tag, as a table.


Table row: Each new row is introduced with a <tr> tag and ends with a </tr> tag; the content between these tags is separated into cells.

<th> or <td>

Table heading or table data: Table heading text is bold and centered; table data text is not. The first row of a table should be a heading row. Each item is in one cell, encased in <th> and </th> or <td> and </td> tags.

Just the beginning…

These 12 tags are only the most basic HTML tags. Learn more at the HTML5 tutorial.

The good news, though, is that Word and most eLearning authoring tools automatically—invisibly—insert HTML tagging in eLearning content as the developer creates the content. This is especially true when developers use design templates to format eLearning content.