How to Clean up Your Giveaway HTML (+ Why You Should!)

Date Fri, June 14 2013

Let me preface this with a big Thank You to anyone who has every organized a giveaway or event. I like participating in these, and the benefits have been wonderful. However, there is something I noticed more often than not that I have to address.

I took the time out a few weeks ago to email the host and coordinator of one of the events I’ve been doing now. What did she do that touched me so much? The code she offered for this giveaway event was clean.  It was simple, and I didn’t have to spend more time editing code than I had to spend promoting the event. Perhaps it sounds like a silly thing in today’s cut-and-paste world, but I can’t simply add any code to Review by Cole without editing it first. The code consisted of nothing more than the text, images and links necessary.

So here is my plea for all giveaway coordinators any every person who provides code to website owners such as myself: please clean up the HTML code you provide for giveaways and other events. I would go so far as to suggest that hand-coding your giveaway HTML is beneficial for these simple reasons: you don’t know what the posters’ blogs will look like and you could break someone’s website.

How do you do this? Read on.

KISS (Keep it Simple, Stupid)

The more complex the style in your post, the more likely it will look awful one someone’s website. In fact, it might be downright unreadable. Remember, red text may draw attention on your own website, but if someone’s background is red, their visitors won’t see this important bit of information.

Code for these events often includes a variety of bold, italic and underlined text. They also incorporate all sort of heading tags. However, you can’t be sure how any of those tags are styled on other websites, which is why I recommend using bold text and h3 and lower tags rather than h1 or h2 tags.

Similarly, reconsider floating anything left or right if you’re not comfortable with CSS. Remember that you may use special tags or even common ones that don’t translate right on others’ blogs. For a recent event, the hosts’ information/links and headshots were added to the code, but I had to manually reconfigure everything for the text and photos to align. Now, I’m perfectly comfortable with that, but not everyone is! Really, that might be the most important thing to remember. If your code has any undesirable effects, you’re leaving multiple people to fix it, rather than providing a single set of HTML tags that are more or less unbreakable (well, as unbreakable as you can get).

HTML by Phillipe Martin

Finding and Removing Unnecessary Code

I once saw code where it specified that the background color behind the text should be white. Now, you can imagine how unsightly this would look on my review blog, but this might not be a problem if your blog has a white background. The problem is that every piece of code also makes websites load a little more slowly. This is bad for SEO. It also makes the code more complex, which frustrates for people who are trying to edit the HTML you provide for SEO reasons.

I often see repeated codes unnecessarily, too. There’s almost no reason for giveaway HTML to contain divs. Divs also come precariously close to breaking a website. A single closing div that shouldn’t be there would make Reviews by Cole –or any website — look pretty poor.  If you want to center an entire post, you only need a single div that opens in the beginning of your code and ends after the last bit of text.

Empty tags serve no purpose in HTML except to make it longer. In fact, you don’t need any tags between paragraphs because WordPress and blogger will handily convert line breaks for you! For the same reason, you can remove opening and closing paragraph tags. Empty tags look like this:

<em></em>

If, at any point, you’re opening two or more tags in succession, something is wrong. Every tag you open is one that you have to close. but there should be something between them. You should not have repeated closing tags like the following, either:

</span></span>

Here’s an entire line that serves no purpose:

<span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;"><i></i></span>

Any time you see an empty width, height, title or alt text within an image or link, delete it. Empty attributes look like this:

style=""

There’s nothing between the quotes, thus it is empty.

If a tag has so much CSS that it spans multiple lines, it’s probably auto-generated and not necessary.

Check It Before You Wreck It

I’m pretty sure that much of these issues are due to people creating code using Word or Google Drive. Those are useful tools for creating something if all you care about is appearance, but they’re less helpful when it comes to semantics.

To see if your HTML code might be incorrect and potentially breaking a website, run it through the W3C HTML Validator. This will give you the basic suggestions to improve your code — and perhaps your knowledge of HTML.  Open tags or tags that don’t close will be revealed with the validator. You can also head over to HTML Tidy Online, which will remove all that extra code that you don’t need.

If you’re writing your posts in WordPress, you can expand the visual editor and click the “Remove Formatting” button, which looks like an erase, to remove colors and other text effects. This is a life saver!

I thank you for taking the time to do this, and I’m pretty sure I’m not the only blogger out there who thanks you. You might even find that writing all your code yourself and keeping things more simplistic makes your job easier!

Edit: I have been accused of writing this post because I am selfish so let me take a few moments to explain. This isn’t about the time that I personally spend editing shared HTML. This is not because I have some vendetta against organizers (that doesn’t even make sense!). This is about making the Internet better for everyone — including giveaway organizers. This is about coding in a semantic way that makes every site load more quickly, appear correctly regardless of browser and device and more search engine friendly. This is not my personal preference. It’s a standardly-accepted guideline created by a consortium of professionals and upheld by the group of people who controls the Internet — Google.

If you are not proactively examining the HTML that you add to your site, you are actively damaging it and the philosophy of the Internet. The Internet isn’t just something that we all use. If you’re a blogger, you’re helping to create it. I want to help create something that is beautiful because it functions.

11 Responses

  1. Jenn March 5 2014 @ 8:44 am

    PREACH.

  2. Cole March 5 2014 @ 8:53 am

    Always!

  3. Julie March 5 2014 @ 9:12 am

    Hold up, there’s an easy button to remove formatting? Why don’t I know about this?!? Thank you for pointing that out to me!!!! sorry got all exited there. Thanks for sharing :)

  4. Adastra @Flexines March 5 2014 @ 9:51 am

    I love that you have all these examples AND resources to check the code! I was wondering what you could possibly mean by messy code and this laid it all out. Considering I’m relatively new to coding yet know better, I am shocked that people would use code like this professionally! Definitely a great guide. :)

  5. Elisebet F March 5 2014 @ 6:18 pm

    I agree that simpler is better! It’s frustrating when I have to spend 30 minutes re-doing HTML because the multiple fonts or colors or headers or alignment wouldn’t transfer.

  6. Cole March 5 2014 @ 7:26 pm

    It’s because it’s hidden in the second line of the toolbar and you have to expand it! But it’s there. It mostly works for fonts, but it’s a good start!

  7. Cole March 5 2014 @ 7:27 pm

    I think that when you’re making a profit from a group giveaway, you really do need to consider it professional. Thus, you need to code professionally.

  8. Jamie March 6 2014 @ 8:29 am

    Oh amen! I hate when I get a html code for a giveaway that I have to basically go back through and completely redo just so it looks right with my blog. Even worse is when you find a sneaky organizer who inserts their ad links into images to if they’re clicked, they earn revenue. I definitely recommend that everyone looks over the coding sent to them before blindly hitting “publish”.

  9. Cole March 7 2014 @ 12:06 am

    Not only that, but there’s potential that code could contain malware or even a virus! I would never not look at the HTML!

  10. Kim March 12 2014 @ 4:15 am

    I am just new to blogging and working on learning all this html stuff. Thanks for the tips. Sharing with my friends.

  11. Cole March 12 2014 @ 10:09 am

    Thanks for reading!

One Ping

  1. The Most Popular Posts on Reviews by Cole | Reviews by Cole April 17 2014 @ 10:09 am

Leave a Reply