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:
- basic directions (left, right, etc.)
- can you do
- do you speak english?
- greetings (good morning, afternoon, etc.)
- hello and goodbye
- how much is
- I do not understand
- I would like to order
- ny name is
- please give me
- thank you
- this is bad
- this is good
- what is this called
- what time is it
- where is
- 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:
- Anchor Link Tag
- Image Tag
<img src="…" />
<h2>, <h3>, <h4>, <h5>
<strong> not <b>and Italic
<em> not <i>
<ol> and <ul> and <li>
<blockquote> and <cite>
- Line Break
- Horizontal Line
<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
<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.
...this is <strong><em>bold and italic text</em></strong>...
...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.
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
<i>. The Semantic Web movement changed these to put more emphasis on the emphasis to
<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.
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
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.
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.
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
<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.
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>
<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.
<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" />
img is the HTML tag for image.
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.
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.
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
<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...
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.
[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?
Anchor Link TagDon’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.
Image TagWordPress 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.
<img src="…" />
<h2>, <h3>, <h4>, <h5>You will use this constantly.
ParagraphWordPress automatically generates paragraph tags for you. One ENTER in Visual, two in Text editors.
<strong> not <b>and Italic
<em> not <i>Another set you will use all the time.
<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)
<blockquote> and <cite>There are buttons for blockquote but not for cite, so learn these to quote content that isn’t yours
Line BreakHow often are you going to publish an address or poetry?
Horizontal LineThese are rarely used into today’s content, so click the button if you absolutely need a line in your post or Page
CodeDoubtful you may ever need this in your WordPress web publishing life, but good to know it exists.
<pre> and <code>
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.
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