WordPress: How to Edit Visual/HTML

Introduction

When writing your post, you have the option of using the Visual or HTML mode of the editor. Whats the difference? The visual mode lets you see your post as is, while the HTML mode shows you the code and replaces the editor buttons with quicktags. These quicktags are explained in the article.

Visual

Allows you to see the post in a more “visual” way, without HTML coding. In the visual, you will see what your post will mainly look like before publishing it to the internet. The visual shows pictures, text, videos, correct format, and other graphics.

HTML

Shows the HTML coding of your post in the most detailed format. The HTML is automatically updated when you post anything in the Visual, but if you want to go back to edit, add, or change the details of the visual, go to the HTML to do so. Some things can not be done in the visual without changing the HTML coding…for example, extra spacing in between paragraphs or images. Click on the link to learn more about HTML coding tips.

Quicktags

Quicktags are those useful ‘one-click’ buttons that insert code for you, and the default install has these:

• b (bold)

• <strong></strong>
• HTML tag for strong emphasis of text.

• i (italicize)

• <em></em>
• HTML tag for emphasis of text.

• b-quote (block quote)

• <blockquote></blockquote>
• HTML tag to distinguish quoted or cited text.

• del (delete)

• <del></del>
• HTML tag to label text considered deleted from a post. Most browsers display as striked through text. (Assigns datetime attribute with offset from GMT (UTC)).

• link (hyperlink)

• <a href=”http://example.com”></a>
• HTML tag to create a hyperlink.

• ins (insert)

• <ins></ins>
• HTML tag to label text considered inserted into a post. Most browsers display as underlined text. (Assigns datetime attribute with offset from GMT (UTC)).

• ul (unordered list)

• <ul></ul>
• HTML tag will insert an unordered list, or wrap the selected text in same. An unordered list will typically be a bulleted list of items.

• ol (ordered list)

• <ol></ol>
• HTML tag will insert a numbered list, or wrap the selected text in same. Each item in an ordered list are typically numbered.

• li (list)

• <li></li>
• HTML tag will insert or make the selected text a list item. Used in conjunction with the ul or ol tag.

• code (styling text)

•  <code></code>
• HTML tag for pre-formatted styling of text. Generally sets text in a mono-spaced text, such as Courier.

• more (more button)

• <!–more–>
• WordPress tag that breaks a post into “teaser” and content sections. Type a few paragraphs, insert this tag, then compose the rest of your post. On your blog’s home page you’ll see only those first paragraphs with a hyperlink ((more...)), which when followed displays the rest of the post’s content.

• page (next page)

• <!–nextpage–>
• WordPress tag similar to the more tag, except it can be used any number of times in a post, and each insert will “break” and paginate the post at that location. Hyperlinks to the paginated sections of the post are then generated in combination with the wp_link_pages() or link_pages() template tag.

• lookup (search)

• Opens a JavaScript dialogue box that prompts for a word to search for through the online dictionary at answers.com. You can use this to check spelling on individual words.

• Close Tags (closes tags)

• Closes any open HTML tags left open–but pay attention to the closing tags. WordPress is not a mind reader, so make sure the tags enclose what you want, and in the proper way.