WordPress School: All the HTML You Need to Know

In my WordPress community class the other night, we had 15 minutes left when I told the class I was about to teach them how to speak HTML before class ended – well, enough HTML to publish in WordPress. They didn’t believe it.

Believe it. It took about 6 minutes.

I hope to do the same here in Lorelle’s WordPress School course. Believe me? Depending upon your reading speed, we might just accomplish the same thing here.

How Many Words and Phrases Do You Need to Know for a Foreign Language Vacation?

When we go on vacation to a foreign language, how many words and phrases are necessary to learn to get along for a few days or weeks as we relax on the beach or wonder the fascinating highways and byways of a location where we don’t speak the language?

Over the years, my students have come up with a fascinating list:

1. airport
2. basic directions (left, right, etc.)
3. bathroom
4. beer
5. can you do
6. do you speak english?
7. doctor
8. emergency
9. greetings (good morning, afternoon, etc.)
10. hello and goodbye
11. help
12. hospital
13. hotel
14. how much is
15. sorry
16. I do not understand
17. I would like to order
18. money
19. numbers
20. ny name is
21. please
22. please give me
23. police
24. taxi
25. thank you
26. this is bad
27. this is good
28. water
29. what is this called
30. what time is it
31. where is
32. wine
33. yes and no

If you have traveled to foreign languages, right now I bet you are translating some of those words into those languages to test yourself, aren’t you? That’s a huge list. Did you realize you know that many words and phrases?

Consider learning HTML easier than traveling to a foreign country. Trust me, HTML is much easier.

Why do you need to learn HTML to use WordPress?

Ah, there are many reasons.

If you wish to dive deeper under the hood to tweak and modify WordPress Themes, it’s a requirement. But what if you don’t?

Pro-bloggers, those who spend the majority of their time publishing content on the web, know HTML. And they use it. Every day. Why?

• The HTML editor in WordPress loads faster.
• It’s faster to write in HTML, your hands stay on the keyboard. Move to the mouse, your speed slows down.
• You have more control over content design and structure.
• You can write HTML in any text editor from anywhere and not be tied to the WordPress editors or the web.

The Most Commonly Used HTML Tags in WordPress Content

Writing with HTML in WordPress isn’t complicated nor does it require a degree in foreign languages or web development. We’re not talking about building a web page from scratch every time you publish. We’re only talking about the HTML that goes into the post content.

Think of the content areas of WordPress as a glorified word processor, and trust me, I hate saying that. I’m going for a metaphor in this example. In your word processor, you do most of the same things you will do in WordPress. You will want headings (subtitles or section titles), lists, bold, italic, images, and other basic document formating.

Remember, for now, we are not going to be coloring fonts, changing font sizes, or messing around with forcing styles on your site’s content as we learn and you experiment with your WordPress Test Site.

How much HTML do you have to learn?

Only 10 HTML tags. That’s it. Less words than you probably know in Spanish or another foreign language.

The most commonly used HTML tags in the post content area are:

1. Anchor Link Tag <a href="…">link</a>
2. Image Tag <img src="…" />
3. Headings <h2>, <h3>, <h4>, <h5>
4. Paragraph <p>Text here</p>
5. Bold <strong> not <b> and Italic <em> not <i>
6. Lists <ol> and <ul> and <li>
7. Blockquote <blockquote> and <cite>
8. Line Break <br />
9. Horizontal Line <hr />
10. Code <pre> and <code>

Ten HTML tags. I think you can handle that.

Sure, there are more HTML tags you can use in the post content area, but these are the most common. Tables, font colors, etc., are rarely used and if you need to use them, you probably already know how.

How about some basic HTML before we get into the specifics of each HTML tag.

HTML Rules and Guidelines

To write in HTML in WordPress, you must use the Text Editor in Posts or Pages. Here is what else you need to know:

If you open it, close it.

All open HTML tags must be closed. If you open a tag such as bold [<strong>this is bold</strong>] you must close it with a closing tag featuring a forward slash before the close.

