Top 10 HTML & CSS Codes That All Bloggers Should Know

PLEASE NOTE: This post only explains the Top 10 codes. Want 20 More?!
Click here to download the “Top 30+ HTML/CSS Codes That All Bloggers Should Know” FREE ebook & cheat sheet!

Coding can be frustrating.

Believe me, I know…..I’m a front-end website coder.

You miss one little bracket and WHOOOSHHHHH all of your hard work goes out the window & you end up spending more time trying to figure out WHAT went wrong, instead of fixing it.

Now toss blogging/business tasks & social media on top of that…talk about a brain overload.

How are you supposed to remember codes when your mind is completely overflowing with to-do lists for not only your blog….but your business….

Well, with my help!

In a perfect world, everyone with a website or blog would take the time to understand coding, so they can use it to its full advantage. It all can be quite powerful (I do this for a living & I’m still amazed at the things I can do with a few shortcodes)

I’m not going to get into the crazy stuff….because that would just add more to your brain overload, BUT I do think it’s beneficial to have a little cheat-sheet of the most used HTML codes…. so you can easily format/customize your blog, all by yourself!

I’ve put together a list of must-know HTML codes for bloggers & business owners.

All of the codes are copy & paste ready, so when you see what you need, you can take it & run!

I know WordPress’s dashboard has a lot of these links made super easy to customize in the editor….but what if you want to add special things to your sidebar/widgets/guest post?!

(Please note: Your URL and Text does NOT have to be capitalized, I’m only doing that in my examples so it’s easy to distinguish from the rest & so you can see exactly what to replace when you’re adding in your own information.)

#1. Manually Entering Images

<img src="URL OF THE IMAGE">

How do you find the URL of an image?! Well, if you’re in WordPress you can click on your “Media” Library. Click on the image. And the URL should be displayed in the attachment details.

If you want to copy an image from the internet, you can right-click and select the “Copy Image URL”

#2. Hyperlinks!

<a href="URL OF WEBPAGE YOU WANT TO LINK TO">Text that you want to be clickable</a>

What if you want an image to be clickable?! I got that one covered to. It combines the code for the manually entered image, with the code above for the hyperlink.

<a href="URL OF WEBPAGE YOU WANT TO LINK TO"><img src="URL OF IMAGE"></a>

What if you want your webpage to open up in a new tab when someone clicks on it?

Not a problem. You would add this little code:

target="_blank"

Where would you add it? Take a look at this example:

<a href="URL OF WEBPAGE YOU WANT TO LINK TO" target="_blank">Text that you want to be clickable</a>

#3 – LISTS!

There are two main types of lists. Ordered & Unordered.

Ordered Lists are “numbered lists”.

And here’s the code:

<ol>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
</ol>

– Unordered Lists are the ones with bullet points.

And here’s the code:

<ul>
<li>Bullet Item #1</li>
<li>Bullet Item #2</li>
<li>Bullet Item #3</li>
</ul>

Notice the only difference is the “ol” or “ul” – so be careful that you don’t swap them when you don’t mean to!

#4 – NO FOLLOW LINKS

<a href="URL OF WEBPAGE YOU WANT TO LINK TO" rel="nofollow">Text that you want to be clickable</a>

By setting a link to “no follow” you are telling Google search bots not to follow that specific link.

When should this be used?

Google says that all links that are: Paid/Affiliated &/OR Untrusted Content should be “no follow”.
Read the specifics on Google’s No Follow Policy

#5 – LINK TO PART OF A PAGE

Want to have a link that takes the user to another part of the same page? The code for that is easy, but it has two parts. The first part is the link, that the user would actually click on. The second part is the area that the link would bring them to.

This code goes where you want the clickable link to be:

<a href="#SECTIONNAME">Text that you want to be clickable</a>

Don’t forget that # in front of your section name. In the coding world, that means “id”. So it’s like an identifier.

This code would go to the specific point on your page, that you want the user to end up at, when they click the link:

<div id="#SECTIONNAME">Text that you want them to end up at after they click the other link</div>

#6 – TEXT STYLING

This code will make your text bold:

<strong>TEXT THAT YOU WANT TO BE BOLD</strong>

This code will make your text underlined:

<u>TEXT THAT YOU WANT TO BE UNDERLINED</u>

This code will make your text italicized:

<em>TEXT THAT YOU WANT TO BE ITALICIZED</em>

#7 – HORIZONTAL LINE

Want to add a horizontal line like this?

This code is super easy, with just 4 little characters.

<hr>

#8 – HEADINGS

When it comes to headings, you have 6 options. 6? Yes, 6. Usually, bloggers stick with headings 1-3.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>WHATEVER YOU WANT YOUR HEADING TO BE</h1>

You can replace the code below with h2, h3, h4, h5, h6. So use the number of the heading, to define which one you want to use in the code.

#9 – SUBSCRIPT/SUPERSCRIPT

Do you need certain letters or words to appear smaller & lower then the others?
Use the subscript code:

<sub>WHATEVER TEXT YOU WANT SMALL & LOW</sub>

Do you need certain letters or words to appear smaller & higher then the others?
Use the superscript code:

<sup>WHATEVER TEXT YOU WANT SMALL & HIGH</sup>

#10 – E-MAIL ADDRESS LINK

Sometimes you don’t want to have a contact form as your only source of communication with your users. Here’s how you add your e-mail address as a link! It makes e-mailing from your website super easy….with only one click.

<a href="mailto:name@domainname.com">E-mail Us!</a>

(You can change the “E-mail Us!” text to be anything you want!)

Want More Codes?! I thought you might!

Give Me The Codes!