How to Make Neat html posts

Posted March 22, 2014 by Lola in Lola's Ramblings / 14 Comments

Let me start by saying I am not a pro on the matter, but I do know a bit of html and there is little that annoys me more than what I call “messed-up html code”. I am sure there is a real name for it, but it’s basically a html code full of crap because the posts was originally created in word document. Every time I receive a pre-made html code from a tour organizer or author I am hopefull it will be nice html code and then I open it and flinch. And this happens every time. Okay that’s not true I think there are a few times I actually got a nice and neat html code, but those are the exceptions.

To show you what I mean, take a look at this, this is the html code for a blogger blog for a cover and blurb of a book:

It contains a lot of unnessecary information and it looks ugly.

And now let’s take a look at how a neat html code of the same piece would look like, I removed all the unnessecary information:

If you look at this code you see it’s much shorter and doesn’t contain any unnessecary information that clutters up your code. And even without any html knowledge you can still have an idea what the code is about.

So why does this happen? Well basically the problem is when you have a nice little media kit in a word document and you copy and paste that to your blog. The word document contains information like the font and font size and lots of other stuff concerning the layout and such and puts that in your html code. All this extra code doesn’t show up in the actual text, but it still clutters your html code. And your html code should only contain content, the font and such is all done is CSS and you don’t need to do this again in every html post.
I think messed-up htm codes look ugly and it just really annoys me, but I’ve heard that it’s also bad for search engines crawlers and the like. So having a neat html code is preferable.

One of the easiest ways to send someone a premade html code for a post is to simply make the post on your own blog and then copy the html code of the whole post and then e-mail that code to the other person(s) who needs it. This works, but if you made your own post the wrong way you still end up with a messed-up code. If you make your own post the right way, you can just copy and paste.

Now let me explain how to make sure you make a neat html code, when you start with all the information in a word document:
1. Have all the information you need for your post in a word document
2. Copy that information in a word processing programm like Notepad ++.
3. add some code like blockquotes, links, strong, page breaks, headers etc where you want it to. If you want to know how to use these and how the code for these looks like, check out a site like W3 Schools.
4. copy and paste the html code you just made in your html part of your blog and then you have a nice and clean html code and your post shows up exactly right.
5. upload the pictures or graphics you want to use in your post and position them right and then your blog post or pre-made html code should be done.

Tip: if you want to include graphics in your premade html code, just upload the graphic to your own blog, then check out the html code for that image and copy and paste that in your pre-made html code. Or you can upload your images to an external site and use that html code for your pre-made html post.

I always make my own html posts in Notepad first and then copy and paste them to my blog. I also make my own pre-made html posts for tours I organize with Lola’s Blog Tours and I take great care to make sure they are neat and working. And I always make them for both blogger and wordpress blogs. If you ever find a mistake in my pre-made html codes I send, please let me know.
And this is why if you ever send me a premade html code I’ll ask for the materials seperately so I can make my own post. Because changing a messed up code into a neat code is more effort then just making the neat post myself.

So I hope this posts was helpfull to you, whether you are a blogger, author or tour host organizer. Do remember that I am not a pro on the matter and this is how I make my html codes, I am sure there are lots of other ways to do right. And please spread the word if you think more people should know about this!

And if you have any questions, don’t hesitate to ask them!


14 responses to “How to Make Neat html posts

    • Thanks Monique :). For some reason I just stand cluttered html codes. And it’s really a lot of work to unclutter it. I never heard of coolnotes or evernote, but as long as it only copies the text, it works, it doesn’t really matter which program you use.

    • Let me know if you run into any problems :). It actually is pretty easy, which makes it even more frustrating when I get a messed up code. Because changing a messed up code into a neat one is much more effort than doing it right in the first place.

    • Yeah every time I get a premade html code I hopefully open the document and then *cringe*. Just like you I usually just go with the individual pieces so I can customize my post myself and spare myself the effort of making a messed up code neat.
      btw For the One Good Cowboy tour you should’ve received a neat code from me ;).

  1. This was really helpful Lola, thank you! I know how to do the basics for my posts – all I really use are links, h2, h3, and images. My problem, though, is that I want to see how it’s going to look and I end up switching to the text editor version of my post. Then when I switch back to the html it changes a bunch of my code and it looks all yucky. I think I need to try writing in notepad like you do and then just preview the post.
    Berls @ Fantasy is More Fun recently posted…Paying to Promote Facebook Pages? |Fun QuestionsMy Profile

    • I am glad you find the post helpfull Berls :). Html can be so confusing, I remember when I didn’t know a lot of html and I kept switching between html editor and preview and I couldn’t make sense of why things would change.
      Since I made the switch to wordpress I make all my posts in notepad or in the html editor on wordpress, although it is nessecary to know a bit of code. Although I still mostly use the basics, like headings, images, links, bold and italics.

  2. Great post! I went to school for HTML and CSS. And now working in wordpress I have been using it more. I also hate messed up HTML code that was one reason I wanted to switch from blogger to wordpress. the Coding is so much neat in wordpress and simple. I haven’t done any code myself yet but I think I might try it in Text edit (I have a mac) Might make my posts a lot neater.

    Thanks for sharing this!!!
    Michelle @Because Reading recently posted…Week In READ-view & The Sunday Post 3/23My Profile

    • I totaly agree coding is much easier and neater in wordpress and I am still glad I made the switch. I wish I had time and money to take some HTML and CSS courses as i really want to learn more and think it’s really interesting!

Leave a Reply

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.