5 Ways to Clean Up Your Code

When you begin to learn HTML, and particularly when you get good at it, nothing will drive you crazier than to see junked up markup. I’m talking: &nbsp;, <br />, %20, empty <em> tags, etc. Below we discuss 5 easy ways to clean up your code.

1. Remove Spaces from Your URL

If someone sends you a URL of a really great web article, which of the two below are you more likely to click?

      1. http://www.blogosphere.com/really%20awesome%20web%20article
      2. http://www.blogosphere.com/really-awesome-web-article

I’m going to choose B. From its URL, I can easily see that this page is about a really awesome web article. URL A makes me dizzy and confused. Make a habit of naming all web pages, PDFs, and images with hyphens to ensure no %20s. It will be easy for your reader to internalize your link while also making the editing process much smoother on your end.

2. Remove Non-breaking Spaces

Many times when using a content management system such as WordPress or another WYSIWYG (what you see is what you get) editor, regular spaces are substituted with non-breaking spaces, or &nbsp;. These are used when more than one space is wanted in content. These tags will junk up your markup and leave you with a mess if you need to quickly read through and make edits. Especially, if you are not fluent in the language of HTML. Below is an example:

Version 1

<li><a class=“pdf” href=http://www.xyz.org/content/pdf-2″>Title of PDF goes here</a>&nbsp;<br /><em>We have some content here</em></li>

<li><a class=“pdf” href=”www.xyz.org/content/pdf-1″>More Content Here</em></li>

See the red &nbsp;? No need for it…none. Go ahead and remove that. Use a separate line instead, like this:

Version 2

<li><a class=“pdf” href=http://www.xyz.org/content/pdf-2″>Title of PDF goes here</a></li>

<li><em>We have some content here</em></li>

<li><a class=“pdf” href=”www.xyz.org/content/pdf-1″>More Content Here</em></li>

3. Use Paragraphs Instead of Line Breaks

In Version 1 shown above, directly after that pesky non-breaking space, we originally had a break tag. Notice how in Version 2 there isn’t one? That’s because there isn’t a need for it. Break tags are used when you want to start a new line. While they can certainly be handy if you want a very small amount of space between two lines with a one time use, it is a rare occurrence for such to be needed. It is best to use a new line <li> or the paragraph tag <p> for separation as it allows for better organization. However, if you like the line spacing of a break tag, let’s look to CSS.

4. Pretty is for CSS, not HTML

When you find that you enjoy the look of the line break for all of your text, design your lines to look this way in CSS, not HTML. HTML is for content, CSS is for design. That’s not to say that you can’t use HTML to design in a pinch if necessary. For instance, you can designate the height and width of a picture in HTML, but this is an exception to the rule. It will ensure that your page looks uniform and you don’t have different sized photos all over the page messing with your content and the feel of your site.

5. Make Use of Headers

Lastly, ensure that you are using headers instead of strong tags within a short paragraph. This is a common mistake when using an editor, think Microsoft Word. Often people will bold headlines when they mean to use a header. Also, try to keep organization of your headers with what makes sense.

Example:

<h1>

<h2>

<h3>

<h4>

What we don’t want to do:

<p><strong>My Header</strong></p>

Using the above tips will not only save you a major headache when editing your content, it will also help your audience have the best experience possible when reading through your site.

Crystal Konz

Administrative Assistant

<p>Crystal’s official title is ‘office manager,’ but she likes to think of herself as ‘office caretaker, decorator and personal assistant.’ In her free time she likes to spend hours perusing Pinterest, cooking and baking, doing makeup for weddings, and binge watching Netflix.</p>

Scroll To Top