WordPress in Depth: Using HTML in Your Widgets and Blog

This chapter is from the book

WordPress In Depth

Learn More Buy

This chapter is from the book

This chapter is from the book 

WordPress In Depth

Learn More Buy

HTML Basics in WordPress

There are lots of good books about HTML out there, but using HTML in the WordPress environment is unique. Many of the problems that make using HTML a hassle are handled for you, and the WordPress environment can teach you HTML as you work.

In this chapter, we use WordPress to demonstrate the basics of HTML. Once you have a feel for HTML itself and how it works in the WordPress environment, you can use other HTML and XHTML resources to go further, applying what you learn in your WordPress blog as you go.

The key tool we'll use is the Visual and HTML tabs in the WordPress Post editor. (The Post editor is the same for adding new posts, editing existing posts, and creating pages—standalone web pages you can integrate into your blog.)

The formatting that WordPress makes available to you on the Visual tab is the formatting that's made available in the most basic HTML, supported by the widest range of browsers across the widest range of systems.

The Post editor has tabs that allow you to work in Visual mode or HTML mode. Visual mode is what the user sees when they visit your blog. In HTML editors, Visual mode is often referred to as WYSIWYG, pronounced "whizzywig," for What You See Is What You Get.

HTML Tags

The basics of HTML can be unraveled by looking closely at its name: Hypertext Markup Language.

A markup language is a set of codes inserted within a flow of text that describe how the text should be formatted, or that give other instructions. A markup instruction in HTML is called a tag.

A typical tag looks like this: <b>. The angle brackets indicate that the text inside them isn't to be displayed—instead, it's an instruction.

Many tags come as beginning and ending tags, like this:

The last word in this sentence is displayed in <b>bold</b>.

That's how the text would look on the HTML tab. On the Visual tab, or in your blog after you publish, the same sentence would appear like this:

The last word in this sentence is displayed in bold.

So in HTML, you format a word as bold by surrounding it with the beginning bold tag, <b>, and the ending bold tag, </b>. Similarly, you use the <i> and </i> tags around words or characters that you want to display in italic.

HTML was developed in accordance with a strong set of ideals, alongside strong practical concerns, which sometimes conflicted.

For instance, HTML is meant to convey meaning, not formatting. The bold and italic tags are formatting tags. They're tremendously popular because each "does what it says on the tin," across a wide range of devices to boot.

The meaning behind the styles might be different from their look. An HTML purist would prefer to use tags that specify the meaning rather than the formatting. So, to follow along with the theory behind HTML, you should use <em> to emphasize text and <strong> to make it appear strongly. What this means in practice is that HTML purists use <em> for italic and <strong> for bold, along with the corresponding ending tags, even though the pure tags are much harder to remember and take longer to type.

CSS is meant to be a triumph of the purist approach because it separates meaning from the specifics of how something appears. In practice, CSS just gives you the tools to spend far more time working on the details of appearance, often well beyond the importance of the underlying text.

So that's the markup language part of HTML. Figure 6.1 shows the HTML source code underlying a post on gvDaily.com. To complete our look at the words behind the acronym HTML, let's look at the HT, or Hypertext, part.

Figure 6.1 You can easily view the source code behind any web page.

What distinguishes HTML as a Hypertext Markup Language is the use of additional tags that refer to hypertext links. For instance, here's the HTML code to link some text to the WordPress.com home page:

To go to WordPress.com, click <a href="http://www.wordpress.com">here</a>.

This code causes the word here to become a hypertext link. By default, the word here is displayed in blue and underlined. When the user clicks on it, the contents of the browser change from the page with the sentence in it to the WordPress.com home page.

The a in the tag stands for anchor. (Anchor management is important in complicated websites.)

The href in the tag stands for hypertext reference. A chunk of text that isn't a tag, but is used in a defined way within a tag (as is done here), is called an attribute. Hypertext means that text can exist in various files, on various web servers.

The great thing about learning and using HTML in the WordPress.com environment is that all sorts of hassles are handled for you. You work at the level of individual posts; WordPress handles making up the complete page by putting your post within a theme, as described in Chapter 3. WordPress also hosts your files.

This saves you from one of the biggest hassles in web publishing. Traditionally, web developers create web pages on their own machines. Once everything's right, the web developer then transfers the web page to a web server.

During this transfer, all sorts of things can go wrong because the files go to a different machine, with a different folder structure. The links between files are easily disrupted by the transfer, and all sorts of hassles ensue.

