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:
<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.
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.
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,
And you want the text of the link to read:
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.
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>. 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
- the attribute itself (
- an equal sign (
- and the value, in quotes (
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>.
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.