Basic HTML for Bloggers: Yes, You Really Should Know This

This isn't a "normal" beauty post today, instead this post is meant for the ladies over at the Beauty Blogging Coalition and the Beauty Blogazons. I don't expect my regular readers to need this post, but there are a surprising number (to me at least, I fully admit to being a computer nerd) of bloggers that don't know the basic html behind a blog post. HTML is actually very easy if you know the basic codes, but the key is knowing what you're looking at.


Read on if you want to decipher why those punctuation marks are doing things that you weren't taught about in your senior year composition class. I'm going to go over a few basic things that I use in my posts every day. If there are more things that you want me to go over, be sure to leave a comment and I'll do a 2nd post.


So, the first thing that you really should notice about HTML is that there are special brackets. See those? Inside of those brackets is where you put your coding to tell the interwebz what special things to do.

Often (ok, pretty much always, unless you are putting in a page break or image), you'll be using that coding to modify that content in blue. So, to tell it to stop modifying content, you'll need to "close" the bracket.

You close by repeating part of the code with a little / in front of it. That slash is important. When I'm writing, I'll often write my html, immediately close my bracket and then backtrack to add my content. That's so I don't forget to close my brackets. Don't forget!



Some of the easiest things to do are to modify the type. You can make things be italicized, you can underline, you can strikeout something (use s for that).



There are 2 ways to make things bold, either works. I'm a fan of the "b" simply because I'm lazy.



This is the easiest way to center something. You can do this to text, links, images... etc. I most often will center images, but note that text will not wrap around it. If I have a smaller image that I want to embed off to the side within the text wrapping around I'll use the Blogger insert image button at the top of my composition box, it's just easier to float an image to the left or right that way.



I like to use these to emphasize or de-emphasize something. I'll use big to make mini-headlines within a big post, and I usually use small if I have something extra to add at the very end of a post, maybe an image credit or something.



It's really easy to do multiple things at ones. Just nest codes within each other. Just make sure you're keeping track of things as you close them. Close your coding brackets!



What if you're in html mode and you can't make a return? Some people use the paragraph method (which involves nesting your paragraphs into "p" brackets), but I think it is easy to forget to close those brackets. I prefer to use a page break where I would normally want to just hit return.

If you're in Blogger you can just go into the post settings to the right, under options, and select "Press Enter for line breaks." I have that turned on at all times, but I use page breaks a lot for items in my sidebar.



This is something that seems to confuse a lot of people. For a link, the "a" is telling us this is the link (so you close with only the /a). ref= is telling the interweb fairies where you want to go.

Note the quotes around the URL. You want them to be plain quotes. This isn't a problem when you're typing directly into your blog, but it can be a big problem if you're typing into Microsoft Word (or a Google Doc) and then pasting into your blog. Those quotes will change themselves into "smart quotes" that nest around whatever is inside them. This is really pretty and fancy. If you're writing a letter for work it's great. Not so much for the internet. The smart quotes aren't recognized in HTML, so you'll need to turn off that feature in your Microsoft Word or go through and replace quotes by hand.

In the second link, you'll see I've created a "target". Adding this in to the "a" coding means that when the link is pressed, the browser will open a new window and the link will go there. I like to do this when I'm linking to outside links in a blog post. Readers can go look at something, but when they close that window my blog is still there for them to read the rest of the post.



If you're hosting images somewhere else rather than uploading them to your blog (I host all of my images over on Photobucket, read more about why in my blogging tips post) you can either code in images directly or use the (in Blogger at least) use the image button that pops up and does the whole thing for you.

If coding in an image on your own, the top coding is the very basic image. "img" is what says this is an image. You aren't modifying any content, so you don't need to close this with a closing bracket. The "src" is telling the browser the URL source of the image. You'll need to URL of the image itself, all alone. Not a page with the image on it. In Photobucket, underneath your uploaded images you'll see something called "direct link" under the image. That's the URL you need.

Now, if you want to get fancy, I've included 2 more image codings.

The first one includes a "border" tag. You can do all sorts of things here if you want for displaying images, maybe if there's a second post I can go into that. Here I've written border="0". Why no border? This is what I do to images that I use in links. Yes, if you want to get really fancy, you can take that image and put it into the content "link" area of a link. But, it will put a box around your image (just like it underlines words that are links) and since I think it is ugly I always take it away with the border="0".

For SEO purposes, I often do the second of the "fancy" image codings. I fill in info about the image for the alt and title. I try to make them keyword rich (I'm not very good at this), related to the image and the post. Note that if someone pins your post and selects that graphic, the "title" tag can automatically populate in their description. So make it good! (This happens if they haven't selected any text on the page, their selection seems to override this.)

Finally, see that width="XXpx" ? That helps you to change the size of an image. I have to do this quite often, usually because I don't take into account how tall something is and then it completely takes over my post. You can change the size of an image by modifying the width or height (or both, if you want to do the math). I like to just change up the width and let the internet browsers do the math for the height, that way it doesn't end up looking strangely stretched or smooshed. Just put a number in for the XX. I use a lot of 600px, 450px and 200px with my layout.



Finally, the blockquote. This is great for setting off a block of text. It will add a little space above and below, as well it will indent the margins on both sides.

I use blockquotes like this for long quotes and for perfume note lists. You might have something more exciting to use it for, but for me this is just an occasional thing that I code.

Let me know if you have questions or there's something else you want to learn!

If you want to get more advanced I look up a lot of HTML over on W3 Schools, though I originally learned all of this stuff about 13 or 14 years ago from a Dummies book.