WordPress.com handles all this through a very controlled process. You never upload the title and text of your post at all; that's handled by the Add/Edit Post page. For graphics and, if you choose to use them, audio and video files, you upload files one at a time using another tool, and only then use the files in your blog. You never have to worry about creating a set of link relationships on one machine, then transferring them to another machine. (Automattic might move your blog around on their servers, but you never see this happen.)

If you move to a WordPress software-based blog, you take on these hassles. Different hosting providers might protect you from them to a greater or lesser extent, but you're never quite as protected and carefree as in WordPress.com. However, on a WordPress.org blog, you do have much more power to do things your way.

The Visual and HTML Tabs

Let's take a close look at the Visual and HTML tabs to get a feel for the differences. Figure 6.2 shows the editing area for both.

Figure 6.2 The Visual and HTML tabs do most of the same things in different ways.

The buttons available on the Visual tab are a close match for those on the HTML tab. Table 6.1 shows the correspondence between one and the other. The first section shows the main, or top, line of editing buttons; the second section, the second line of editing buttons, only appears when you click the Kitchen Sink button on the first line.

Table 6.1. Buttons for Visual and HTML Tabs

Character Formatting

The character formatting commands that are made available in WordPress are the ones most widely supported in HTML: bold, italic, and—a bit of a latecomer to HTML—strikethrough.

Figure 6.3 shows text on the Visual tab of WordPress using the bold, italic, and strikethrough formats. The beginning words of each sentence are in italic—How, Where, What, Why. The word you is repeated in bold four times. The word so is shown in strikethrough.

Figure 6.3 Formatting is easy to understand on the Visual tab.

Figure 6.4 shows the same text on the HTML tab. You can see the HTML codes that cause the formatting on the Visual tab to be displayed.

Figure 6.4 Formatting is a bit trickier on the HTML tab.

Now, what's going on? Table 6.2 shows the text in visual and HTML modes for comparison.

Table 6.2. Visual Versus HTML Text

<em>Why</em> are <strong>you</strong>
<span style="text-decoration:
line-through;">so</span> late?

Even though WordPress displays the bold button as B on the Visual tab and b on the HTML tab, it actually implements bolding with the <strong> tag, not the <b> tag. This is a combination of practicality—no one would know what WordPress meant if they showed strong in the button—and purity in the use of HTML.

Similarly, the <em>, or emphasis, tag is used for italic.

Strikethrough is implemented using CSS via the <span> and </span> tag pair. These tags are like a red flag to let you know that classic, basic HTML is being left behind. They mean something like this: "The span of text between these tags has shared characteristics," which are then defined within the opening tag. In this case, the style attribute defines formatting, called text-decoration, which is line-through to produce the strikethrough effect. It's understandable that WordPress uses CSS for this; the strikethrough effect is implemented in HTML as <s>, <st>, or <del> (for delete) in various versions of HTML.

