How The Text Editor Tags Behave

In response to a concern on Text Editor icons,here is the simplest explanation I have come up with.

The text editor is composed of 13 html tags as shown in the image below. These tags are basically intended to define the appearance of the elements in a Web page. In most Wordpress themes I have tried and tested, the Text Editor tags supersede the formatting as defined in the Cascading Style Sheets file (style.css file).

HTML Tags Definition

HTML tags are code that shows how the components[text, paragraphs, images, etc] of a Web page is formatted. HTML tags are defined by the symbols less than (<) and greater than (>).

How the Tags Behave

1. b - Specifies bold text

Example: <strong>Bold text</strong> In Visual view: Bold text

2. i - Displays text in italic

Example: <i>Italic text</i> In Visual view: Italic text

3. link - Defines a link between a document and an external resource

Example: <a title="Negosyolink.com" href="http://negosyolink.com" >Click here</a>.
In Visual view: Click here

When visitors click on Click here it will be redirected to a website as what has been the value of href, in this case http://negosyolink.com.

NOTE: This can also be used to redirect your visitor to any content(page/post) within your website.

4. b-quote - Specifies a section [can be a paragraph or any exact wordings] that is quoted from another source

Example:

Here is a quote from SAMPLE Website:

<blockquote cite="http://negosyolink.com">

Indeed, opening your online business will bring some valuable returns to your business. ALWAYS KEEP IN MIND that the ULTIMATE GOAL of an ONLINE BUSINESS IS TO HELP AND GIVE VALUE. BE THERE WHEN YOUR CUSTOMERS CHECK ONLINE!

</blockquote>

----------------------------------------------

In Visual view:

Here is a quote from SAMPLE Website:

Indeed, opening your online business will bring some valuable returns to your business. ALWAYS KEEP IN MIND that the ULTIMATE GOAL of an ONLINE BUSINESS IS TO HELP AND GIVE VALUE. BE THERE WHEN YOUR CUSTOMERS CHECK ONLINE!

5. del - Defines text that has been deleted in a document

Example: <del>Deleted text</del>. In Visual view: Deleted text

6. ins - Defines a text that has been inserted into a document.

Example: My favorite fruit is <ins>apple</ins>! In Visual view: My favorite fruit is apple!

7. img - Defines an image in an HTML page

Example: <img src="sampleimage.jpg" width="100" height="100">
In Visual view:

NOTE: It is the same effect when uploading an image using Add Media and viewing it in a Text Editor mode.

8. ul - Defines an unordered (bulleted) list

Example:

<ul>
<li>Banana</li>
<li>Apple</li>
<li>Orange</li>
</ul>
In Visual view:

• Banana
• Apple
• Orange

9. ol - Defines an ordered list

Example:

<ol>
<li>Banana</li>
<li>Apple</li>
<li>Orange</li>
</ol>
In Visual view:

1. Banana
2. Apple
3. Orange

11. code - Defines a piece of computer code.

Example: <code>This is a sample code.</code> In Visual view: This is a sample code.

NOTE: Code tag is just a phrase which is possibly helpful in achieving richer effect with CSS.

12. more - Creates an excerpt out of any text/markup that precedes it

Example:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.

<!-more->

Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

----------------------------

In Visual view:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.

more..

Clicking on more will give the display below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.

Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

13. close tags - Closes the open tag

Example: You have an open <strong> tag, clicking on close tags will create a close tag </strong>. - That is, <strong> </strong>.

Please feel free to write your questions or comments below, if you have any.

Hope this helps.

All the best,

Jhen