HTML 101 for Bloggers

Photo by ryanoshea.

Make your website awesome with Shareaholic. Get our free tools now.

Let’s be real. When most of us started our first blog, we didn’t sign up to learn how to code—I know I didn’t. I was excited to express myself, learn a ton and maybe even get a job out of it.

Once I joined Shareaholic and began blogging more often, I realized that I needed to get myself in gear and learn some basic HTML. And here’s a reality check: you do too. No matter how many pageviews you have, having an understanding of HTML is key to having a successful blog.

Need to force an image to stay on the right of your post instead of drifting to the middle? HTML.

Need to install analytics to track your success? HTML.

Don’t want to bother your web designer with the small stuff? HTML.

You don’t need to be a coding genius to rock your blog, but you should have a basic understanding of the terminology and a few tags up your sleeve to take your blog posts to the next level.

Understanding HTML

Before we get into the tags you need to know, I wanted to give you a quick intro into some general HTML terminology and structure. This way, you’ll understand what I’m talking about later in the post once we get to the top tags you should know.

Opening and closing tags

In any piece of code, there will be an opening and closing tag. The opening tag starts off the sequence with a left angle bracket, a character (or two) signifying what the tag is supposed to do, and a right angle bracket. A closing tag ends the sequence in the same manner—it looks just like the opening tag, but it has a forward slash before the character. Here’s a visual breakdown for you:

opening and closing tags 2

Include the object or text you want to modify in between

Think of opening and closing tags like a container for content. The opening and closing tags surround all the elements they are modifying—anything in that “bucket” of HTML will obey the rules of the opening and closing tags.

It’s very important to understand what opening and closing brackets are and how to place elements in between them when you first start to understand code—they give you a reference point for what’s happening in the code. You’ll also be a pro at copying and inserting any code on your blog since you have an idea of where code starts and stops.

X HTML Tags You Should Know

1. Site structure

<head> </head>

This tag is at the top of the page. In between these two brackets, you’ll see information about the page (including the page title) any analytics you have installed, and theme styling code for the rest of the page. Think of this section of HTML as the description of your page.

<body> </body>

Everything between these two tags appears in the body of your webpage—aka, what your readers see whenever they visit your site. All of the HTML code for your post and any widgets that people can see directly go here.

Note: You don’t have to paste these tags in your post—they are part of your site structure already. 

2. Organize with headings

1 - headings

We’ve talked a lot about the importance of using headers in your blog posts. They’re a great way to break up your text, making it easy to skim and understand. There are three different sizes of headings: H1 is the biggest, H2 is the second biggest, and so on. I’d recommend not using more than two different types of headers in your posts because having too many becomes distracting to readers.

3. Create links

2 - link

This is probably the most important tag for a blogger to know–readers expect bloggers to include relevant links in their posts. Place the link you want to use in between those quotation marks in the opening tag and you are good to go.

4. Embed images

3 - image

This is probably the second most important snippet you should know. Whether you’re sending an email to your blog subscribers or putting together the most pinable post ever, using HTML for images is important. Notice that you should include the link to the image itself, the size of the image in pixels and then the alt tag. The last part is especially important for SEO purposes.

5. Link images

4 - image as a link

Now, to make an image a link (like our CTA at the bottom of this post), all you have to do is surround the image code from step #4 in a the code for a link (step #3)–basically you are replacing the “text you want to link to” text and inserting the code for embedding images.

6. Align images and text

5 - align

There are few things more frustrating than when an object won’t align the way you intended it. No matter how many times you click the alignment buttons, the image or text stays stuck a different way. To specific a certain alignment, include <p align=”left”>before the thing you want to align and </p> after.

Note: Most people recommend using CSS, the language used to style your blog, to align aspects of your site. While this is generally a good rule, I’d recommend using the above alignment codes when you’re trying to fix a specific object that isn’t properly aligned already.

7. Blockquote

6 - blockquote

