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. 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!

    Reply

Submit a Comment

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