HTML & CSS for Bloggers: Basics That Help with SEO

4 min read
HTML & CSS
By: Maddy Osman

This post represents the first in my series about helpful HTML & CSS for Bloggers.

taught myself basic web design at age 11. This led to an excellent job throughout my college years and lots of freelance opportunities since then.

Knowing how to code, specifically in HTML & CSS, is no longer a prerequisite for bloggers. Easy to use themes and plugins and WordPress have filled the gaps between what people want and their technical experience.

Regardless, it’s helpful to have an understanding of how things work, especially if you need to customize different elements of your website. These tips regarding HTML & CSS for bloggers will help with understanding SEO.

Basic HTML & CSS for Bloggers

An HTML tag tells a browser what to display. Of all the machine languages, HTML is the closest to human language. In general, it’s not difficult to figure out the basic purpose behind an HTML tag.

In general a tag has two carets and an opening tag looks something like this:

 

And an ending tag is the same thing with a backslash:

 

In general, you need both an opening tag and an ending tag to start and close an HTML command. Failing to close a tag could result in a weird looking page (or worse).

Headings

One of the first things that comes to mind in the discussion of HTML & CSS for bloggers in relation to SEO is headings.

<h1>Title</h1>

The above code snippet represents a title tag. The “h” in the tag refers to a heading, the number refers to it’s level of importance. The h1 tag should be the title of your blog post.

<h2>Subheading with Keyword</h2>

The h2 tag should be a subheading supporting the title that contains a keyword.

H3-H6 tags are additional subheading tools you may or may not use. You can edit the size, color, font, position, and more of the headings in the CSS, but we’ll save that lesson for another time. In general, make sure that the heading tags make sense for the content. The h1 tag should be the largest; everything else should scale down from there.

Headings are an important signal to search engines to show relevance. Make sure to use your keyword in at least two (but preferably more) headings.

While h2-h6 headings can be used as many times per page as you want or is necessary, h1 headings should only be used once per page. SEO Consultant Alistair Gill says that people tend to misuse h1 headings because they want to make text bigger.

“The problem with multiple h1s is they dilute relevance. The search engines use them to decide what content is about, so if you use more than one they have to make a decision about which is more important.” – Alistair Gill

Content

The following HTML & CSS tags are not necessary to memorize, but are helpful to know.

<strong>Bolds Text</strong>
<em>Italicizes Text</em>
<span style="text-decoration: underline">Underlines Text</span>

Strong for bold, em(phasize) for italics and underline for underline. Pretty simple, right?

Ideally, however, anything with “style=” will be housed on a separate CSS document – not within the code on your post. What’s known as inline CSS (CSS styles on the page, not a separate document) is bad for SEO in that it can reduce page load speeds. We will dig deeper into this topic in a subsequent lesson. Make sure to sign up for my email newsletter to be alerted when it’s published (signup form in the sidebar)!

Adding text decorations to your keyword in text is an additional signal to search engines for article relevance. If possible, use all three of these text treatments on keywords throughout your article. Just don’t sacrifice readability.

There are older, “deprecated” text decoration tags that are now considered to be outdated to search engines. These include:

<b>Bolds Text</b>
<i>Italicizes Text</i>
<u>Underlines Text</u>

While these are easier to remember and seem to make more logical sense, search engines will interpret these as a sign that you’re not keeping up to date with new best practices and it may cause you to drop in the search engines results page (not good!). Opt instead for the previous list of HTML & CSS tags.

Images

The most basic version of image HTML for SEO looks like this:

<img src="IMAGE.JPG" alt="Keyword">

The “img” part of the tag is just telling the page to call up an image. “src” is the source of the file – put your image URL in here. The URL should contain your keyword, so rename, save, and re-upload your image if necessary. The “alt” command was originally created for screen readers to help provide accessibility to people with disabilities using the internet. While you should use it to describe the image, it’s also very important to include your keyword here as well. An image is a powerful communicator of relevance to a search engine – so make sure to use it as such!

An additional SEO boost can be achieved by adding internal links to pages and posts that create a bridge to other parts of your blog (or website). This helps the search engines connect the dots between the content on your website, which helps you achieve better relevance in search results.

Although WordPress (and other content management systems with WYSIWYG editors) have made it extremely easy to add links without an understanding of HTML & CSS, here’s what the basic code looks like:

Link Text

Let’s break it down:

The “a” is an anchor. This tells the page that you’re calling up another page. “href” is like the “src” in the image tag. This tells the page what you’re calling up. In between the quotations are the page URL. In between the carats after the quotation marks, you add in the link text.

Besides linking between pages on your blog, outbound likes also positively affect SEO. Aim to include two or more in each post, potentially to a thought leader or featured business.

pinterest -mini-image-blk

Final Thoughts: HTML & CSS for Bloggers — Basics That Help with SEO

There you have it. Once you know the basics, learning more advanced will be much easier. Hope you enjoyed reading this and were inspired to optimize your blog in some way. These basics will give you enough to get started in your quest to learn general HTML & CSS for bloggers.

Leave your HTML & CSS questions in the comments and they might make it into another future blog topic.

Avatar

Maddy Osman

The Blogsmith

Maddy Osman is the author of Writing for Humans and Robots: The New Rules of Content Style. She's a digital native with a decade-long devotion to creating engaging, accessible, and relevant content. Her efforts have earned her a spot in BuzzSumo’s Top 100 Content Marketers and The Write Life’s 100 Best Websites for Writers. She has spoken for audiences at WordCamp US, SearchCon, and Denver Startup Week.

Join the Discussion (6)

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

Bookmarking this! Thank you for sharing this super clear and easy to follow tutorial! I will definitely be sending this around to friends and colleagues.

xx larisa @ weheartbeauty.com

Michelle,

Glad to help you reach clarity! Happy to answer any questions you have as they come up 🙂

Maddy

This post was so helpful in so many ways. I am struggling with SEO at the moment as well as understanding h1 and h2. I actually didn’t know what they were until I read this mail . Thanks for sharing such an informative post. Will write you a message if I have nay questions.

Michelle
http://twenty7bymichelle.com/

Morgan,

Thanks for checking it out! If you ever have any specific questions – let me know. Could make for a fun blog post 🙂

Maddy