By Martha Spizziri
ASBPE Web Editor

Chances are you’ve felt a bit frustrated from time to time by not knowing at least a little HTML code. Maybe you were posting a comment to a blog, but didn’t know how to make a web address clickable. Or perhaps you needed to make a simple change to some copy on a web page, such as making it bold, but couldn’t because you didn’t know HTML.

HTML can get a bit complicated, especially when you add Cascading Style Sheets (which are used for layouts and some of the more sophisticated type formatting). But to just learn enough so you can create links and do some basic text formatting isn’t difficult. Lest any web designers, editors or producers out there want to strangle me, though, I’ll emphasize that if you plan to start making small updates to web copy, you’d better get the okay from whoever creates your web pages.

That said, here are a few fundamentals to get you started.

Basic formatting

The first thing to remember is that most HTML tags come in pairs – an opening and a closing tag. The text to be formatted comes in between those two tags.

An opening tag takes the form of a tag between two angle brackets, like:

<b> for bold

To close the tag, use the same code, but with a forward slash after the opening angle bracket:

</b>

To get:

Now is the time for all good men to come to the aid of their party.

You’d type:

Now is the time for <b>all</b> good men to come to the aid of their party.

For italics, the tags are <i> and </i>:

To get:

Now is the time for all good men to come to the aid of their party.

Type:

Now is the time for <i>all</i> good men to come to the aid of their party.

Alternatively, you might see <strong></strong> tags used in place of <bold></bold> or <em></em> as the tag pair for italics. (The “em” stands for “emphasis.”) These tags allow for a bit more flexibility on the user’s part — users can choose to set their browsers so that text between <strong></strong> tags comes out in blue, say, instead of bold, or emphasized text is bold instead of italic.

Combining tags

You can use more than one tag on the same bit of text. If you want some text to appear in bold italics, for instance, you’d use the <b></b> tags together with <i></i> tags. The only rule is the tags should be “nested” in the correct order. That means that the first opening tag used should be the last one closed.

Good HTML:

<i><b>This text will appear in bold italics.</b></i>

Bad HTML:

<i><b>This text may not render as bold italic in all browsers.</i></b>

Paragraph styling

Another useful tag is the paragraph tag — <p></p> — which puts a line of space below a block of text

To get:

This text is enclosed between paragraph tags.

And so is this text.

And so is this text.

Type:

<p>This text is enclosed between paragraph tags.</p>
<p>And so is this text.</p>
<p>And so is this text.</p>

Note that your code doesn’t need a linespace after each paragraph — the <p></p> tags put the space in automatically. (Be aware, though, that certain tools, such as Blogger, may be set up so that you can make space between paragraphs just by hitting the “Enter” key twice, as you would in Word. In that case, the <p></p> tags will just create extra linespaces, so you can dispense with them.)

Another handy bit of code to know is <blockquote></blockquote>, to create a paragraph that’s indented.

To get:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque.

Type:

<blockquote> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque.</blockquote>

If your block quote is more than one paragraph long, simply combine the <blockquote></blockquote> and <p></p> tags, using the <blockquote></blockquote> tags around the entire quote and the <p></p> tags around each paragraph. (Make sure the <blockquote></blockquote> tags are the first and last tags.)

To get:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque.

Donec id elit. Proin tempor scelerisque nulla. Fusce diam. Suspendisse aliquam. In vitae lorem sed nisl sodales fringilla. Vestibulum sed nunc. Nunc quis arcu. Fusce tempor nisi id purus. Fusce sit amet velit.

Type:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque. </p>

<p> Donec id elit. Proin tempor scelerisque nulla. Fusce diam. Suspendisse aliquam. In vitae lorem sed nisl sodales fringilla. Vestibulum sed nunc. Nunc quis arcu. Fusce tempor nisi id purus. Fusce sit amet velit.</p>
</blockquote>

Creating Links

One of the most useful tags, of course, is the tag that lets you link to other web pages. That’s also pretty simple. The tag pair is <a></a> — the “a” stands for “anchor” — but in this case you must add an extra bit of code to the opening tag to specify that it’s a link and tell the browser where the link should point to. (That extra piece of code is called an “attribute.”)

To get:

Visit the ASBPE web site.

Type:

Visit <a href=”https://asbpe.org”>the ASBPE web site</a>.

The “href” is short for “hypertext reference.” Note that the URL in the tag should be enclosed in quotes to ensure that it works properly in all browsers.

That should help you get started and take a little of the mystery out of HTML code.

Want to learn more? See our Electronic Media links.

Have your own resources to share? Let us know in the comments.