HTML Tags For Bloggers

One thing I love about WordPress is that it makes it very easy to write and publish blog posts.

Its editor has two sections, the visual editor and the html editor.

Bloggers with no coding skills find it very easy to write their blog posts on the visual editor.

Many bloggers, especially new bloggers, think that writing a post on the html editor is very difficult and that you must extremely be good at coding. They may be right but html isn’t just for people who are into the web design business only.

As a blogger, you don’t have to master everything about html. You only need to know a few things that will help you craft great blog posts.

But first, let us learn a few terminologies:

What is HTML?

HTML is a web language.

It is a Markup Language used to write web pages.

HTML stands for Hypertext Markup Language. It describes the structure of web pages using markup.

HTML pages are made up of html elements.

The elements are represented by tags. Tags label pieces of content such as heading, paragraphs, tables, images, links and so on.

HTML Tags

HTML tags are element names surrounded by angle brackets.

Normally, html tags come in pairs, the opening and closing tags.

Example:

<tagname> The content is displayed here. </tagname>

Here are the html tags every blogger must know about:

1. HTML Headings

html tags- heading

Headings are defined with the <h1> to <h6> tags.

<h1> defines the biggest (usually, the most important) heading, while <h6> defines the least important one.
Search engines use the heading tags to index the structure of the content.

Readers/ blog users skim through the headings of your blog posts.

It is therefore important that you use the heading tags correctly to show the content structure.

<h1> should be used for the main headings, <h2> for the subheadings, followed by  <h3> and so on.

Here is how to write headings:

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

Each heading has a default font size. However, you can choose to adjust the font sizes of your headings. You can do this using the style attribute.

For example, if I wanted my <h1> to be bigger than the default size, I’d have something like this:

<h1 style= “font-size: 60px;”> A Bigger Heading 1 </h1>

It is important to note that a white space is added before and after the heading. Don’t use heading tags to make your texts bigger or bold. HTML headings are for headings only.

2. HTML Paragraphs

HTML paragraph is defined by  <p> tag.

It has both the opening and closing tags.

Example:

<p> This is my first paragraph </p>
<p> This is my second paragraph </p>

While writing your blog posts on the html editor, it is important to know that browsers display html tags differently. And you can never know how your tags are going to be displayed.

Let’s look at these cases:

Case 1

<p>
This is my first paragraph. And I don’t know how it’s going to be displayed on a browser.
</p>

Case 2

<p>
This is my first paragraph.
And I don’t know how it’s going to be displayed on a browser.
</p>

The two cases will be displayed in the same way even though I wrote the two sentences in different lines in Case 2.

Within the <p> tag, the browser considers everything to be continous.

So, to write sentences in different lines, you will need to use another html tag at the point where you want to break the line.

That brings us to the next html tag

3. HTML Line Break

A line break is defined by <br>.

It doesn’t have a closing/end tag which is why it’s called an empty tag.

If you want a new line within a paragraph, use <br>

If I wanted to write Case 2 correctly, I mean, starting the second sentence on a new line, I’d have something like this:

<p>

This is my first paragraph.<br>
And I don’t know how it’s going to be displayed on a browser.

</p>
<br> tag is also very important to those who write poems.
But what if you don’t want to use several of <br> tags, especially when you are writing a poem?
Then you will use a <pre> tag.

4. HTML <pre> Element

It defines a preformatted text.

The text inside a <pre> element is displayed in a fuxed-width font, and it maintains both spaces and line breaks.

It has both the opening and closing tags.

Example

<pre>
I love swimming,
Swimming makes me feel good,
I don’t compete though,
But hey!
I bet I can win against Phelps.
</pre>

5. HTML Links

Links allow users to navigate from page to page within a website.

HTML links are hyperlinks.

To insert a link into a blog post, you will use an <a> tag so that you’ll have something like this:

<a href=”url”> link text </a>

Example:

If I wanted to link to the About Us page within this website, I would write something like this:

<a href=”https://www.luminousblogging.com/about-us/”> About Us </a>

The href attribute specifies the destination address (https://www.luminousblogging.com/about-us/) of the link.

The link text is the visible part (About Us)

Clicking the link text will send the user to the specified address.

It is very much advisable to write your links on the html editor using the html links tag.

Why?

Because it gives you the opportunity to specify the value of the link for SEO purposes.  That is, if it’s a follow or nofollow link.

By default, all the links are follow links.To change them to nofollow links, you will need to add a nofollow value to the link tag.

Example:

<a href=”url” rel=”no-follow”> This link is nofollow</a>

The target attribute

The target attribute specifies where to open the linked web page.

It can have one of the following values:

  • _blank – Opens the linked document in a new window or table.
  • _self – Opens the linked page in the same window/tab as it was clicked (this is default)
  • _parent – Opens the linked web page in the parent frame.
  • _top – Opens the linked web page in the full body of the window.

This example will open the linked web page in a new window/tab:

<a href=”https://www.luminousblogging.com/about-us/” target=”_blank”> About Us </a>

One last thing about html links, you can be able to bookmark your content so as to make navigation easier within the content.

For example, if it’s a long posts, you can be able to manually create a table of content for your post.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example
First,create a bookmark with the id attribute:
<h2 id=”item1> Reason Number One </h2>
Then, add a link to the bookmark (“Jump to Reason Number One”), from within the same page:
<a href=”#item1″> Jump to Reason Number One </a>

6. HTML Lists

There are two types of lists:

Unordered lists

  • Tesla
  • BMW
  • Audi
  • Hyundai

Ordered lists

  1. Tesla
  2. BMW
  3. Audi
  4. Hyundai

Unordered List

An unordered list is defined by <ul> tag.

Each list item is defined by <li> tag.

By default, the items will be marked with bullets.

Example

<ul>
<li>Tesla</li>
<li>Audi</li>
<li>BMW</li>
<li>Hyundai</li>
</ul>

Ordered HTML Lists

An ordered list starts with <ol> tag.

Each list item begins with <li> tag and by default, the items are marked with numbers.

Example

<ol>
<li>Tesla</li>
<li>Audi</li>
<li>BMW</li>
<li>Hyundai</li>
</ol>

Others types of lists include:

Description lists

These are lists of terms with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

<dl>
<dt>HTML</dt>
<dd>- Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>- Cascading Style Sheets</dd>
</dl>

Nested Lists

These are lists within lists.

Example

<ul>
<li> Computers</li>
<li> Cars</li>
<ul>
<li>Tesla</li>
<li>Audi</li>
<li>BMW</li>
</ul>
<li>Cameras</li>
</ul>

List items can contain new lists and other HTML elements like links, etc.

Here is a list of html tags you should be aware of as a blogger.
<p>    – Defines a paragraph
<a>    – Defines a hyperlink
<br>   – Line Break
<pre> – Preformatted text
<b>    – Bold text
<q>    – Defines a short quotation
<ul>   – Defines an unorderd list
<ol>   – Defines an orderd list
<li>    – Defines a list item
<dl>   – Defines a description list
<dt>   – Defines a term/name within a description list
<dd>  – Defines a meaning of a term within a description list
<i>    – Defines an italicised text

Patrick

I am a twenty-something savvy web designer / social media manager / SEO strategist and a blogger based in Nairobi, Kenya. I am passionate about web design, HTML/CSS/Javascript, beautifying things and internet marketing. Follow me on social media and say hello!

You may also like...

4 Responses

  1. GourabIX says:

    nice tutorial!

  2. Rumiskitchen says:

    Good information about how to add html tags. Thanks for sharing
    http://www.rumiskitchen.blogspot.com

Leave a Reply

Your email address will not be published. Required fields are marked *