10-Minute Guide to HTML A quick tutorial mainly for contributors to ScienceBasedMedicine.org

   

Why? Creating blog posts in Microsoft Word and other word processing software is just asking for trouble. Things get lost in translation between file types. Formatting hassles are nearly inevitable. I have seen hundreds of examples of gremlins and glitchy posts.

It is simpler (and more rewarding) to craft your posts in plain text and raw HTML, using simple text editing software. Every computer ships with some kind of simple, free text editor: Windows has Notepad and WordPad, Mac has TextEdit. There are many nicer text editors designed for writing. (Just make sure that you use these programs in their plain-text mode, and not rich-text mode.)

Overview

To create a blog post the plain text and HTML way:

  1. Write your blog post in a text editor, and mark italics and links and so on with simple HTML.

(And that’s your only step if you don’t have permission to edit your own posts on SBM. If you’re not a regular contributor, just send us the file!)

  1. Login to WordPress and create a blank new post.
  2. Copy and paste your post to WordPress, as though you’d written it there. (Use the “Text” editing mode, not “Visual.”)
  3. Save it as a draft, and then preview it to make sure it looks right.
  4. Do your final tweaks and adjustments right in WordPress.

What is HTML?

In the earliest days of word processing, documents were marked up with shorthand formatting instructions that you simply typed into the document along with your beautiful words. The instructions were things like “when this is printed, make this next bit of text italicized.” Nothing has changed! That’s really all HTML is, 30 years later. A few common HTML symbols will take care of 95% of your needs.

HTML for blogging is particularly easy. If you were to create an HTML document from scratch, it would be more complicated. But when you’re blogging, software like WordPress takes care of a lot of the basics for you. For instance, paragraphs: just separate your paragraphs by a blank line, and WordPress will take care of the rest.

Tagging

HTML symbols are called “tags” or “elements.” You type a tag to start something like italicization, and then you type it again to end it. The tags are always enclosed in “angle brackets” to distinguish them from normal text. You type a starting tag (to start italics, say), and then you type the same tag again to finish, but with a slash in it.

For instance, italics should always be generated by using the <em> tag to emphasize text. (You can also use <i> for italics, but you shouldn’t. Long story.)

If you type this:

Homeopathy makes an <em>extraordinary</em> claim.

You will get this:

Homeopathy makes an extraordinary claim.

Four more HTML tags cover almost everything you need: blockquotes, subheadings, lists, links.

Headings

Headings are marked with the “h” tags: <h1>, <h2>, <h3> etc. (On SBM, h1s are reserved for titles and are never used inside posts, so all you are ever going to need is h2s for top-level subheads, and h3s for sub-subheads.)

If you type this: <h2>This witty section heading generates interest</h2>

You will get an actual heading! Which I won’t include here, because it really makes this look confusing.

Blockquotes (indented passages)

Blockquotes are generally useful, and very common in SBM posts. To indent a quoted passage of text, use <blockquote>.

If you type this: <blockquote>All I know is that it worked for me, and all the science in the world isn’t going to convince me that acupuncture is just a placebo!</blockquote>

You will get this:

All I know is that it worked me, and all the science in the world isn’t going to convince me that acupuncture is just a placebo!

Bulleted or numbered lists

Bulleted or numbered lists are also very common. They are slightly more complicated: use one tag to start and stop the whole list, either <ol> for “ordered/numbered list” or <ul> for “unordered list.” Then you also have to enclose each invidual list item with the <li> tag.

So if you type this …

<ul>
<li>Homeopathy</li>
<li>Acupuncture</li>
<li>Chiropractic</li>
</ul>

You will get this …

Links

Links are important, of course. Clickable text is marked with the <a>-for-“anchor” tag. And (here’s a new twist) the actual link is inside the first tag.

If you type this: The HuffPo published <a href="http://www.huffingtonpost.com/jenny-mccarthy/vaccine-autism-debate_b_806857.html">more anti-vaccination propaganda</a>.

You will get this: The HuffPo published more anti-vaccination propaganda.

(The "href=" thing stands for "hypertext reference," if you must know. But you don't need to know.)

Conclusion

You are now an HTML Padawan Learner. Now go tag some stuff.