When I suggest to clients that their production teams should learn HTML, the response is often a chuckle, and something along the lines of, “Oh, we’re not programmers...” Luckily, with HTML, a little knowledge goes a long way. You can greatly improve your proficiency with tools like Wordpress, Joomla, or Dreamweaver with just a little HTML knowledge.
What you need
The good news is that everything you need to start coding in HTML is either included with your computer out of the box – or free. All you need is a browser (which, if you are reading this, you have) and a text editor. I recommend Komodo Edit (it’s free – download it here). If you would like to cut and paste the code examples in this article, find them in a text version here.
Getting started
Open your text editor and create a new document. Save the document as firstHtml.html. Type the following into your editor. (Don’t worry too much about spacing and the width of indentations. Those things usually don’t matter.)
<html> <head> <title>My First HTML Hand Coded Document</title> </head> <body> <p>This is my first HTML document that I created by writing my own code</p> </body> </html>
If you are using Komodo Edit, the result should look like Figure 1 when you are finished.
Figure 1. The Basic Document Structure as it appears in the free Komodo text editor.
What you just typed into your text editor is the basic document structure for a HTML document. (In truth, this is a slightly simplified form of the structure, and there are variations for the different HTML versions – 4.1, XHTML, and HTML5.)
See Table 1 for a breakdown of the elements in the basic document structure:
 |
This is known as the “root” element. All HTML appears between the opening and closing html tags |
 |
This part of the document includes information to identify the document to search engines and links to code written in CSS (Cascading Style Sheet) language and JavaScript |
 |
Appears in the title bar or tab bar on the browser, Used as the title for bookmarks on users’ machines and used to index the site in search engines |
 |
All of the content that appears in the actual browser window goes here. |
Marking up content
You will notice that within the element I placed a paragraph tag. This is a common text mark-up tag that is used to (you guessed it!) indicate paragraphs. When marking up content, you have to remember that you are trying to indicate the purpose of each element that you place on the page – not the look or design. Years ago, we used HTML alone to create the look and feel of pages, but now we use Cascading Style Sheets (CSS) for that, and HTML simply outlines the content. We often call this semantic HTML.
Let’s add some additional content between the opening and closing body tag of our HTML document:
<body> <h1>Hand Coding HTML</h1> <p>This is my first HTML document that I created by writing my own code</p> <p>HTML coding is best when used <strong>semantically</strong></p> <p><em>Anyone</em> can learn HTML coding!</p> </body>
You may want to load the HTML file you created in to a Web browser. It should look something like Figure 2.
Figure 2. Content added to the body with h1, strong, and em markup tags, displayed in the Firefox browser.
As you can see, the tags that we placed in the document body specify the styling for the text. However, it’s important to note that what you are seeing is the browser’s default style sheet and that we could change the appearance of any of these elements by using CSS. The tags that we used are among the most common. The h1 tag is the most important of the heading tags. The least important is the h6. Most documents won’t use heading levels beyond h3. The "strong" and "emphasis" tags are used to denote important text to be highlighted.
In Table 2, you'll find a few more tags you are likely to run into:
 |
Holds addresses |
 |
Caption photos or images |
 |
Place images |
 |
Creates anchors and links |
 |
Creates a block level area of screen real estate |
 |
Creates an inline area of screen real estate |
Check out the video in Figure 3 to see a demonstration of creating links and placing images. (It helps to play the video in Full Screen mode.)
Figure 3. Video Demonstration
Much more to learn
This article has only provided a quick introduction to HTML coding. I’ll cover more HTML in future articles.