Writing a blog on WordPress doesn’t really require HTML skill but it definitely helps if you know some. Here is a simple and easy guide to HTML for all bloggers.

DISCLOSURE: This post may contain affiliate links, meaning I get a small commission if you decide to make a purchase through my links, at no additional cost to you. Please read my full disclaimer here for more info.

First, what is HTML?

HTML is Hyper Text Markup Language for creating Web pages. It’s a structural part of a web page and looks like these:

A browser does not display the HTML tags but uses them to determine how to display the document.

Where is the HTML editor in WordPress?

Again, you don’t really need HTML skills to write an article on WordPress. But you can edit HTML code by following these steps:

• Create post
• Click option (it’s three dots on upper right corner)
• Under the editor, click code editor
• Now, your preview page is in HTML mode
• If you want to go back to the original editor page, click visual editor on top of code editor.

Adding HTML to a WordPress Page Without Using Code Editor

If you don’t want to use code editor, you can directly insert custom HTML code into your post by following these steps:

• Click add block
• Type “Custom HTML” in the search bar
• Click “”Custom HTML” in search result
• Write HTML code directly into Custom HTML box

HTML Codes That All Bloggers Should Know

Highlight Text in Color

This text is highlighted in blue and probably caught your eye first. It maybe depends on what WordPress version you use, but mine did not have the “Highlight Text in Color” option by default.

To highlight text with HTML code, set the background-color style, as shown in the example below:

<span style="background-color: #C3E9FF">This text is highlighted in blue and probably caught your eye first.  </span>

“#C3E9FF” these 7-digit symbols and numbers are called color codes. You can change the text color by editing color codes.

For example, #000000 is black. #FF0000 is red. #AB00FF is purple. #E5FF00 is orange. Html Color Codes is a great website to sneak peek at color codes!

Highlight a Complete Paragraph

The paragraph in HTML is created by the p tag. If you wanted to highlight a complete paragraph, embed color code in the p tag.

Example code:

<p style="background-color: #C3E9FF">
This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue.
</p>

Example result:

This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue. This whole paragraph of text is highlighted in blue.

Adding The Dotted Outline

An outline is a line that is drawn around elements, outside the borders, to make the element stand out. To add a dotted outline around elements, simply style the div tag.

Example code:

<div style="border-style:dotted;border-width:3px;padding: 10px 5px 10px 20px;">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</div>

Example result:

Talking Bubble

You can style div tag in a variety of ways. For instance, the talking bubble effect.

Example code:

<div  style="position: relative; padding: 1em; background: #e0edff;">
Hello, World!
<span  style="position: absolute;  top: 100%;  left: 30px;  border: 15px solid   transparent;  border-top: 15px solid #e0edff;  width: 0;  height: 0;">
</span>
</div>

Example result:

In this case, you create the upper rectangle and lower triangle separately. “div style” part is the upper rectangle, and the “span style” is the lower triangle. If you change span style color into black, it will look like this:

Example result:

Can you see? The lower triangle became black now.

Embed an Image

Images are not technically inserted into a web page. Images are just linked to web pages. When the HTML IMG tag is called the image, the web page access the server and displays images.

Have you ever experienced “images are not shown” on your WordPress site in the past? If yes, it’s not because your images or WordPress are broken. The connection between the website and the server is not good. If you experience “images are not shown” too often, consider switching your web hosting or web hosting plan.

Well, anyway here’s an IMG tag example:

<img src="" alt="" width="" height="">

• src= insert image link
• alt= specifies an alternate text for an image
• width= specifies the width of an image
• height= specifies the height of an image

HTML Formatting Elements

Formatting elements were designed to display special types of text! Maybe most bloggers are already familiar with these:

• b – Bold text
• i – Italic text
• del – Deleted text
• ins – Underline text

<b> This is bold text. </b>

<i> This is italic text. </i>

<del> This is deleted text. </del>

<ins> This is underline text. </ins>

Table

Table tag is very useful if you want to compare multiple data. You can add a table by clicking “add block” and selecting a table.

If you want to edit your table manually, use these HTML tags:

<table>
 <tbody>
  <tr>
   <td>Title 1</td>
   <td>Title 2</td>
   <td>Title 3</td>
  </tr>

   <tr>
    <td>Item 1-1</td>
    <td>Item 2-1</td>
    <td>Item 3-1</td>
   </tr>
   <tr>
    <td>Item 1-2</td>
    <td>Item 2-2</td>
    <td>Item 3-2</td>
   </tr>
   <tr>
    <td>Item 1-3</td>
    <td>Item 2-3</td>
    <td>Item 3-3</td>
   </tr>
 </tbody>
</table>

Example result:

Wrapping Up

That’s all! These are all decorative elements for your blog posts. If you want to study HTML, I highly recommend HTML and CSS: Design and Build Websites written by Jon Duckett. It is a full-color introduction to the basics of HTML and CSS. Utilizes information graphics and lifestyle photography to explain the topics in a simple way. Very good book for beginners.

Happy Cording!