Why Should Instructional Designers Have a Working Knowledge of HTML?

Almost anyone in the field of educational technology, but instructional designers in particular, can benefit from having at least a basic working knowledge of HTML. “HTML” stands for “Hypertext Markup Language,” and it is the backbone of almost every website or webpage on the internet (along with CSS and JavaScript, which are outside the scope of this post, except for some additional resources provided below). HTML is not a true programming language; it is a markup language, which means (roughly) that it is used to dictate what content will appear on a webpage and how that content will be displayed.

So why is it important that instructional designers in particular have a basic working knowledge of HTML? After all, most Learning Management Systems (such as Blackboard or Canvas) have their own built-in WYSIWYG (“What You See Is What You Get”) text editors or page editors, the intention of which is to enable rich text formatting and page-layout control without the need to author or edit the HTML for a page directly. While sticking to a WYSIWYG editor sounds great in principle, in practice there are at least two good reasons for supplementing your WYSIWYG editor skills with at least some basic HTML knowledge:

• Unbeknown to many users, the WYSIWYG editor in a typical Learning Management System produces HTML for the formatted content behind the scenes. Most WYSIWYG editors give users the power to view and edit this HTML directly, which can be useful for adding formatting beyond the scope of what the WYSIWYG editor can create on its own (such as adding hanging indents in APA references) or for fixing any formatting quirks introduced by the WYSIWYG editor itself.
• Copying content from another source, such as a Microsoft Word or Google Docs document, and pasting that content directly into the WYSIWYG editor can be problematic because this pasted text may carry rich formatting or other HTML artifacts that must be cleared or reformatted by hand. While most WYSIWYG editors have some form of a “Clear Formatting” button for this purpose, in practice it may still be necessary to manually remove HTML artifacts or embedded formatting from the HTML for the pasted text directly.

Introduction to HTML

As a markup language, HTML uses a system of embedded and nested “tags” to indicate how content should be displayed in a web browser. Most HTML tags come in pairs, with a beginning tag and an end tag, and the rules for that tag are applied to everything contained between them.

One of the simplest HTML tags is the paragraph tag, which tells the browser to display a piece of content as a paragraph. The beginning paragraph tag looks like this: <p>. And the end paragraph tag looks like this: </p>. (Notice the front slash, which distinguishes this tag as an end tag.) If you wanted the browser to display something as a paragraph, you would add the beginning tag <p> to the front of the paragraph and add the end tag </p> to the end of the paragraph:

A fundamental concept of HTML is that tags can be nested within each other. For example, suppose you wanted to make the word “paragraph” appear in bold in the first sentence of the previous example. You could accomplish this by adding the beginning and end tag for bold text (<b></b>) around that word:

Notice that the word “paragraph,” with its surrounding bold tags, is still completely contained within the beginning and end paragraph tags (which makes sense, as that word, bolded or otherwise, is still a part of the overall paragraph).

Let’s look at a slightly more complex example and introduce another new HTML tag into the mix. Suppose that you wanted to add a header (something like “Sample Heading”) immediately above the paragraph from the last example. To accomplish this, you could use a header tag like <h1></h1>, which is the Heading 1 tag. (Note that there are various levels of headers, such as Heading 2, Heading 3, Heading 4, and so on, but let’s stick to the Heading 1 tag for simplicity.) To add the text “Sample Heading” as a heading, put the heading text before the beginning paragraph tag (since the heading will come before the paragraph), and enclose the heading text in the beginning and end Header 1 tags:

Although there are many, many more HTML tags, the following are some of the basic HTML tags that a typical instructional designer may need to know (broken down by purpose):

Headings:

• Heading 1: <h1></h1>

• Heading 2: <h2></h2>

• Heading 3: <h3></h3>

• Heading 4: <h4></h4>

Text and Formatting:

• Paragraph: <p></p>
• Bold Text: <b></b>
• Important Text: <strong></strong>
• Italic Text: <i></i>
• Emphasized Text: <em></em>
• Subscripted Text: 
• Superscripted Text: 
• Block Quote: <blockquote></blockquote>
• Line Break: <br> (Note that the line break tag <br> does not need an end tag.)

Images:

Adding images with HTML is a bit more complicated, as it requires specifying additional information inside the HTML image tag <img>, such as the file name of the image and the image’s width and height. For example:

HTML Image Tag Example	Displayed in Browser as:
<img src=”latte_art.jpg” alt=”Latte Art” width=”240” height=”160”>

In this case, you can see that the image tag <img> itself contains additional information, known as attributes, required to properly display the image:

• src = “file name or url”
• alt = “alternative text displayed if the image can’t load and for screen readers for accessibility purposes”
• width = “image width in pixels”
• height = “image height in pixels”

Links:

Adding links (sometimes known as “hyperlinks”) in HTML is likewise a bit more complicated. Like the images tag, you must provide additional information, such as the destination URL, as attributes inside the <a> tag used to add a link:

Inside the beginning <a> tag, the “href” attribute is used to specify the destination URL for the link, while the text enclosed between the beginning <a> tag the the end </a> tag is the clickable text displayed in the browser.

Tables:

Being complex structures, tables can be fairly complicated to create and format in HTML, but let’s look at a very simple 2 x 2 table in HTML and see how it’s constructed. Larger tables, or tables with different dimensions can be constructed by adding additional rows and table cells as needed.

Here are the basic HTML tags needed to create a simple table:

• Table: <table></table>
• Table Row: <tr></tr>
• Header Cell: <th></th>
• Table/Data Cell: <td></td>

As you might anticipate, these HTML tags must be nested in each other in the correct way in order to properly form a table in HTML. For example, table rows are parts of tables, so the various table row tags <tr></tr> will go inside a <table></table> tag. Similarly, table cells are parts of a table row, and so the header cell tags <th></th> and the data cell tags <td></td> will go inside the table row <tr></tr> tag. Here is the HTML for a simple 2 x 2 table with a header row, including some placeholder text to make it easier for you to see how the whole table fits together:

<table>
<tr>
<th>Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
<table>

In this example, the outer <table></table> tags contain two different pairs of beginning/end table row tags <tr></tr>. Inside the first table row tag there are two pairs of beginning/end table header tags <th></th>; this says that the first row has two header cells, which means the overall table will have two columns. Inside the second table row tag there are two pairs of data cell tags <td></td> that define the data cells for the second table row.

Here is how the browser renders the complete table using the HTML table code example from above:

Lists:

In HTML there are two types of lists, ordered lists and unordered lists. Ordered lists are created with the <ol></ol> tag, and unordered lists are created with the <ul></ul> tag. Of course, any list, by definition, is made up of some number of listed items. These listed items are specified in HTML using the list item tag <li></li>. Because the list items are part of the list, the various pairs of list items tags <li></li> must appear between the beginning and end tags for an ordered list <ol></ol> or an unordered list <ul></ul>, as shown in the following examples:

There are various style options for the list item markers in ordered lists, which are accessed using the “type” attribute of the ordered list <ol> tag, as shown in this example:

The various options for the “type” attribute of ordered lists are:

• type=”1” (Numbers)
• type=”A” (Uppercase letters)
• type=”a” (Lowercase letters)
• type=”I” (Uppercase Roman numerals)
• type=”i” (Lowercase Roman numerals)

To create sub-bulleted or nested lists, simply place an another ordered list <ol></or> or unordered list </ul> inside a list item <li></li> tag of the outer list.

Additional Resources:

This brief overview of some HTML basics for instructional designers only scratches the surface. There are many additional HTML tags and features that make up the latest version of HTML, known as “HTML5.” Plus you can combine HTML with CSS (Cascading Style Sheets) to add more sophisticated styling to your content. And you can combine HTML with the JavaScript programming language to add interactivity and functionality to otherwise static HTML pages.

The following resources from W3Schools provide a complete reference guide and tutorial for HTML5, CSS, and JavaScript:

• HTML5 Tutorial from W3Schools
• CSS Tutorial from W3Schools
• JavaScript Tutorial from W3Schools

As an instructional designer, you certainly don’t need to be a master of HTML, CSS, or JavaScript. But a working knowledge of the basics of HTML can be an asset to your work in designing, building, or maintaining online courses and a valuable skill set to have from an employment standpoint across the entire educational technology industry.