All self-closing HTML tags must be closed. In strict HTML, you must close single tags with a forward slash at the end of the code. This applies to images, line breaks, horizontal lines, and a few others rarely used in the post content area.

Open and closing HTML tag example:

<a href="http://example.com/" title="Link to example article">Example Article</a>

Self-closing HTML tag example:

<img src="http://example.com/ball.gif" alt="Ball" />

What else do you need to know?

All HTML tags are lowercase. If you peek under the hood at the source code of any website and you see capital letters used in the HTML such as <BLOCKQUOTE>, the site was probably designed prior to 1999 and no appreciated by the user or search engines like Google, which downgrades site using archaic and deprecated HTML. Even if you read an HTML tag with a capital letters in tutorials such as <BOLD> or <H3>, use lowercase letters when you write yours.

There is a hierarchy in the structure of nested HTML tags, tags used inside other tags. Open one, introduce another, then close the second, then close the first.

Right:

...this is <strong><em>bold and italic text</em></strong>...

Wrong:

...this is <strong><em>bold and italic text</strong></em>...

For a full list of exactly which HTML tags are permitted in a WordPress blog post, see Code — Support on WordPress.com.

The Top 10 HTML Tags Used in WordPress Posts and Pages

All of this information is spelled out in my tutorial, “The 10 HTML Tags You Must Know to Blog,” and what follows is a summary of the top 10 HTML tags used in WordPress content.

1. Paragraph

Every paragraph you write in WordPress requires a paragraph HTML tag. You may not see it, but it is there.

The paragraph HTML tag <p> is the most used HTML tag.

In WordPress, if you are using the Visual editor, simply press the ENTER key to end and start a new paragraph.

In the WordPress Text editor, two ENTERs are required between paragraphs.

With this spacing, WordPress automatically generates HTML paragraph tags, such as in this example. First is the WordPress version as would be seen in the Text editor, and below the HTML version.

This is an example of a first paragraph in a WordPress
blog post filled with text.

With a double space between the paragraphs, WordPress
will wrap them in paragraph HTML tags when you publish
the page. 

<p>If you were too look under the hood in the web browser
at your page's source code, you would find this paragraph
wrapped in an HTML paragraph tag.</p>
<p>You would also find the next paragraph also wrapped,
making it rare for you to actually use the paragraph
HTML code.</p>

2. Bold and Italic

Bold and italic are the most common ways to add emphasis to words or phrases, not much different from a word processor or writing email.

Originally these were designated by <b> and <i>. The Semantic Web movement changed these to put more emphasis on the emphasis to <strong> and <em>. They do the same thing, but many WordPress Themes do not recognize the archaic HTML codes today.

In general, use bold for extreme emphasis and to guide someone through commands. Italics are used for air-quotes and foreign words, though some sites feature style guidelines that require book titles to be in italics.

To change WordPress Themes, go to <strong>Appearance</strong> > <strong>Themes</strong>.

The restaurant was <em>à la carte</em> and he couldn't decide.

There is much etiquette in the use of bold and italic in web writing. Here is a quick overview.

• It is considered bad form to combine bold and italics, considered screaming without all capital letters.
• Headings are not to be bolded or just bold. Use the heading HTML tag appropriate to the size you need.
• Use italics not quote marks to emphasize air quote words or phrases, or don’t bother as many read the emphasis in naturally if the writing is good.
• Use bold and italics like spice in a recipe. Too much of a good thing spoils the whole dish.
• Bolds attract the eye. Instead of scanning the content and absorbing it, bolds pull the eye from words and phrases to more words and phrases, interrupting the scanning process, becoming a ping pong match for the eye.

3. Headings

We covered headings in a recent tutorial.

The header is the masthead at the top of your website. The headings are the section titles or subtitles of your blog post. Headings help to divide content into blocks or sections, and lead the reader through the article visually and physically.

...which we will discuss in the next section.</p>

<h4>Guidelines for Writing Blog Posts</h4>

<p>In this section, we will look at how to write a blog post...</p>

