All the yarn things…right to your inbox. Sign up here.

10 Basic HTML Tags for Bloggers: One Stop Shopping!

by | Blog

Are you a blogger who uses publishing tools but want a little more control?  Do you get a little nervous at the thought of manually editing your blog’s HTML?  That’s like me wondering what goes on under my car’s hood, hoping nothing ever breaks down, and also hoping I’ll never actually have to change a tire on the side of the road.  But it’s not all that scary if you know some basics!

Here are 10 HTML tags that I use frequently, so just as it might come in handy for you, this list is going to come in handy for me too.  Consider it a one-stop shopping depot for the most common HTML tags you might use while blogging.  Just bookmark this post and hop on by whenever you need a little Copy-Paste action to get you on your way!

10 Basic HTML Tags for Bloggers

1. Manually insert images

<img src=”URL of image”>

Use this tag when you need to add images or buttons to your sidebar or post.  To find the URL of your image:

WordPress: Look for the image in your Media Library. The URL should be listed.

Blogger: Open a new empty post. Upload and insert the image into that post and look at the HTML. The URL is based off of a Google Picasaweb location, so the name of the file is not as straightforward.

You can also format this image by using other tags around the <img src> tag, such as adding a hyperlink.

2. Hyperlinks

<a href=”URL”>thing that is linked</a>
-- Make an image hyperlinked
<a href=”URL”><img src=”URL of image”></a>
-- Make text hyperlinked
<a href=”URL”>This text is linked</a>

Do we all have links coming out of our ears?!  Links to parties, to old posts, to friends’ blogs, to social media.  It’s easy to do in a blog post with that little chain link icon, but what if you need to manually add one in your sidebar?

