1. Computing

Write in HTML With These Basic Tags: Bold, Italic, and Links

Command the Browser With a Few Simple Tags

By

If you can click the little i button to turn italics on, you can write in HTML. HTML is the "language" of your browser. You add little "tags" to your text, and the browser uses those tags to make your text look great. If you learn a few basic tags, you will save yourself tons of time getting your content into your CMS.

You can learn those basic tags in 10 minutes or less - right here.

However, if you're totally new to HTML, read this first, to get the basic idea of how HTML works. It's a short article. You can come right back.

Ready? Let's start with the easy tags.

Italics and Bold

Italics and bold are the salt and pepper of prose. Moderation is essential, but a dinner without either is poor fare indeed.

They are also very easy in HTML.

This is <i>italic</i>. And this is <b>bold</b>.

In the browser, this becomes:

This is italic. And this is bold.

Just like the I and B buttons on your word processor. See? So easy.

Why Italics and Bold in HTML Are So Important

You should be excited that you finally just learned how to do bold and italic yourself.

No more having to pry your formatted text out of a word processor!

Italics and bold are often the first thing to vanish when conversion goes wrong. When italics and bold get lost, you (or your well-paid web person) have to manually apply them all over again in HTML. It's a huge, time-consuming hassle.

Now you can get them right the first time.

Italics and Bold, the Better Way: Emphasis and Strong

For extra points, here are the "better" tags for italics and bold: <em> and <strong>. They are "better" because they are not so typographic: emphasis and strong are broader concepts.

They may also be implemented better in technologies for the visually impaired, where a computer voice can actually "read" a web page with emphasis or in a strong voice.

So, here's the HTML:

This is <em>emphasis</em>. And this is <strong>strong</strong>.

And the result:

This is emphasis. And this is strong.

Underline

There's a tag for underlining, but I'm not going to tell you what it is.

Don't use underlining in a web page. Ever.

I miss typewriters too, but this is the Internet. Underlining has been hardwired to mean "link." If you underline anything else, you cause major click confusion.

Links

Speaking of links, what's a web page without them? This is hypertext, right?

A link has at least two parts:

  • the text in the link
  • the URL or web address where the link will actually go.

Let's say you want to link to, oh, I don't know, http://cms.about.com.

And you want the text of the link to read: CLICK HERE.

I wish you didn't - "CLICK HERE" is probably the most annoying, non-informative link that the planet's collective intelligence has yet spawned.

But, too late now. The HTML is:

You probably won't <a href="http://cms.about.com">CLICK HERE</a>.

In the browser, this becomes:

You probably won't CLICK HERE.

Hidden "Attributes"

Notice how we've added something into the opening tag: href="http://cms.about.com". This is inside the tag, so the browser doesn't show it. Instead, the browser uses this text to set the link destination.

We still have the basic opening and closing tag structure: <a> and </a>. But, unlike bold and italic, we needed a little more information, so we added an attribute.

An HTML attribute is always inside the opening tag. (Closing tags don't need them.) An attribute doesn't appear in the browser, but it gives the browser extra information.

Notice the format of this href attribute:

href="http://cms.about.com"

  • the attribute itself (href)
  • an equal sign (=)
  • and the value, in quotes ("http://cms.about.com")

The browser is very picky. Make sure you don't skip the = or forget the closing ". If you forget the closing ", your browser may swallow the rest of your article and make it invisible, as if it were part of that opening tag.

Bold, Italic, and Links: Your Basic Tags

With bold, italic, and links, you can get a lot done in most CMSs.

This is <strong>strong</strong>.
This is <emphasis>emphasis</em>.
This is <a href="http://cms.about.com">a link</a>.

If you want more, how about lists and block quotations? Or even images?

Or what happens if you write some HTML, paste in your article, and everything runs together into a single, huge paragraph? In that case, you'll have to learn about HTML paragraph breaks.

  1. About.com
  2. Computing
  3. Content Management Systems
  4. Maintain Your CMS Website
  5. HTML Tutorial for Writers
  6. Write in HTML With These Basic Tags - Bold, Italic, and Links

©2014 About.com. All rights reserved.