HTML heading tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, starting large and getting smaller as the number grows larger. Most WordPress blog posts use <h2>, <h3>, and <h4>.

There are six heading tags used in most websites, though only two or three are typically used in most WordPress Theme, and every Theme does their headings differently. You will need to test the headings on your site’s WordPress Theme before using them to determine which ones to use.

Note and Warning: DO NOT use bold as a replacement for headings and do not bold headings. In my classes and workshops, it can get you a fail fast. Use heading tags properly and use bold only within the paragraphs. Also, do not put links in your headings. Links belong in sentences not subtitles.

4. Links

We covered links in a WordPress School tutorial. Links are called links, hypertext, and things you click, or some combination of these. In HTML-speak, they are called anchors and represented with an A.

<a href="http://example.com/" title="Description of the Link">anchor text</a>

Note: In general, a link consists of a single word to at most six words, not entire sentences or paragraphs.

5. Lists

There are two types of HTML lists.

An unordered list begins with <ul> which means “Unordered List.” It features bullets not numbers.

An ordered list begins with <ol> which means “Ordered List.” It features the a numbered list. If you move list items around on the numbered list, they will be automatically renumbered.

Each list item is surrounded by the “List Item” HTML tag <li>.

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>Frog</li>
  <li>Dog</li>
  <li>Cat</li>
</ol>

You can put anything in a list, words, numbers, sentences, even paragraphs. If you choose to number headings, do so manually as it is not web standard to force headings into lists.

The article series in this WordPress School requires several sets of HTML lists.

6. Blockquotes

There are many ways to quote and cite material from other sources in your WordPress content. We’ll cover that later in this course. The use of the blockquote HTML tag is one of the common methods of citation on the web.

Discussing quoting sources in blog posts, 
<a href="https://lorelle.wordpress.com/" title="Lorelle on WordPress" rel="tag">
Lorelle VanFossen of Lorelle on WordPress</a> says:

<blockquote>Quotes can be incorporated into the text of an 
article so it flows with the content.</blockquote>

To include the citation in the blockquote, you would use the following format.

<blockquote>Quotes can be incorporated into the text 
of an article so it flows with the content.<br />
<cite><a href="https://lorelle.wordpress.com/" title="Lorelle 
on WordPress" rel="tag">Lorelle VanFossen of Lorelle on 
WordPress</a></cite></blockquote>

The <br /> is a self-closing HTML tag for Line Break. You can also use paragraph (<p> tags). Better yet, with in the WordPress Text editor, simply hit ENTER once at the end of the quote before the citation line and the line break will automatically form when published.

The <cite> HTML tag may be styled differently in your Theme’s blockquote styles for emphasis. Even if it is not, it is a required HTML tag for such citations.

7. Image Tag

The image tag is very commonly used in WordPress posts, but it is rarely handwritten as images are uploaded to WordPress and embedded into the posts through the WordPress media features.

<img class="alignright size-medium wp-image-5493" 
title="Photograph of a sunset over the Pacific Ocean." 
src="https://lorelle.files.wordpress.com/2005/08/red-sunset-pacific-ocean.jpg" 
alt="Bright red sunset skies over the waves of the Pacific Ocean, photograph 
by Lorelle VanFossen" width="350" height="264" />

The img is the HTML tag for image.

The title is recognized by most browsers today and provides a title to the image for search engines, and can serve as the descriptive text of the image, but the alt is required by web standards. WordPress continues to require a title but not the alternative description, something many have fought to change for many years.

The alt is required by web standards for accessibility to be the descriptive text of the image, describing what the image is not the subject under discussion. For example, if you are using an image of a sunset for eye candy to discuss preparing for retirement, the alternative text should not be “preparing for retirement” but “Photograph of a sunset on a beach.” It is designed to make the image “readable” by those with visual impairment.

The width and height set the size of the image.

We covered most of this in the tutorial on images in Lorelle’s WordPress School.

8. Line Breaks

A paragraph HTML tag automatically spaces itself per your WordPress Theme’s styles, adding whitespace between paragraphs.