Anything that is written in between the <a href> and </a> tags will be hyperlinked. The “anything” can be an image or plain text. To make it more fun, you can also style and format the text that is within the <a href> and </a> tags, such as make it bold or italicized (see #9).

3. Link to a part of a page

-- At a specific point in your page
<div id="Page_Section_ID"></div>
-- Whenever you want to link to "Page_section_ID", use the modified URL
<a href="URL#Page_section_ID">Text</a>

In my project galleries, I like to link to specific parts of each gallery, instead of always to the top of the page.  To do so, create a div id tag at the desired break point on your page with the name of the section.  Then when you create your hyperlink, link to the URL of the page, followed by a hashtag and then the name of the section for which you created the div id.  Then, the link will automatically load that URL, but also jump to the correct section of the page.

4. No follow links

<a href=”URL” rel=”nofollow”>Thing that is linked</a>

I don’t know all the rules Google has stated regarding the use of follow and nofollow links, but I use nofollow links on all sponsored links.  The ones I don’t add nofollow are my own and ones that are purely organic (not paid or affliated in any way).  Although I’m not sure if I’m even doing that right!  There are also WordPress plugins to do this function for you, but I like to minimize my use of plug-ins, and this way, you know exactly which links you’ve set to nofollow.

Just add rel=”nofollow” in any <a href> tag before the closing bracket.

5. Do not allow pins of this image

<img src=”URL of image” nopin=”nopin”>

I know Pinterest is pretty big around here, but sometimes you might post an image that you don’t want circulated to oblivion and back…like photos of your family. There’s no fool-proof way to discourage someone from taking those photos, but you can make it just a tad harder by adding the nopin attribute. This will at least prevent someone from easily pinning the image to Pinterest.

Add nopin=”nopin” to any <img src> tag before the closing bracket. If you use the official Pinterest hover Pin It button, using this attribute will prevent the Pin It button from showing when someone hovers over the image.

6. Tables

<table>
<tbody>
<tr>
<td><img src=”URL of image”></td>
<td><img src=”URL of image”></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Tables! Looks complicated, but not really, and makes for a nice clean look.  The “tr” is your row and the “td” is your column.  Start your row first, and list all your columns.  Then close that row and start on the next one.  Unless otherwise specified, the image in each cell dictates the size of the cell, which means if you want a nice even row or column, the images should be the same size.  Otherwise, you’ll see random blank spaces where one image doesn’t quite meet up with another.  To see more on formatting tables, check out W3 Schools.

7. Line breaks

<br />
<br />

OR

&nbsp;

Sometimes (like in WordPress, grr), just pressing the Return key doesn’t work the way you want it to work.  I use a mixture of both methods to force a line break and extra spacing between paragraphs.

8. Bulleted lists

-- Unordered lists
<ul>
<li>list item will have a bullet in front of it</li>
<li>list item</li>
</ul>
-- Numbered lists
<ol>
<li>list item number 1</li>
<li>list item number 2</li>
</ol>

I don’t have a whole lot to say about this one.  Lists come in handy for a variety of reasons.  Should I list them?

9. Text styling – Center, Bold, Italics

-- Centering 
<center>Text/image to be centered</center>
-- Bold
<strong>Text to be bold</strong>
-- Italics
<em>Text to be italicized</em>

Sometimes you want to make a statement or write a disclaimer, or you just want to

shout from the rooftops!

10. Text styling – Color

<font color="blue">Text</font>
<font color="00ff00">Text</font>

These last two tips (#9 and #10) are for HTML 4 styling. A lot of people/sites have moved to HTML 5 and CSS, and these attributes will not work in HTML 5. However, I find that I still use them for code in my widgets and on my sidebar.

The main thing with all of these tips is to try it out! Don’t be afraid to play around and experiment and see what works for your specific purpose.

33 Comments

  1. Kristin

    ChiWei-
    I love that you’re geek and crafty all rolled into one! <3 😀
    The no pin and no follow are helpful to me. WHO pins a thumbnail? :))
    Much love!
    Pinned!
    K-

  2. holly waterfall

    So so helpful! I want to be independent when it comes to my business. and I haaaate having to ask for technical help so this is fantastic. I’m very much looking forward to your post on speeding up your site!

  3. Joe Turic

    The “just hitting return in WordPress doesn’t always work like you’d like it to” is probably one of my biggest complaints about WordPress. I think on almost every blog post I have to go in and manually tweak the html since sometimes it’ll insert nbsp’s and sometimes it won’t, no matter how many times you hit return and get it to look nice in your preview window.

  4. Stephanie Ann

    Great tips! I had not heard that there was code for making a picture un-pinnable. I will definitely be using this one for my family pics that I post.

  5. Desiree

    Great info! One quick question, on bolding something, you say to open with ‘strong’ but close it with ‘/bold’. Shouldn’t they be the same word at the beginning and end? Does it matter?

  6. ChiWei

    Thanks for catching that Desiree! So much for proofreading, huh? You’re right, it should end with , and I’ve fixed it.

  7. ChiWei

    Thanks Stephanie!

  8. ChiWei

    You wouldn’t believe how frustrated I was with that little quirk, and how long it’s taken to get some posts formatted correctly. I feel like I can be so much more efficient if a Return was a Return! And then the preview doesn’t look the same as the text and switching to preview negates the manual edits. I always end up tweaking the HTML right before publishing.

  9. ChiWei

    Thanks Holly! That site speed one will definitely take some research, but I think we both know a few bloggers who might be interested! 🙂

  10. ChiWei

    Thanks Kristin! I don’t actually use the nopin on my “extra” blog images. I guess I’m just hoping people don’t bother pinning my blog graphics and thumbnails!

  11. ChiWei

    Thanks Heidi!

  12. Meredith @ unOriginalMom

    SO helpful to have this all in one place!! Definitely pinning and will be referring to often! 🙂 Thanks, CheiWei!!

  13. ChiWei

    You’re welcome Meredith! I’m a sucker for easy cheat sheets. I’m sure I’ll be referring to it myself too!

  14. Blippitt

    Wow, that “nopin” tag is golden. I didn’t know about that one. I had just been wondering if there was a way to keep certain images from being pinned. Perfect.

  15. Stacey

    I knew several of these, but not all of them. Thanks for this very helpful post!

  16. Tenns @ New Mama Diaries

    I’m pretty savvy with html, but its nice to have a one stop shop for them. Thanks so much for this post! I really need to make my own quick reference sheet for html shortcuts. I wouldn’t have to Google them every time if I did!

  17. ChiWei

    Yup, that’s what I’ve been doing. Googling away. And now that I’ve written them down, it’s helped me remember them too! Glad I can be of service 🙂

  18. Kara

    This is AWESOME!! Thank you so much for sharing all of these!

  19. Sharon

    Hi,

    WordPress or blogger, the big question? I am not tech savvy at all, i had a blog created on WordPress, but so intimidated by it. Some one created it for me, but he is no longer available & I am up the creek. I created a very basic one on blogger myself, but want it to look so much more than what it is and need help specially with my header picture & a few other items.

    So, I am trying to decide if I should give up the WordPress & switch to Blogger – any advice.

    Sharon

  20. ChiWei

    I guess it depends on what your goals are. Blogger is easier to maintain on your own if you want to keep it simple, but more complex features usually require hard coding into the template. WordPress is definitely a bit more complicated, but there are plugins to do just about anything. WordPress also provides more support for internet exposure, SEO, that sort of thing, but there are lots of large blogs that live on Blogger too. Maybe it’s personal preference?

  21. Kellie Loges

    You just helped me so much with an answer I have been looking for for my new blog!

    Thanks so much for sharing!

  22. Kellie Loges

    Thanks so much for sharing! You just answered a question I’ve been looking for..

  23. ChiWei

    Wow, cool! You’re welcome!

  24. Marilyn

    ChiWei I’m just blown away by all you can do..you’re artistic, creative, and yet technically savvy….you are truly amazing!

  25. ChiWei

    Aww Marilyn, thanks so much! You’re the best!

  26. Erica

    I knew about most of the tags, but I didn’t know about the no-pin attribute, thanks for including it in the post!

  27. ChiWei

    You’re welcome!

  28. Namira

    thank you so much for sharing this, this is really helpful for me who have just started. I’ve become a fan!

  29. Noah

    Hi there, everything is going nicely here and ofcourse every one is sharing
    facts, that’s genuinely good, keep upp writing.

  30. Manoj

    Interesting post. We regularly use these tags in the blogging process. Thanks a lot for creating a one stop shop for them.

    Take care,

    Have a nice day!

  31. Apeksha

    This is so informative and explained in the simplest form! I learnt html in my college days but after no exposure towards technical stuff, I found the JavaScript overwhelming. Thank you for reminding me again!

Shop New

[products class=”et-zoom-in” limit=”2″ columns=”1″]