Common HTML Elements

HTMLWeb Development

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.

TagNameDescriptionKey Attributes
Document-Level Tags
<head>Header (Machine)This header is invisible to users, includes metadata, loads necessary formatting for the page, and does other things behind the scenes.
<title>TitleThis is used in the header to set the title of the page to be shown in the browser tab.
<link>Linked FilesThis is used in the header to identify linked stylesheets that are shared between multiple pages.src="[link to the file]"
<script>JavaScriptThis is used in the header or in the body to include JavaScript code or to include an external Javascript file.src="[link to the file]"
<body>BodyThis is the main content area of a page.
Content-Level Tags
<article>ArticleWithin the body, this is the main organizer for content. For instance, if you have a list of blog posts, each post would be a separate article.
HeadingsHeadings are used to designate titles and subtitles in a page, with H1 being the highest level (e.g., the title of the page) and H6 being the lowest (e.g., a section title nested deeply below other sections).
<a>LinkA hyperlink to another page or section within a page.href="[link to the target]"
<nav>NavigationA navigation menu or area.
<p>ParagraphA paragraph of content.
<br />Break ReturnA hard break in content. This should typically only be used if you need to separate content within a paragraph, such as with a poem. Notice also that the tag is self-closing, so no content should be inside it.
<table>TableA content table (see Tables below).
<form>FormA form for accepting input from users.method="POST/GET"
<input>InputAccepts user-submitted content for a form (e.g., a textfield).value="[value]"
<button>ButtonAn interactive element (typically used with JavaScript) to change the page in some way.
<blockquote>BlockquoteAn indented paragraph of content.
<em>Emphasis or ItalicItalicizes content, making it slanted.
<strong>Strong or BoldBolds content, making it darker.
<img>ImageEmbeds an image file.src="[link to the file]"
<audio>AudioEmbeds an audio file.src="[link to the file]"
<video>VideoEmbeds a video file.src="[link to the file]"
ListA list of content, either Unordered (using bullets) or Ordered (using numbers).
These are used for exponents and scientific notation, such as E=mc2 (superscript) and H2O (subscript).


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:

<table>TableThis is the enclosing tag for the entire table.
<thead>HeaderThis encloses all of the header content for the table, such as labels for columns.
<tbody>BodyThis encloses the body content of the table.
<tr>RowThis encloses a row of cells.
<th>Cell HeadingThis is a heading cell.
<td>Cell ContentThis is a content cell.

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

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

This would render as follows:

Here's the optional caption.
Column AColumn B
Row 1Content 1AContent 1B
Row 2Content 2AContent 2B

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 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:


This would render as follows:

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:


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.

<iframe>IFrameThis embeds one page within another and is often used to embed external resources. It can be used properly, but it is often a security risk and poses problems for browsers because you cannot control the content within the frame.

* for layouts
TableTables are great for data, but sometimes people use them for laying out content (e.g., creating rows and columns of images). This can pose serious accessibility problems and should be avoided.
<span>SpanSpans have no semantic meaning but basically allow you to apply formatting to a chunk of content. They can be useful for visually adjusting content, but screen readers and other machine applications have difficulty making sense of them. They are also often used frequently for no reason, which makes the HTML messy and bloated.
<div>Division LayerSimilar to spans, divs have no semantic meaning, and though they can (and should) be used effectively in web development, most of the time eLearning and content developers don't need to use them.
<i>ItalicThe <em> tag is preferred to the <i> tag because it is more semantic. They appear the same to the reader.
<b>BoldThe <strong> tag is preferred to the <b> because it is more semantic.They appear the same to the reader.
style=""Style AttributeEditing the style attribute of an HTML element to change its formatting is not always bad, but if you are changing style attributes across multiple elements in the same way (e.g., making the text larger in multiple paragraph elements), then you should instead rely upon CSS.

This content is provided to you freely by EdTech Books.

Access it online or download it at