How does HTML works in WordPress

For the basic usage of WordPress you don’t need HTML. If you are editing in visual mode you normally don’t see any HTML tag, because the coding is done in the background by Wordpress. This concerns the classical text editing, creating links or inserting medias (pictures, videos or audio files).

But this has also limits. For instance if you want to insert a rule, there’s no predefined editing command.

Some themes and plugins are offering more extended editing commands.

If you leave now the visual mode and you enter the text mode you will see all the basic HTML tags.

Let me explain a little bit how you can edit in using the text mode.

If you want to have a phrase in bold, first click the bold button (b), the opening tag <b> is inserted. At the end of the phrase you click again the same button and the closing tag </> will appear. You can also select the whole phrase and click on the bold button, in that case opening and closing tag will be set.

The function of the different buttons.

b = strong aka bold: <strong> Your text </strong>

i = italique aka emphased: <em> Your Text </em>

link = creating a link: <a href="http://mywebsite.com">click here</a>

b-quote = creating a blockquote: <blockquote>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</blockquote>

del = strikethrough - deleted text: <del datetime="2014-03-20T20:51:56+00:00">The quick brown fox jumps over the lazy dog. </del>
ins = insert new text:<ins datetime="2014-03-20T20:51:56+00:00">The quick brown fox jumps over the lazy dog.</ins>

These both functions are used to delete text that will stay on your page and insert a corrected version. To follow your corrections you will find in the text mode date and time of the correction.

<img> = image link: <img src="http://mywebsite.com/wp-content/uploads//Cannes.jpg" alt="" />

As you see the construction of this tag is quite more difficult and the opening and closing tags are combined and you see two attributes src and alt. In part 2 of this tutorial you will learn more about attributes

<ul> = unordered list (bulleted)
<ol> = ordered list (alphanumeric)
<li> = sentence of the list

<ul>
<li>The quick brown fox jumps over the lazy dog.</li>
<li>The quick brown fox jumps over the lazy dog.</li>
<li>The quick brown fox jumps over the lazy dog.</li>
<li>The quick brown fox jumps over the lazy dog.</li>
</ul>