HTML Basics For Bloggers | 10 HTML Tags You Should Know For Blogging

This is for all those bloggers with non-technical background who struggle with the technicalities involved in the process of blogging. One of the major issues bloggers face, especially if they don’t have a technical background (in Computer Science/Coding/Web Designing) is with HTML. So without further ado, lets start with the HTML Basics For Bloggers tutorial. I repeat, this tutorial is mainly for bloggers from non-technical background and involves a lot of basics.

HTML Basics For Bloggers

HTML is an abbreviation for Hyper Text Markup Language. To put it in a nutshell, HTML is the language to display i.e., to display a text/image/basically anything in a page of a website. That’s how a content gets formatted and “looks” like that on a webpage. There are lot more things involved to make content look wonderful on a website, but lets just stick to the HTML first. Once you write HTML code in a file, you save the file as filename.html. Inside this file, you will have the everything written in tags that look something like this.

<sampletag> <!-- I'm a comment. And this is a starting tag-->

Content to be formatted

</sampletag> <!-- I too am a comment. And this is an ending tag-->

HTML Basics For Bloggers | 10 HTML Tags You Should Know For Blogging

Paragraph <p>

Without knowing this, you could end up in a lot of trouble (like I did even WITH knowing this!). This is the basic and the most important tag. Like the name says, it formats the content inside the tag as a paragraph. In the HTML editors if you hit ‘Enter’ that means you are starting a new paragraph. So keep that in mind next time you are writing something!

Anchor <a>

HTML Anchor Tag

The next important tag in the HTML Basics for Bloggers is, Anchor tag. An anchor tag creates a hyperlink out of the content within the tag. For example, check out my previous post on FREE WordPress Plugins. Here ‘FREE WordPress Plugins’ forms the anchor text which links to the URL of the post.

Image <img>

The image tag displays an image in a webpage.

Also, did you know, you could insert an image instead of Anchor text? That’s how pictures are made clickable in almost all websites online! Just nest image inside the anchor tag.

Heading <h>

A <h> tag displays the text inside in the form of a heading, bold and large. HTML allows to use 6 sizes of headings ranging from 1 to 6. A h1 tag is usually the title of the article. H2 is the main heading inside the article. And so on.

Bold <strong>

The <strong> tag displays the text inside in bold formatting. This is a straightforward one.

Strikethrough <del>

A <del> tag or strikethrough tag displays the text inside like this. Literally a strike through the text and hence the name. Best for displaying discounts, changed dates/timings/venue or anything for that matter. It all depends on your requirements.

Italics <em>

As the name says, the italics tag or <em> displays the content inside in Italicized formatting. Like this.

Blockquote <quote>

The blockquote or <quote> tag, as per the name, quotes the text inside the tag. It appears like a quote from a book. Like this.

This is a block and it sure appears as one. Don’t you think?

Ordered and Unordered Lists <ol> & <ul>

An ordered list, in short, is a numbered list. It uses the <ol> tag. Everything inside it will appear as a list in an order/ numbered.

An unordered list on the other hand is our regular bulleted list. It uses the <ul> tag. Everything inside will appear as individual bullets in a list.

Examples: 

Ordered List

I am fluent in the following languages:

  1. C
  2. C++
  3. Python

Unordered List

I am fluent in the following languages:

  • C
  • C++
  • Python

Code <code>

Code tag comes handy when you have to display a block of programming code like ‘code’ and I mean something like this.

This is supposed to be a code section, which looks like I have typed a program here.

That’s the entire HTML Basics for Bloggers! The HTML editors nowadays usually come with shortcuts for all these. Instead of typing, you could just click on it and use it.

Hope this post was useful. If yes, do leave a comment and share this post on FB. If you are interested, you can read more about HTML here.

For regular updates, subscribe to our newsletter and follow us on Bloggerspod FB HERE.

Add a Comment

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