Simple HTML every blogger needs to know

Simple HTML every blogger needs to know

When you started your blog, you probably didn’t think you’d end up needing to know HTML coding, did you?

You might not ever be able to build a website from scratch, but knowing some HTML, and when to use it, will really help you to add styling, links, images and lots more to your blog.

If you’re still a beginner when it comes to HTML, the following list could be a useful one for you to bookmark so you can copy and paste when you need to use it. Think of it like your HTML cheat sheet.

Read on for our list of simple HTML every blogger needs to know…

 

What is HTML?

HTML (short for Hypertext Markup Language) is the language used to create websites.

Your blog’s template is made with HTML coding which controls what your blog looks like, where images go, how links work, and lots more.

 

Adding HTML to your blog posts

When you add HTML to your posts, remember that you need to add the code within the ‘Text’ editor section.

All HTML code must start with <> and end with </> to ensure it’s formatted correctly.

Pay attention when adding HTML code and tags – one letter or symbol out of place and the code won’t work!

 

Adding headings

Headings are very important in blog posts as they help to break up your text so it’s easy to read. Headings are also important for Search Engine Optimisation.

H1 is the biggest heading size and should be kept for the main headline in your post.

H6 is the smallest and can be used for subheadings.

 

To add headings within your blog post, wrap the heading text with the following HTML tags:

 

Heading 1 (H1)

<h1>Heading 1</h1>

Heading 2 (H2)

<h2>Heading 2</h2>

Heading 3 (H3)

<h3>Heading 3</h3>

Heading 4 (H4)

<h4>Heading 4</h4>

Heading 5 (H5)

<h5>Heading 5</h5>

Heading 6 (H6)

<h6>Heading 6</h6>

 

Adding paragraphs

Paragraph breaks are important to break up sections within your content and allow your readers to digest it easily – especially when reading on smaller sceens such as mobile devices.

To add a paragraph break you need to wrap the text with the tags <p> and </p> as per the below example:

 

<p> Your paragraph text goes here</p>

 

Knowing basic HTML will help you to customise your blog. Check out our list of simple HTML for bloggers to get you started Click To Tweet

 

Formatting your text

You will be able to change the formatting styles by using the visual editor in WordPress. However, if you want to learn how to change this using HTML the following tags will come in handy…

Bold/Strong

Make your text bold (also sometimes called strong) by wrapping the text with <strong> </strong>

 

Underline

You can underline text by wrapping it with <u> </u>

 

Italic

Make text italic by wrapping it with <em> </em>

 

Strikethrough/delete

Strikethrough text when you want to suggest deleting it by wrapping it with <del> </del>

 

Adding lists

Lists also help to break up your text to make it easier to read. Your lists can either be bulleted (unordered) or numbered (ordered)

Bullet lists

To add a list of bullet points that looks like this:

  • Point 1
  • Point2
  • Point 3
  • Point 4

You will need to use the following HTML:

<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
</ul>

Numbered lists

To add a numbered list that looks like this:

  1. Point 1
  2. Point 2
  3. Point 3
  4. Point 4

You will need to use the following HTML:

<ol>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
</ol>

 



Aligning text or an image centrally

To center align some text or an image, wrap the text or image with the following tag:

<center> </center>

 

Adding links

It’s important to add both internal and external links in your blog posts, this will help with SEO as well as to help your readers to find other content of interest on your blog.

To add a link within your content use the following HTML, replacing our link with your chosen link:

<a href=”http://www.wakeupandblog.co.uk”>Link text goes here</a>

To add a link that opens up in a new window, use the following HTML:

<a href=”http://www.wakeupandblog.co.uk” target=”_blank”>Link text goes here</a>

 

Making links ‘no follow’

If you want to make a link ‘no follow’ so that Google ignores it, you need to use the following HTML, replacing our link with your chosen link:

<a href=”http://www.wakeupandblog.co.uk” rel=”nofollow”>Link text goes here</a>

 

Learn more about ‘no follow’ links and when/why to use them here.

 

Adding an email link

To insert a link to an email address so your readers can contact you, use the HTML code below:

<a href=”mailto:name@domain.com”>Email Me</a>

 

Adding an image

If you want to add an image into your blog post, you will need the following HTML code:

<img src=”http://www.yourwebsite/imagename.jpg” alt=”image alt text”/>

Replace the URL with the location of your image and replace ‘image alt text’ with the text you want to use to describe your image.

 

Hiding an image

You might want to hide an image within your blog post if, for example, you’re hiding pinnable images.

To hide an image/pin you will need to wrap your image with the following HTML tags:

<div style =”display:none;”> </div>

 

Adding quotes

If you want to add a quote into your blog post, you can do this by using the blockquote tags.

<blockquote>Insert your quote</blockquote>

Your quote will look like this.

 

Adding a horizontal line

You can add horizontal lines to your content like this:


All you need to do this is insert the following tag:

<hr>

 

Have the above HTML  tags made sense to you? Hopefully these will make your life easier – don’t forget to bookmark, favourite or pin this post so you can come back to it to copy and paste the HTML code when you need to use it on your blog.

Are there any other HTML tags you need to know? If so, let us know in the comments below!

If you think we’ve missed any important ones do let us know too!



A guide to the easy HTML codes all bloggers should know | Basic HTML for bloggers | HTML cheat sheet for bloggers | Learn HTML coding for bloggers
Check out this check list of easy HTML code all bloggers should know | Basic HTML code for bloggers | HTML cheat sheet
Knowing some basic HTML coding will help you to customise your blog. If you're unsure where to start click through to our list of simple html every blogger needs to know | HTML coding for bloggers | HTML for beginners | blogging tips | customise your blog

2 Replies to “Simple HTML every blogger needs to know”

Leave a Reply

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