There are currently about 150 HTML element types used on the web, but to be successful in eLearning work, there are only 20 or so that you really need to know. Here are the most important ones with brief descriptions.

Tables

Tables are great for organizing and visualizing content (especially data), but they use a number of specific tags in specific orders, and there are some basic rules you must follow to make sure that tables are accessible and rendered properly. In addition, tables should not be used simply to visually layout content (e.g., to place two images side by side). Instead, you should use CSS properties for strictly visual manipulation.

The tags you should know for tables include the following:

Tables are laid out top to bottom, and then rows are laid out left to right. All tables should follow this basic structure:

<table>
  <caption>Here's the optional caption.</caption>
  <thead>
    <tr>
      <th></th>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Content 1A</td>
      <td>Content 1B</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Content 2A</td>
      <td>Content 2B</td>
    </tr>
  </tbody>
</table>

This would render as follows:

Visually, tables are laid out as follows:

Figure 1

Visual layout of a table from top-to-bottom and left-to-right

Figure 2

Visual layout of a table with tags

Here are a few things to notice:

1. The caption is included first but is actually rendered last. The position and style of the caption (first or last) depends on your CSS settings.
2. The first <th> element is intentionally left empty or blank but must be included so that the columns line up properly.
3. Instead of manually bolding or italicizing headers, we use the semantic <th> identifier instead of <td>. This communicates to indexers and screen readers that the heading applies to a column or row.

Lists

Lists all follow the same structure of defining the list with <ul> or <ol> tags and then including <li> tags for each list item within them. Here's an example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

This would render as follows:

• Apple
• Banana
• Orange

Changing the encapsulating <ul> to <ol> would make it numbered instead of bulleted, as follows:

1. Apple
2. Banana
3. Orange

To indent (or nest) lists, you simply include new lists within list items, as follows:

<ol>
  <li>Fruits
    <ol>
      <li>Apple</li>
      <li>Banana</li>
    </ol>
  </li>
  <li>Vegetables
    <ol>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ol>
  </li>
</ol>

This would render as follows:

1. Fruits
   1. Apple
   2. Banana
2. Vegetables
   1. Carrot
   2. Broccoli

Following this pattern, you can make infinitely nested lists as necessary. However, you should avoid including other tags within lists, such as <p>, <img>, etc. as they can quickly confuse lists and influence their structure and rendering.

Things to Avoid

Just as there are common HTML elements that everyone should know and use, there are also some that are typically misused. Here are some of the most important to be aware of with explanations.