Code Structure & It’s Importance

Are you a coder? It doesn’t matter if you are coding HTML, CSS, JavaScript, Java, C#, C++ or any other kind of code. Do you understand why code structure is important? In this article it will be my goal to explain to you what code structure is and why it is so important.

So, what exactly IS code structure?

That’s a good question. For the purposes of this article I will be using html examples to illustrate code structure. In a nutshell, code structure is the design and flow of an HTML document. For example..

<!DOCTYPE html>

What you just saw there is a very basic HTML document structure. In the example above you are to determine a clear outline of the document and where your code should go. You can ask any designer and they will most likely tell you that it is horrible to receive code like the following and asked to fix it…

<!DOCTYPE html> <head> <title> </title> </head> <body> <div> <h1> </h1> </div> </body> </html>

Again, I’ve seen much worse and larger amounts of code written like this. A developer would much rather the first example.

So, why is it so important for me to use proper code structure?

Have you ever been asked to proof-read or edit an essay or article and you weren’t able to make sense of it? For example, did you have problems finding where sentences or paragraphs stop or start? It’s basically the same way with coding.

With the code structure in the first example, a developer can quickly scan your code and find the problem right away. In a much worse case of the second example there will usually be one or two responses: 1) Work on your code structure and come back to me when it’s better, or 2) I’m sorry, I don’t have the time to go through your code like that. In any considerable situation a professional developer is not going to have the time to sit and read line after line of code; he or she would more likely try to scan or skim your code in a quick manner and if the structure is clear and clean they may pick up on the issue immediately or tell you they will take a closer look later in the day.

But I build a site using blah.blah and their code looks nothing like that…

That’s true in most cases, just recently I created a Tumblr theme online and the code structure was crappy. I actually copied and pasted the code into my text editor and edited the structure to look something like this:

<div class=”container”>
<img class=”avatar” src=”{PortraitURL-128}”>
<h1><a href=”{BlogURL}”>{Title}</a></h1>
<div class=”page”>
<div class=”pagelist”>
<a href=”{URL}”>{Label}</a>

When the code came out of the program online it looked something like this:

<!DOCTYPE html>
header { background: url(; }
header a { text-decoration: none; color: #fff; }
h1 { display: inline; position: absolute; top: 60px; font-size: 42px; color: #fff;}

Which is easier to navigate for you? I hope you understand that for lack of space I am not including the entire document in this article but if you would like them please let me know.

Okay, I think I’ve got it! What do I need to do?

You may be interested in taking some free online classes/tutorials to freshen up your skills. Pay close attention to how the example code is structured. I will list some really good resources at the end of this article. And remember, if your code breaks, you’re more likely to get help with clear and clean code.




  • HTML5 & CSS3 All-In-One for Dummies
  • Andy Harris January 7, 2014
  • Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step by Step Guide to Creating Dynamic Websites
  • Robin Nixon June 16, 2014
  • HTML & CSS: Design & Build Websites
  • Jon Duckett November 8, 2011


You may also be interested in checking your local community colleges for classes on this topic.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.