“Do I need to learn HTML or CSS to be an instructional designer?” is a question I hear often. The short answer is no, you don’t, but that knowledge (and JavaScript) definitely comes in handy with e-learning development. I’ve been working with HTML for close to 30 years (I know!). One of my favorite things about working with HTML is the ability to impact the look and design of a web app. I’ve decided to write a series on HTML basics because it is becoming much more useful in Instructional Design. Be on the lookout for additional articles in this series.
HTML comes in handy if you ever need to understand or modify the look of your web-based learning content.
This article will only cover what is need to get started. I’ll cover syntax and rendering in future articles.
What is HTML?
HTML stands for Hypertext Markup Language. A markup languages control the structure (layout), style, and formatting to control a document via syntactical tags. HTML is one of the most popular markup languages, and the primary language of the web (used to render webpages). HTML5 is the latest version of HTML that added additional native media support and interactivity. XML (Extensible Markup Language) is another popular markup language that’s used as a framework to build other markup languages.
In this article, I’ll briefly cover some basics of HTML5. Before we begin, there are so many great resources and references online. Two of my favorites are W3C Schools and Stack Overflow.
Editors
There are at least two ways you can create HTML code. The first is through a WYSIWYG (wiz’-ee-wig) editor. This stands for “What You See Is What You Get”. These allow you to modify through an interface that controls the displays the real-time look of the page, while giving access to modify the HTML that builds the rendering. There are not my favorite because they often add extra and unnecessary HTML.
My preferred method is via a text editor. The plainer, the better, lol! Plain text editors allow you to totally control what markup contributes to the HTML, without adding additional HTML. I use a Mac (for most things). On a Mac, there are several options. TextEdit is the pre-installed option, but I use Sublime Text. All of its features are available for free, and it comes with some useful features such as syntax highlighting. On Windows, Notepad is pre-installed. When I was a Windows user, downloaded the free text editor Notepad++. Notepad++ also has syntax highlighting. I’ll be covering using HTML from a text editor only (not a WYSIWYG).
Getting Started
Let’s also talk about some tools you’ll need before you get started:
- A text editor. You can definitely use one of the ones mentioned above, or find the one that suits you best.
- A browser. Newer versions of browsers are preferred. Google Chrome, Mozilla Firefox and Microsoft Edge are the top three.
That’s it! After you have those items in place, you’re ready to start.
Stay tuned for the next lesson in this series, where I will cover rendering your first HTML page now that you have all the tools in place.