A great way to spruce up the formatting of someone’s quote with HTML is with the block quote. This snippet of code styles the quote differently than the rest of your body, making it clear that someone else said or wrote the that text.

8. Numbers (ordered lists)

7 - Numbered List

If you want to make a numbered list, this is the tag for you. For all of those top 10 blog post lists, this tag will be your best friend.

9. Bullets (unordered lists)

8 - Bullets

If you want a list without numbers, use this tag. Great for highlighting a few quick points under a main idea in your post, especially if your post is running long.

10. Formatting fonts

9 - Formatting

Super simple stuff. If you want to make some parts of your post stand out, these tags are essential. 

See, that wasn’t so bad! You’ll be a coding wizard in no time.

To our more experienced bloggers—what pieces of HTML do you use daily? What do you wish you knew how to do in HTML? Share your thoughts with us below.

Shareaholic Email Signup

  • Look at all the time you took to research and write up this post. Just hit bookmark! Awesome, impressive. Thank you so much for sharing this info, Ginny!

    • Ginny Soskey

      Thanks for the bookmark, Jayme! :) So glad I could be a help here. Knowing just a little HTML can be a LIFESAVER when you need to edit something quickly. Thanks again for stopping by!

  • Jeremy Stover

    I have been coding in C++ for a couple years now, but I never took the time to read up on HTML, but now that I have my blog back in full motion it is insanely useful when I can edit my posts in a very detailed manner like this. Thank you so much for the post!

    • Ginny Soskey

      Glad I could help, Jeremy! Good luck getting back on your feet with your blog.

  • Julian True Flynn

    Copyblogger brought me here. This is a great beginner list for HTML, and it’s more needed now than ever because of how much precedent HTML5 schema is getting in search engines.

    • Ginny Soskey

      Thanks for stopping by, Julian! Glad to hear this was helpful for you. :)

  • Ginny!
    OMG! I’m not only still confused, now I just feel dumb on top of it! LOL… I know you are completely right- I HAVE to learn it… I do… it just doesn’t make any sense in my brain.

    • P.S. I printed it out and put it in my newest Study-binder. (sigh) I am trying…

      • Ginny Soskey

        Hey Amber-Lee! What’s confusing to you? I’d love to clarify anything that I may have missed here if it can help you! :)

      • Bill Mann

        Amber-Lee…you may find this freeware helpful. http://kompozer.net/
        Its capable of much more than you’ll probably ever need, but it may make learning HTML easier. In a sense, the program functions as a copy editor for HTML. For example, if you neglect to close a tag, the program will correct it for you. Hope you find it useful.

    • Angela Fournarakis

      Amber, you are not the only one!

  • claudia

    CSS and using H1 tags will make your blog more SEO efficient!

  • disqus_2e3ftKZOrg

    Your link for this article posted on C.Hope CLark’s FB page. Great post. I’ve always tried to figure it out backwards: right click on any internet page you’re on (like this one) Scroll down to ‘view source’ and all the HTML for that page is there. I tried to identify the beginning and ends of strings and see what they were doing – but it gets really complicated if you don’t have the basics. Now I do! Thanks. Great post.

    • Ginny Soskey

      Looking at the source on websites is a great way to learn though–glad I could give you a reference going forward. :)

  • Hey found my way here from Copyblogger and great pun on the x html :)
    I never use the & tags anymore, I’ve been updating to the newer spec – and tags, underline is a debate in itself but those 2 are way better moving forward if you can’t define the style with CSS :D

    • Ginny Soskey

      Jess, thanks for stopping by! Good suggestions for using and — I’ll definitely include them when we do our next post on HTML. Great idea!

  • Ana

    Ginny, you performed a vital service today — and isn’t that what providing real value on a blog post is all about! I’ve been wanting to learn HTML for the longest time. I’m not in a position at the moment to pay for help so thank you again. My blog’s not up yet but my service site is under construction and I needed it badly. This one’s for bookmark!

    • Ginny Soskey

      Wow, thank you so much for your kind words, Ana! Learning HTML definitely isn’t hard–your new site should be up and running in no time. :) Hope we always can be a resource for you!

  • Phyllis Edson

    Great tips. Can I print this and put it on my wall?? Thanks!

    • Ginny Soskey

      Do it! Thanks for the kind words. :)

  • Really helpful thanks. Clipped this to Evernote for reference. Thanks

  • I’d like to add to this, as a full-time web developer, that learning how not to code is just as important. You don’t necessarily have to conform to the standards that we developers and designers do, but learning that this function will slow something down while this function will speed something up is invaluable.

    Additionally, and perhaps more importantly, you should take your user into account when adding or removing features from your website. Writers websites lean toward being so convoluted with their fifteen widgets and tag clouds and weather plugins and fancy transitions and slideshows and parallax sprites — it’s a headache. Use the features you need and try not to overpower your users and be gaudy.

    Less, but better.

    • Ginny Soskey

      Jaqueline, totally agree with having a basic understanding what the code means and how that will affect your site. Less is usually better as well as far as how many tools to use. Appreciate hearing your thoughts!

  • This is wonderful. A must keep, especially for newbies. Fabulous post!

    • Nash Eely

      hellaow karina can u plz help me?

  • This was very helpful to as a new blogger. Well written and even I understood most of it! (I saved the page to read again later when I can understand more)

    • Ginny Soskey

      Thanks Elizabeth! :) Glad we could be a help to you.

  • David Walker

    Very good information. Thank you. I have a question for you: Have you ever heard of an error message that reads, “Please correct error form” when someone attempts to add links to their link widget?

    • Ginny Soskey

      Hi David, haven’t heard about that error message, sorry!

  • Another great way to learn is to click on the “text” tab of the wysiwyg editor, rather than the “visual” to see what html does what. Also right click on any section of a website to “inspect element” and see what html creates what you’re seeing on the page.

  • Pingback: Hedefe giderken doğru yolda mısınız? - Contentus()

  • Pingback: Blogging Tips()

  • Pingback: xcvb «()

  • Katie Williams

    This is a great resource! Do you mind if I add this page to my link directory for coding resources for beginners on my ZEEF page? I’d also love to hear your feedback!

    Thanks so much!

    http://learn-computer-programming.zeef.com

    • Hi Katie,

      Please do! I hope you and your students love it.

      Cheers,

  • I started learning HTML from w3schools but learning from this blog post is just so easy. All the things necessary for my blog are covered here. Thank you!

  • sheley fields

    Thought-provoking discussion . I was enlightened by the insight ! Does
    someone know where I might be able to access a template DoL OSHA 300
    version to edit ?

  • Pingback: Activity in E.tech | vjivanvaldez()

  • its good info for beginners, but this is old HTML. if your new to code you should just start with the newer HTML5 these days.

  • Beca

    This has been such a great help for my new blog! Like you, I had no idea I needed to know some coding in order to set up my blog!

  • Jess

    This has really helped me get my head around coding! Thank you.

    • @jesshursit:disqus you’re welcome — we’re very glad!

  • this is cool very informative ideas that i really need. it explain well how to use code or edit code on a blog.

  • Darkglass Web Design

    Hello,

    That is really amazing information,
    thank you for that,
    can you please tell me which place is perfect to write code in html file.
    in part or in part!!!?

  • Wow, ok. Thank you so much for this. I finally have an understanding of what that jargin means. NOT going to lie, still a bit overwhealmed and confused, but so much more aware of the direction I need to go.

The information published on this blog is free for your use with appropriate attribution to Shareaholic. We welcome your feedback, suggestions, and questions. Please contact us. Additionally, all photos that appear on this site are copyrighted by their respective owners. If you own the rights to any of the images and do not wish for them to appear here please contact us and the images will be promptly removed.

We’re always looking for fresh content! Apply to be a guest writer.