Top 10 HTML and CSS Codes That All Bloggers Should Know

Thanks to powerful visual editors that are standard with most content management systems (like WordPress!), almost anyone can write and format their blog posts without the need for learning HTML or CSS. But just because you can, doesn’t mean that you should in this case. I believe a little knowledge can go a really long way, and so I have compiled a list of the Top 10 HTML & CSS codes that a blogger should know.

HTML and CSS Codes That All Bloggers Should Know

 

Headings

^ See that? That’s a heading. It’s a way of formatting and breaking up a blog post so that the information is easier to read. It not only looks better visually, it makes the content easy to follow and visually digest. Every blogger should be using headings and know how to use them correctly.

There are 6 size options as follows:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

 
It’s important to know first that for SEO purposes, you should use headings in order of importance – the most important heading on the page (for a blogger, this would be the title of the page or blog post) should utilize Heading 1 or 2, while headings in the content would use Headings 3-6.

Here’s what the coding would look like:

 

Hyperlinks

Learning how to write out a link yourself and understanding how they work is something any blogger should know – especially if you’re linking to content outside of your website. Here’s what a pretty standard link would look like, and how to create it:

Another blog post written by Kimi

 

Adding No Follow Tag

Did you know that the FTC requires your sponsored and affiliate links to include what’s called a “No Follow” tag? It prevents other websites from capitalizing further on those links. Not including a No Follow tag is sort of like giving the page found at that link a “vote” in favor of its content. Here’s how you add the tag to your links:

 

Manually Inserting Images

Sure, you probably have some sort of visual editor (like the one in WordPress), but every blogger should know how to manually insert an image into a post, page, or widget.

 

Linking an Image

Turning your images into links is not only easy – it’s a great way to get people to click through to important content. You can combine the HTML for making links, and manually inserting images – even add in the no follow tag too if you’d like!

 

Lists

I love a good list… and they don’t have to be difficult to put together. There are a couple of types of lists: Ordered (1, 2, 3) and Unordered (usually made of bullet points). Here’s what they look like.

  1. List Item 1
  2. List Item 2
  3. List Item 3
  • List Item 1
  • List Item 2
  • List Item 3

These are so simple to make, and they are a nice formatting trick that makes everything easy to read in your blog posts. The big difference between the two types is the opening and closing tag – “ol” for Ordered List, and “ul” for Unordered List. Easy, right!?

 

Basic Text Styling

Putting special emphasis on words in your blog posts is a bold way to add make your sentences striking! See what I did there? Basic text styling is one of the more commonly used HTML codes, and are a great way to change the voice of your blog posts.

BOLD

EMPHASIS

STRIKETHROUGH


 

Advanced Text Styling

Maybe you want more advanced ways of changing the styling of your text including changing the color of a few words, or even changing the font family or the size of your words.

CHANGING THE FONT COLOR

CHANGE THE FONT

CHANGE THE SIZE OF WORDS

 

Email Address Link

You can make it easy for people to email you with just one click by turning your email address into a link like this one: Click Here to email Hello You Designs

This is a great way to provide another form of communication in case your contact forms ever fail you.

 

Table with Headings

Another fantastic formatting trick for your blog posts that can keep information organized is a Table with a Heading. It looks like this:
 

Heading 1
Heading 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 3

These can be a little tricky to make because you have to pay close attention to the tags for Table Headings (th), Table Row (tr), and Table Details (td). Here’s the code for the table shown above:

Buttons

Most themes will come with the option to add a button to your post or page. This button style will be preset within your theme.

View themes

 

What HTML and CSS codes are important to you?

Let us know what codes you use regularly in the comments below.