Still, the pure version is much harder to read. If you get some experience working with HTML, you learn to ignore the HTML tags when you want to read the underlying text. It's much harder to ignore <strong> when you're scanning in this way (because it's actually a word) than <b>. The <em> tag is both reminiscent of Auntie Em in the Wizard of Oz, or an em dash if you work with typography, and easy to confuse with <strong>.

Here's the same text with the more commonly used tags, so you can see how much clearer a less pure version of HTML is to read:

<i>How</i> are <b>you</b>?
<i>Where</i> are <b>you</b>?
<i>What</i> are <b>you</b> doing?
<i>Why</i> are <b>you</b> <st>so</st> late?

WordPress will accept the more commonly used, and easily understood, tags, such as <b> and <i>, if you type them into the HTML tab, or copy them in from a tool that uses them.

If you look at the result on the Visual tab, then return to the HTML tab, the tags will be changed to <strong> and <em>. Less widely supported tags, such as <st>, are simply dropped; you'll have to notice they're missing and reenter them in a WordPress-approved form on the HTML tab, or by using the buttons on the Visual tab.

List Formatting

It's good to understand the list formatting in WordPress because lists are very convenient (for you and your readers), but also a frequent source of frustration with HTML. Browsers tend to display lists in ugly ways—with a wedge of blank space in front of the first list item and no spacing at all between items.

It's quite common for HTML maestros to use all sorts of tricks to make lists come out better and for CSS experts to use CSS, in an approved way, to get excellent results.

HTML implements lists by specifying the type of list up front, then surrounding each line in the list with tags to show it's a list item. This makes it easy to switch between the two types of lists that HTML supports:

• Unordered list—Unordered means "it doesn't matter what order is used," but HTML always displays the items in the order you provide them. Unordered lists always show up as bulleted lists. However, calling them unordered instead of bulleted is part of the preference in HTML for specifying meaning, not specific formatting details.
• Ordered list—Ordered means "the order is important," and browsers always display ordered lists as numbered lists.

The group of items in unordered (bulleted) lists are surrounded by the <ul>/</ul> tab pair. Each list item is preceded and followed by the <li>/</li> tag pair, with li standing for list item.

In ordered (numbered) lists, the items are surrounded by the <ol>/</ol> tag pair. Just as with unordered lists, each list item is preceded and followed by the <li>/</li> tag pair.

Table 6.3 shows two lists as they appear on the Visual tab and the HTML tab.

Table 6.3. Visual Versus HTML Lists

These are a few of my favorite
Shakespeare quotes:
<ul>

<li> All the world's a stage, And all
the men and women merely players.</li>

<li> The evil that men do lives after
them; The good is oft interred with
their bones.</li>

<li> The course of true love never did
run smooth.</li>
</ul>

Note that the formatting for the lists looks very similar; the only difference is the use of the <ul>/</ul> tag pair for one and the <ol>/</ol> tag pair for the other. When editing HTML, it's easy to change from one type of list to the other just by changing two u's to o's or vice versa.

Also note how the list items in the column of HTML code are indented, as they are in WordPress, for both the unordered (bulleted) and ordered (numbered) lists. This indenting has nothing to do with the HTML code itself; it's called "prettyprinting," whether it's used for onscreen display or a physical printout. Prettyprinting is used with various kinds of code to make it easier to work with. Some HTML editors have very elaborate prettyprinting, including further use of indentation, colors, fonts, text styles (bold, italic, and so on), and any other ploy that helps make it clearer what's going on in all that code.

You can see that, even in this brief example, the HTML code takes up a lot of space on the page. The same is definitely true onscreen. A big part of the reason that WordPress is a poor HTML editor is the limited screen space available for the contents of the HTML tab in the Shared-Screen mode of the Post editor.

Linking

Linking is the creation of hyperlinks in HTML code. Hyperlinks are at the very core of the Web.

Specifying a link can be quite difficult and links are easy to make a mistake in or to have break even after they've been working for a while. Luckily, links in WordPress are simplified, without taking away much from what you can do. And you can always dive into the HTML and make a link as complex as you want.

For light work with a WordPress.com or WordPress.org-based blog, though, the main reason for understanding linking is that it's one of the main reasons you'll work in HTML rather than on the Visual tab. This is for two reasons:

• Many websites give you HTML to add to your page if you want, for instance, to include a video. The Google Voice website gives you HTML to include a Call Me button for your Google Voice number. AltaVista gives you code for various Translate This buttons for your blog, and so on.
• Linking is also useful for the Text widget that we describe later in this chapter.

There are three forms of links worth being familiar with:

• A link to a home page—An example is as follows:

  Visit <a href="http://www.wordpress.com">WordPress</a>.

  HTML is doing a lot of the work for you here. When you give a domain name as the link destination, a web browser looks for a web page called any of the following:

  index.htm
  index.html
  home.htm
  home.html

  These web page names are privileged in that you don't have to enter them for a web browser to look for them. You don't even need to know which one of the four forms the website's author used; any of them will do.

• A link to any web page—An example is as follows:

  Visit the new Great Stuff list at <a href="http://www.wordpress.com/greatstuff/latest.htm">WordPress</a>.

  This takes you to the WordPress.com site, into a folder called greatstuff, and to a web page called latest.htm. (Web page files always end in .htm or .html.)

• A link within a web page—An example is as follows:

  Visit the new Great Stuff list at <a href="http://www.wordpress.com/greatstuff/latest.htm#item20">WordPress</a>.

  As with the previous example, this takes you to the WordPress.com site, into a folder called greatstuff, and to a web page called latest.htm. It then goes one step further and scrolls down to a special type of tag called an anchor within the file. (If the anchor is missing, the link takes the user to the top of the page.) The anchor takes this form:

  <a name="item20"><h4>Item 20</h4></a>

  In this case, the anchor is around a header, as is commonly the case. For anchors of this type, the <a>/</a> tag pair doesn't have to surround anything, as it marks a point in the file rather than a designation. However, some of us like to surround text with the tag pair so that if things are moved around, the intended destination of the anchor is clearer.

These are the kinds of links that you'll need for the Text widget, described later in this chapter. For links within web pages, you can add anchor tags to your own blog posts or static pages, and you can look in the HTML code for a web page, as described previously, to find existing anchor tags to which you can link.

The More Tag

WordPress includes a WordPress-only tag called More that shows how HTML works—and how WordPress uses it to make your life as a blogger easier.

The home page of your blog shows your most recent posts. However, if a post has a More tag in it, only the part before the More tag displays. The part after the More tag only shows if the user links to it, either from your blog home page or somewhere else.

The More tag looks like this:

<!--more-->

As far as HTML is concerned, any tag that begins with the exclamation point character, !, is a comment. Web browsers ignore such tags, so you can put remarks to yourself in them. Comments are often used for notes to support project management for website creation and updating, such as a list of changes to the site.

However, WordPress.com is not just any website. It can set rules by which, for instance, comment tags can be analyzed and treated as meaningful if they meet certain rules. The More tag is a specialized comment tag.

You can insert a More tag in your post at any point you like to make your blog home page act the way you want it to.

HTML Editing in WordPress

The Post editor is quite good as a WYSIWYG editor and really, really poor as an HTML editor. Here's why:

• As a WYSIWYG editor (that is, on the Visual tab), the Post editor offers buttons for HTML features, easy integration of content from text editors or Microsoft Word, spell-checking, and a Full-Screen mode.
• As an HTML editor, the buttons are confusing and, much worse, there is no Full-Screen mode. HTML eats screen space, and being forced to work in the narrow confines of the Shared-Screen mode of the Administration area makes it almost impossible to see what you're doing. The lack of basic capabilities, such as Find and Replace, really shows in HTML editing as well.

Because the Post editor is a poor HTML editor, the ability to use WordPress for HTML work is limited. If you need to do extensive HTML work with your WordPress blog, you should work in a different editor, and cut and paste between the other editor and the Post editor.

The possibilities for becoming confused and losing time or losing work when you're switching back and forth between editors are obvious, but manageable.

There are a lot of HTML editors out there for different platforms, and there's no one universal standard. A wide range of editors appeared when the Web exploded in popularity in the 1990s; some editors that were popular then are no longer supported or receive minimal support, a picture which changes year by year. For example, the widely popular FrontPage tool from Microsoft has been orphaned—withdrawn from sale and left without updates. Microsoft replaced it with a much more technically oriented set of tools, called the Microsoft Expression Studio, that competes with the widely respected, but also complex, Dreamweaver suite from Adobe.

To find an HTML editor for your computer type, search online for reviews. You can find adequate basic editors as freeware or shareware, then upgrade to paid software if and when your needs dictate.

What Tags Can I Use?

If you know something about HTML, you'll be wondering just what tags you can use. If you use external resources to learn more about HTML, you'll soon be wondering the same thing.

Here are the tags you can use that we've already mentioned (though WordPress might convert them to other tags): a, b, blockquote, br, del, div, em, li, ol, p, s, span, strike, strong, and ul.

Here are some additional tags, with a word or two of description so you can follow up on the interesting ones: font (yes, you can specify fonts in your blog!), h1, h2, h3, h4, h5, h6 (headers, from biggest to smallest), hr (a horizontal rule or line), img (insert an image using similar rules as for a web link), and table (powerful and potentially dangerous, as tables often work differently on different browsers).

Just for completeness, here are the remaining tags that are supported (several of which are dependent on the table tag): address, abbr, acronym, big, caption, cite, class, code, col, dd, dl, dt, i, ins, kbd, pre, q, sub, sup, tbody, td, tfoot, tr, tt, and var.

We mentioned previously that WordPress uses XHTML. What does this mean to you as you work directly in HTML?

Not that much because most of the additional complexity of XHTML comes at the level of the overall page and its major divisions (head, body, and so forth), which WordPress handles for you.

Here are a few key rules to follow to make your code work as XHTML:

• Use all lowercase for HTML—This was always the "cool kids'" way to write HTML code, but in XHTML it's a rule.
• Nest tags properly—If you surround a word with the <b>/</b> tag pair, then make the same word the beginning of a link, the <a> and </a> tags should surround the <b> and </b> tags, not be intermixed with them.
• Use tag pairs—In particular, always use the <p>/</p> tag pair, not the <p> tag by itself.
• Always put attribute values in quotes—Before, you might have worried whether a browser was too stupid to tell the difference between an attribute and an argument. Under XHTML, the answer is officially "yes." So format a link, for instance, this way:Come to the <a href="www.metaverse.wordpress.com">Metaverse</a> for more.

If you follow these simple rules, your HTML code should work well in either an HTML or, as with WordPress, an XHTML environment.

As with HTML tools, there are many sites about HTML and XHTML; some are out of date, some might not be technical enough, some might be too technical, and some might be just right for you. Search for the tag name you're wondering about, along with the keywords "HTML tag" to find a variety of sites that will define the tag name for you. You'll soon find a site you like.

Here are tags you can't use, for security reasons: embed, frame, iframe, form, input, object, and textarea.