A line break removes that spacing and manually creates a single space between lines, ideal for addresses, poetry, recipes, and other content that requires no space between the lines.

To make a line break in WordPress:

• Visual Editor: SHIFT+ENTER
• Text Editor: ENTER

Line breaks <br /> are self-closing HTML tags.

...and my address is:

1234 Glory Lane<br />
Vancouver, Washington 98123<br />
USA

Make a note to leave the package on the doorstep so I 
don't have to pick it up at the post office.

9. Horizontal Line

A horizontal line <hr /> is another self-closing HTML tag and it creates a line across your web page within the content area.

---

Take care as some WordPress Themes do not style horizontal lines or if they do, they are very light colored and not as dramatic as you may wish.

<em>This month's guest post is by Sally Anakanura on how to 
succeed in blogging without really trying. She blogs at
BlogsRUs and works as a content strategist for Bloggers4Hire.</em>

<hr />

A lot of people work too hard on coming up with something
to say on their blogs. I'm going to give you the tips you
need to know to blog without really trying...

10. Code

I covered how to publish code in “Writing and Publishing Code in Your WordPress Blog Posts.” In general, the chance you will need to know how to publish code in your WordPress sites is rare, but if you do, it looks like this:

This is the use
of the <pre> code in a post.
It looks like code but isn't
highlighted as code.

Using shortcodes, described in Shortcodes in the WordPress Codex and Shortcodes — Support on WordPress.com, you can use the sourcecode shortcode to publish code easily.

[sourcecode language="html"]
write the code here
[/sourcecode]

---

Among the 66 HTML codes permitted in WordPress posts, Pages, and widgets you may find a need, but for the most part, these are the ones you will require on a regular basis to travel through your WordPress content.

For more information on the basics of HTML found within WordPress content:

• The 10 HTML Tags You Must Know to Blog | Learning from Lorelle
• WordPress School: Visual and Text Editors – Lorelle on WordPress
• What You Must Know About Writing on the Web – Learning From Lorelle
• How to Make HTML Tables For Your WordPress Blog – One Cool Site Blogging Tips

WAIT! You Promised Learning HTML Would Be Fast and EASY

So I did.

What HTML tags do you really need to learn to write and publish in WordPress?

1. Anchor Link Tag <a href="…">link</a> Don’t need this because WordPress helps you create links in both editors with a button. Still helps to be familiar with it, edit it, and understand how it works, but you don’t need to write it by hand every time, though I do.
2. Image Tag <img src="…" /> WordPress makes it easy to embed images without any stress and strain on the code. Be familiar with the tag and its classes in WordPress, but don’t memorize the code.
3. Headings <h2>, <h3>, <h4>, <h5> You will use this constantly.
4. Paragraph <p>Text here</p> WordPress automatically generates paragraph tags for you. One ENTER in Visual, two in Text editors.
5. Bold <strong> not <b> and Italic <em> not <i> Another set you will use all the time.
6. Lists <ol> and <ul> and <li> You may use the buttons but learn how to do this manually so you can easily create lists and change them back and forth from ordered to unordered (numbered to bullets)
7. Blockquote <blockquote> and <cite> There are buttons for blockquote but not for cite, so learn these to quote content that isn’t yours
8. Line Break <br /> How often are you going to publish an address or poetry?
9. Horizontal Line <hr /> These are rarely used into today’s content, so click the button if you absolutely need a line in your post or Page
10. Code <pre> and <code> Doubtful you may ever need this in your WordPress web publishing life, but good to know it exists.

How many does that leave?

Four. Four foreign words and phrases.

Sure wish there was a place I could visit properly and speak only four phrases during my entire visit to their language.

Assignment

Your assignment is to edit your existing posts and Pages and inspect the HTML in the Text editor. Learn to read it.

Write some by hand. Make a list. Make a word bold or italic. Add a heading by hand in the text editor.

The more you use it, the easier it becomes, like everything.

I will be presenting an entire week on HTML and CSS as we move into WordPress Themes. This is just a taste of the HTML you will need to style when you start creating WordPress Themes.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---