United StatesChange Country
Business Class

septiembre 29, 2009

The Only HTML Guide That You'll Ever Need

Guy Kawasaki

Chief Evangelist, Canva

Summary

A few years ago I used a Countryman E6i headset microphone to make a speech, and it was so good that I bought one to bring it when

A few years ago I used a Countryman E6i headset microphone to make a speech, and it was so good that I bought one to bring it when I make a speech. In addition to the sound quality, I noticed another benefit: Bringing my own Countryman impressed AV people, so they took better care of me.

What does this have to do with HTML? Everything. Many bloggers don’t know the first thing about HTML—and maybe they should not have to, but if you provide your posts in HTML to your tech staff, you will impress them. And they will take better care of you too. If you don’t have a tech staff, it’s still better to write in HTML because you great a much greater control of your text.

You may have heard that HTML is a complex language, and this is true if you're designing a web site. But for blog posts, you only need to know ten or so HTML tags. Also, some word processors enable you to write in “regular” fashion but then save as HTML. You could then provide this file, but your tech staff will hate you because most word processors output God-awful HTML.

You could use a tool like MarsEdit, Ecto, or Qumana. They are vast improvements because you can write your posts and then publish them too. (I use MarsEdit.) But you don’t even have to use these apps. You can write in any word processor or even your email client if you use these ten HTML tags:

  1. Paragraph. The paragraph tag is the one you will use the most. It’s quite simple: Your paragraph here.

  2. Break. A break has less space between paragraphs. For example:

    Your text
    More of your text

    To get this kind of breaks, you use this:

    Your text
    More of your text

  3. Link. A link in a blog post looks like this: Alltop. Use this format to make a link: YOUR TEXT so for the Alltop link, it’s www.alltop.com?">Alltop.

  4. Bold. The bold style emphasizes text; use these tags What you want in bold here.

  5. Italic. The italics style also emphasizes text and book titles; use these tags What you want italicized here

  6. Ordered list. An ordered list looks like this. Notice that it’s numbered and indented to make it easier to read. Then each paragraph is outdented to make the number stand out.

    There are three factors for what sites are high on an Alltop page:

    1. Credibility for Alltop. For example, http://politics.alltop.com/ has to have the Washington Post on it above the fold.

    2. Undiscovered gem that we think is great quality and the world should now about. For example, we put The Bloggess, Stuff White People Like, Stuff Rich People Like, and Craftastrophe very high because they were undiscovered gems that we wanted our readers to find.

    3. If they help us, we help them. That is, if some blogger really helps us by collecting the feeds for the topic or spreading the word, we help them by giving them a good position.

    Use these tags for an unordered list:


    Your first point here.
    Your second point here.
    Your third point here.
    Your fourth point here.

  7. Unordered list. An unordered list looks like this. Notice that it’s bulleted (as opposed to numbered) and indented to make it easier to read. Then each paragraph is outdented to make the bullet stand out.

    There are three factors for what sites are high on an Alltop page:

    • Credibility for Alltop. For example, http://politics.alltop.com/ has to have the Washington Post on it above the fold.

    • Undiscovered gem that we think is great quality and the world should now about. For example, we put The Bloggess, Stuff White People Like, Stuff Rich People Like, and Craftastrophe very high because they were undiscovered gems that we wanted our readers to find.

    • If they help us, we help them. That is, if some blogger really helps us by collecting the feeds for the topic or spreading the word, we help them by giving them a good position.

    Use these tags for an ordered list:


    Your first point here.
    Your second point here.
    Your third point here.
    Your fourth point here.

  8. Smart quotes, apostrophes, and em dashes. You will dazzle your tech staff if you insist on smart quotes, apostrophes, and double dashes. These are typographically correct forms of “, ‘, and —. Use these tags:

    Left quote: “
    Right quote: ”
    Left apostrophe: ‘
    Right apostrophe: ’
    Em dash: —

    A big word of CAUTION: Never do a search-and-replace for dumb quotes with these HTML tags because links contain dumb quotes, and they must remain dumb quotes. There’s an easy way to do this if you’re a Macintosh user. Get BBEdit and use the SmartyPants UNIX filter in the # menu.

    This filter is so smart that it smartens quotes, apostrophes, and double dashes except when they should be left alone in HTML tags. (If this went over your head, don’t sweat it. Doing the first nine things here is more than enough to astound your tech people.)

You may find this bizarre (I do), but this site doesn’t support the final two HTML tags that I want to show you. Please click here to read the conclusion of this post.