Formatting Text

Basic HTML and the WordPress Visual Editor


On this page I go over some of the very basic html tags and how to format text in WordPress using the Visual Editor. Because I know many of you will only want to know how to do these things in WordPress, I have highlighted the WordPress sections in red, so you can easily scroll to them.

The first step in using the WordPress Visual Editor is to make sure that all the buttons are displayed in the Visual Editor by clicking the “Kitchen Sink” button.


Paragraphs – The <p> tag and Return key.

Text in a <p> tag looks like this with a full line space between paragraphs:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML: be sure to enclose each paragraph between <p> and </p>

WORDPRESS: Use Return key. When writing in the Visual Editor in WordPress, using the Return key will create a full line space between paragraphs WITHOUT any indentation on the first line. This is the default for writing online.

This is what paragraphs look like in the source file:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


Line Breaks – the <br /> tag and Shift-Return

Text when using the <br /> tag look like this:

This tag creates
breaks in text
for lists, etc.
new line
another new line

HTML: use the <br /> tag at the end of a line where you want a line break.

<p>This tag creates<br />
breaks in text<br />
for lists, etc.</p>

WORDPRESS: In the Visual Editor of WordPress use the Shift and Return keys at the same time to create a line break. Please take note of this. People frequently get very frustrated that they cannot create a line break rather than a line space for a full paragraph. So remember use Shift-Return to create a line break.


Bold Text – the <strong> tag and “B” in the WordPress Visual Editor

HTML: if you surround a word or phrase with the opening <strong> tag and the closing </strong> tag, it will appear in bold.

WORDPRESS: Select a word or phrase in the Visual Editor and then click the “B” button.

This is a paragraph with bold text.

The source file will look like this:

<p>This is a paragraph with <strong>bold</strong> text.</p>


Italic Text – the <em> tag and “I” in the WordPress Visual Editor

HTML: if you surround a word or phrase with the opening <em> tag and the closing </em> tag, it will appear as italic.

WORDPRESS: Select a word or phrase in the Visual Editor and then click the “I” button.

This is a paragraph with italic text.

The source file will look like this:

<p>This is a paragraph with <em>italic</em> text.</p>


Links

The <a> tag and the “link” button in the WordPress Visual Editor

Links in HTML are more complicated so let’s start with WordPress where it is easy and simple.

WORDPRESS: Select the text you want to the be linked. Click the “link” button. The link button is only live, if you have selected text.

After clicking the “link” button a dialog box will appear. Type or paste a url (web address) into the URL field, add a title or choose a page from your site. Then click “Add Link”.

That’s it for creating a link in WordPress. Pretty easy!

HTML: In HTML the <a> tag has a few parameters. The main parameter is the url to a web page and looks like this.
<a href="http://somewebsite.org/folder/file.hmtl">.
Make sure to add the closing tag </a> around the linked text. This is easily forgotten. And also make sure that you use straight quotes, not curly quotes as used in Word. And don’t forget to add the closing quote – href=”dont_forget_end_quote.html”.

The color, underline and hover color, etc. of a link are controlled by CSS, which is a much more complicated subject. If you are using WordPress, your designer or theme developer will have written the CSS and picked the color of the link text for you.

This is a paragraph with some Linked Text.

The source file will look like this:

<p>This is a paragraph with some <a href="http://somewebsite.org/folder/file.hmtl">Linked Text</a>.</p>


External Links opening in another window <target=”_blank”> or in WordPress checking “open in a new window/tab”

This is optional, but I like to have external links open in another window, so people will stay on the site.

This is a paragraph with an external link to Wikipedia Dance.

HTML: You still need to be careful with all aspects of the <a> tag. Notice the underscore at the beginning of _blank and don’t forget the closing quote – target=”_blank”.

<p>This is a paragraph with an external link to <a href="http://en.wikipedia.org/wiki/Dance" target="_blank">Wikipedia Dance</a>.</p>


Headlines

In HTML there are 6 heading or headline tags. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. They are usually arranged according to size and importance with <h1> being largest and most important <h6> being least. Usually there is a line space after a heading, as well. As a rule of thumb there is usually only one <h1> tag per page. You should also note that search engines read heading tags, so it is not only helpful for readers to organize your text with brief explanatory headlines but it will also help search engines find your content.

The size, color and look of the heading tags are determined by CSS and will have been designed into your WordPress theme by the theme developer.

HTML: To make a headline in HTML surround text with the appropriate heading tags. Like this
<h2>This is an H2 heading.</h2>
As always don’t forget the closing tag.

WORDPRESS: Make sure that all the buttons are displayed in the Visual Editor by clicking the “Kitchen Sink” button.

To create a headline select text, making sure it is on one line. Then use the dropdown list and choose the appropriate heading.

That’s it for WordPress.

This is an <h2> Headline.

This is an <h3> Headline

This is what the source file will look like.

<h2>This is an <h2> Headline.</h2>
<h3>This is an <h3> headline.</h3>

NOTE: If you are one of my clients (Daniel Wiener) I frequently use the <h2> tags for headlines, unless you have a complicated site with lots of formatting, you should probably only use the <h2> tag.


Helpful Videos

I highly recommend watching this video. It is 3 minutes long (SHORT!) and it explains almost everything you need to know about using the WordPress Visual Editor


HTML Resources

There are many HTML resources on the web but here are a few links that may get you started.

http://htmldog.com/reference/htmltags/
http://www.quackit.com/html/tags/
http://www.htmlgoodies.com/beyond/reference/article.php/3472851
http://www.w3schools.com/Html/html_examples.asp