An Easy Guide to HTML for Bloggers

Konfinity
December 18,2020 - 5 min read
An easy guide to HTML for bloggers

Even if you are distantly related to or have no interest in technology, you would have probably come across the term ‘HTML’. Keeping in mind, the diverse audience of this blog, you might know what it looks like or have a slight idea of how it makes web pages.

A quick introduction of HTML would be that it is the foundational language of the web. HTML is responsible for the basic structure of the web pages as it creates the skeleton of the web page. HTML basically consists of tags and elements that helps in building a website or a blog from scratch.

HTML is a very important language and forms the basic structure of all modern websites out there. If you wish to become a web developer, HTML is a mandatory language. However, even if you are not interested in entering the world of technology, HTML can still prove to be a useful language for you.

If you wish to start your own blog and connect to an audience across the globe, we suggest you to first lean the basics of HTML before you start publishing your blogs. Knowledge of HTML would be of great help when you want to change the design of your blog or make minor technical changes like making a piece of text bold or italics or change the position and format of an image.

In today’s segment we would cover the basics of HTML which are going to be particularly useful for bloggers. The aim is that at the end of it, you’ll be able to write your own HTML code to make all the little tweaks you want in your blog. Even if you are a fresher and know nothing about HTML, this blog is going to help you with the basics and enable you to handle the minor changes in your blogs all by yourself.

This blog is particularly aimed at HTML for bloggers but it’s perfect for anybody who wants to get introduced to the world of web development and especially HTML. So, let’s get started!

What is HTML?

HTML is an acronym for ‘Hypertext mark-up language’. As the name suggests, it is used to format or mark- up plain text with paragraph breaks, bold or italic sections, coloured. In the definition of HTML, ‘hypertext’ means the text can include links to other resources on the web.

Let’s look at an example of a paragraph with and without HTML code to understand the difference that HTML makes.

  • Without HTML –

    Hi there, this is my first blog with a HTML code. I’m a blogger but very new to technology and hence I want to learn the language of HTML. I hope the knowledge of HTML makes my blog look more representable and attractive. This is the blog that would help everybody with HTML.

  • With HTML –
    Hi there, this is my first blog with a HTML code.

    I’m a blogger but very new to technology and hence I want to learn the language of HTML. I hope the knowledge of HTML makes my blog look more representable and attractive.

    This is the blog that would help everybody with HTML.

The second paragraph With HTML has paragraphs, bold text, underline text and italics and hence it is easier and more comprehensive to read. HTML code is already a part of all of your blog posts all you need to do is make some changes so that it looks more presentable and customised.

Now that you have a slight idea of HTML, let’s look at how can you actually work with it and hence edit the code and customise your blog.

Working with HTML Version of Blog Post

It’s important to know how you can view the HTML Version your Blog posts. When you write the content for your blog post, you use the “What You See Is What You Get” editor which lets you see your post formatted in the same way as it will appear on the final website. However, you can easily switch to the HTML view of your post by going on the ‘Text’ tab which is next to the ‘visual tab’ at the top of the posting box. Here, your post is marked up with the required HTML tags. Let us look at the previous example would look like in the HTML version –

  • <h1>Hi there, this is my first blog with a HTML code. </h1>
  • <p> I’m a blogger but very new to technology and hence I want to learn the language of HTML. I hope the knowledge of HTML makes my blog look more representable and attractive. </p>
  • <i>This is the blog that would help everybody with HTML. </i>

We have understood how to work with HTML version of Blog Post, but the it’s also important to know when would you require to use the HTML version of blog post instead of the normal format. Let’s understand why and when you might need to editing with the HTML code of your blog post.

Editing the HTML Code: When and Why?

Most of the bloggers prefer to stay on the visual editor as it is more user friendly and easy to use. However, if you need to do small technical changes in your blog, HTML is the language to rely on. For example, if you can’t undo or rectify the format of your blog in the visual editor, you might want to view the HTML code to spot and correct the problem. A concrete knowledge of HTML would help you achieve the desired result in a quick and efficient manner.

Now that we know how to turn on the HTML version of your blog post and when to edit the HTML code, it’s time we gain knowledge about the basic HTML tags and their uses. Let’s get started!

