'Just enough HTML to be dangerous'

• March 27, 2006
• James Skemp
• tutorials / guides

This time, we'll be covering the minimum HTML knowledge required to be truly dangerous. While an expanded understanding of HTML is not, per se, required, having at least some understanding will help in a number of ways. Of course, the more HTML you know, the less you rely on tools to do the work (which is a good thing, since we're not always able to use the tools that we're familar with).

The first thing we'll be discussing is how to apply formatting to text. Bold, italics or emphasis, and underline.

To make text bold, we'll use the <strong></strong> tags. If we want some text to be bold, we simply need to put it within these tags. For example, <strong>bold text </strong>, would display as bold text.

In HTML, and most Web-based programming languages, many items, in this case text, are defined by elements which contain either opened or closed tags. A closed tag is one that has a / within it. So, in the previous example we write an opening strong tag, some text, and then a closing strong tag. As we'll see later, some elements only consist of one closed tag.

For italics, we'll use the <em></em> tags. So, <em>italic text</em> displays as italic text.

For an underline, we use <u></u> tags. <u>underlined text</u> displays as underlined text. However, there's a very important point about underlined text. For the most part, you should stay away from using this element / these tags. Most of the newer Web standards do not allow the use of these tags, typically because underlined text should be used only for hyperlinks (or the appropriate citations). However, we won't go into the discussion of the correct way to show underlined text, at this point.

What if we want some text to be both bold and italic? We would simply place the text within both elements; <strong><em>bold and italic</em></strong>. Note that you should close inner elements before you close outer ones. So, <strong><em>bold and italic</strong></em> would not be correct. So, if you wanted to display the text as bold and italic, you would do: <em>bold <strong>and</strong> italic</em>.

The next thing to cover is paragraphs. To define a block of text as a paragraph, you simply need to place it within <p></p>. So, <p>This is one paragraph.</p> would display as:

This is one paragraph.

Next, we've got the backbone of the Internet, the hyperlink, or anchor. This element has an additional kink, in that it requires a couple of attributes. The element is defined by the <a></a> tags, but doing <a>http://strivinglife.net/</a> just isn't enough. Rather, you have to use a href attribute. <a href="http://strivinglife.net/">http://strivinglife.net/</a>. You can then change the text between the tags to be the clickable text. <a href="http://strivinglife.net/">StrivingLife.net</a> displays as StrivingLife.net.

At this point, we're going to stop, because this is quite enough to make you quite dangerous. There's a number of additional elements that can expand upon these capabilities, but you should first be able to use the above before you go too much deeper.

Practice these elements now by taking some text and copying it into Notepad. Now, make some text bold, some italics, and throw in a couple of links. Save the file to your desktop with a .html extension (but don't close the file in Notepad). You may need surround the file name with double quotes in order to make this happen (otherwise, it may attempt to save as .html.txt). Browse to your desktop and open the file with the browser of your choice.

Now, go back to the file in Notepad and use the paragraph tags to make the appropriate paragraph breaks. Save the file again and refresh, or re-open the file in your browser. Tweak additional text as necessary.

With that, you've got just enough HTML knowledge to be dangerous.

• html