HTML Building Blocks

HTML is a standardized webpage markup language read and interpreted by (probably) all modern browsers. You can use it to customize parts of your blog and to add a personal touch.

In this tutorial we’ll cover formatting text, adding links, and inserting images. We’ll also start at the foundations and build – once you have the principles of HTML, you can apply them to the tags and modifiers not covered here.

First, Why Bother?

You may notice that much formatting can be done with the buttons in the WordPress editor’s Visual view. So…what’s the point of learning to do this by hand in the Text view or in Text widgets?

When you can control formatting, even just bits of it, you have more control over how your blog looks, feels, and flows. You can add touches that are more “you,” improve the

Shameless example: In my theme, the sidebar widget headers were uninspired, and each was placed in its own separate, clunky box (see the first image here). I used HTML in Text widgets to create a custom sidebar in my blog.
(Sneaky example: There’s a modifier in those two links that opens them in new windows/tabs.)

Basic Basics

An HTML “tag” is the bit of code that tells the browser what to do. Tags are surrounded by brackets to set them off from regular text:
<tag>

To format text, you’ll need an opening tag and a closing tag. The example above is an opening tag, which tells the browser to start formatting. To close it, and tell the browser to stop formatting, we’d add a forward slash:
</tag>

The text to format, then, goes between these tags, and your basic HTML looks like this:
<tag>text</tag>

Step One

Time to put our knowledge into action! First the code, then the result.

<strong>bold</strong>
bold

<em>italic</em>
italic

<u>underline</u>
underline

<del>strikethrough</del>
strikethrough

1<sub>subscript</sub>
1subscript

1<sup>superscript</sup>
1superscript

<blockquote>block quote</blockquote> (Note: This might look different depending on your WordPress theme.)

block quote

Step Two

Some tags have “modifiers.” The tag tells the browser what is affected, and the modifiers tell it how. Let’s look at changing font using the font tag and a few modifiers.

<font size="1">size</font> (The “normal” font size will differ based on your WordPress theme. Range is 1-7.)
size

<font color="blue">color</font> (Color can come from a list of words or in hexadecimal codes. Check out W3 Schools’ page on color names or google around.)
color

One of the cool things about modifiers is that they can be combined inside one tag. Saves on typing, and it’s neater.

<font size="1" color="blue">size + color</font>
size + color

Three more common tags that have modifiers are a for links, img for images, and hr for a horizontal line. (Note that img and hr do not surround text or have closing tags.)

<a href="http://raforbeginners.wordpress.com">link</a>
link

<img src="http://raforbeginners.files.wordpress.com/2015/08/img_9623_1024.jpg"/>

<hr/>


More

Now that we’ve covered the basics, feel free to explore! For more instruction, check out the W3 Schools’ HTML Tutorial. For a good (though slightly old) cheatsheet, check out Webmonkey’s. If curious about a particular code, Google will usually have the answer.