HTML Tags

We used some of the tags earlier in the blog. We used the <h1> tag, <p> tag and <i> tag. The <h1> tag is a header tag used for the title of a page or post. The <p> tag defines a paragraph and is a block-level element which always starts on a new line. The <i> tag displays the content inside in italic.

Let us look at some more tags that might prove to be useful while you are editing or formatting your blog.

  1. Line break

    This tag is represented written as ‘<br />’. There is a forward slash at the because the <br /> tag is opened and closed all in one. It is used to create a single line break, an example of <br /> tag is displayed below.

    • This
    • is
    • how
    • you
    • use
    • the
    • Line
    • Break
    • Tag.
  2. Lists

    Lists are an important element of HTML and as a blogger it is all the more significant. In HTML, there are two kinds of lists, ordered (with numbers or any other sequence) and unordered (without numbers, using bullet points). Unordered list is represented using the <ul> tag and ordered list is represented using the <ol> tag. The elements inside of the list are marked using the <li> tag. A list in HTML need an opening and a closing tag and it is the same with each item in the list. Let us look an example of unordered list below.

    • <p>Courses offered in Konfinity are:</p>
    • <ul>
    • <li>Web Development</li>
    • <li>gFront End Development</li>
    • <li>Data Science</li>
    • </ul>

    The output of this code would look like –

    Courses offered in Konfinity are:

    • Web Development
    • Front End Development
    • Data Science

    On the other hand, the HTML code for ordered list would be -

    • <p>Courses offered in Konfinity are:</p>
    • <ol>
    • <li>Web Development</li>
    • <li>Front End Development</li>
    • <li>Data Science</li>
    • </ol>

    The output of this code would look like –

    Courses offered in Konfinity are:

    1. Web Development
    2. Front End Development
    3. Data Science
  3. Links

    The link tag is used to add a link to any HTML element that redirects the user to another resource on web. It is represented using the anchor tag <a>. For example,

    <a href="https: //www.konfinity.com/HTML5-interview-questions">HTML5 Interview Question</a>

    This HTML code produces an output like -

    HTML5 Interview Question
  4. Images

    The image tag is used to embed an image in your blog or website. is represented using <img> tag. In the syntax of the image tag, we write “src” which basically means the “source” of the image. You can also use the <alt> tag to put an alternate name to your image, it is particularly useful when the image is not completely on the web page.

HTML for Bloggers

This was our HTML guide for all bloggers out there. We strongly suggest you to try some of these HTML tags and do some magic on your blog to attract more audience. We hope that now you are more confident about HTML and are sure about editing code to transform and customise your blog according to your interest. It is best to explore more diverse HTML tags and practice as much as you can. One of the best ways to design your blog using HTML code is to first spend time in exploring your blog, its audience and then analysing the customisations and changes your blog requires. You can do a lot with just HTML if you know the right tips, tricks and practices. We hope that you are ready to do something new with your blog using the HTML knowledge you have gained from this blog. If you are a blogger, we strongly suggest you to make use of the basic HTML knowledge, spend time on polishing your web design skill using HTML and make your blog more attractive and dynamic in order to attract the audience from a global platform. Here’s hoping that you are going to ace your game when it comes to blogging. We would like to wish you all the best for your journey ahead in blogging.

However, if you want to move a step ahead and become more proficient in coding and probably make a career in it, we strongly suggest you to take a professional course. When you want to make a lucrative career in technology, it is important that you start with professional guidance with mentors from the industry itself. You should choose a course which helps you make projects related to the domain you are training in because they are going to help you stand out when you apply for a job in your dream company. There is one such course that we personally recommend.

We would like to tell you that Konfinity ‘s Web Development Course is a well-researched training course. It is developed by experts from IIT DELHI in collaboration with tech companies like Google, Amazon and Microsoft. It is trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more.

We encourage technocrats like you to join the course to master the art of creating web applications by learning the latest technologies, right from basic HTML to advanced and dynamic websites, in just a span of a few months.

Konfinity is a great platform for launching a lucrative tech career. We will get you started by helping you get placed in a high paying job. One amazing thing about our course is that no prior coding experience is required to take up our courses. Start your free trial here.

Chat with us