The layout of your code can really affect how fast your project happens, and whether or not you meet deadlines. On top of that it can also determine how easy it is to read and edit later on, when you’re making alterations to it. That’s why it’s important to follow some of these best practices on how to successfully code a neat website.
Layout of your code is very important when it comes to coding a website. Break your code into further sections; remember, you already have the head and body, but break that up into header, content and footer areas.
<div id="header"> </div> <div id="content"> </div> <div id="footer"> </div>
You could even break it up into further sections if it really tickled your fancy. Saying that, don’t just do this because you think it looks nice and tidy. Every byte is adding extra onto your users load time, meaning they have to wait longer to see all of your awesome content.
Use indents to make your code more legible. You can do this with the tab button on your keyboard, or if you’re on a web based application (which usually you can’t use tab with), just do a few spaces (3-6 is good). This helps to keep your code easy to read, and lets you know if you’ve coded it right, since you should end up with no spaces at the start if you close all your elements properly. For example:
<body>
<div>
<div>
Hello there, this is the content of a div.
</div>
</div>
</body>
Notice how it ends up back at the left most side of the page, with no spaces. This way I know that I’ve closed all my tags properly.
Proper layout of the code will certainly make your life easier when it comes back to changing anything, making it easier to find anything.
This goes without saying really, and should go down as crazy bad voodoo for web developers all across the world. Don’t code your whole website in tables. Not only will you lose the respect of your peers and the general web development community, you’ll have let your self down, and be ridiculed for years to come.
The most widely used way to code a website (at least, by proper developers) is the <div> tag. The <div> tag is like, well it’s basically a division or a section. Divs stack on top of each other, and this is the main reason why some use those cursed tables instead of divs. The fact is, it’s easier to code in tables than it is in divs. I’m not some sort of pretentious git who thinks that coding in divs is the only way, because I know how hard it can be to get it to work in all browsers across the board.
However, using divs and CSS will almost certainly speed up your website, and it’s the more modern way of coding. If you’re starting out, try using divs instead of tables, as it will only benefit you later on. You may be asking then, “How do I make columns with divs?”. Well, basically what you want to be doing is using float properties in your CSS.
.divelement {
float: left;
}
.clearleft {
clear: left;
}
<div class="divelement">
Hello there!
</div>
<div class="divelement">
This element will float beside the previous one.
</div>
<div class="clearleft">
This will go under everything
</div>
After that you an add in more CSS as you like. clear: left; simply clears the float: left; property, so that that div won’t float beside the previous one as would happen normally, but instead will stack horizontally as normal.
Okay, so a few errors here and there aren’t going to completely throw you off the road to web developer heaven, but it’s best to have no errors than a few lying around. Coding in valid HTML and CSS will speed up your site too! You may not (or you might) know this, but your browser has to fix all the mistakes you make in your HTML and CSS, and this takes time, time your user could be using to read your latest article on whatever topic you write about.
Using a Doctype is required to make your document valid. Doctypes are just the Document Type, i.e. XHTML 1.1, HTML 5, HTML 4, etc. Until HTML 5 these have been very hard to remember, so HTML 5 has simplified this by just having its doctype as follows:
<!DOCTYPE html>
And there’s no reason why you can’t use this now. As long as you don’t use any HTML 5 features that most browsers can’t support, it should be plain sailing.
Cross Browser Compatibility is very important, and you should certainly make sure it works in the majority of browsers. With IE6 moving into obscurity more and more each day, you can sort of ignore it to a certain extent, but you should still put in the effort to try and make it work.
Commenting your code helps you to understand what exactly you were thinking when you wrote this. This is more important in scripting languages like PHP and Javascript, but ultimately you should try and comment anything that you code, which may come across as complete gibberish to your future self.
/* Comments look like this in PHP, Javascript and CSS */ <!-- Comments look like this in HTML! -->
SEO tags help to rank your website higher when it comes to search ranks, so you’ll get more traffic from those sources. Below are the most common meta tags:
<title>Your Websites Title</title> <meta name="Description" content="The Description of your website goes here."> <meta name="Keywords" content="keywords, to, describe, your, site, separated, by, commas">
All these tags do is tell the search engine things about your site. Remember: meta tags go in the head of your document, not the body.
Comments
The point seven is really useful.
I didn’t know that before I read your article, thank you!
Great article – there can’t never be too many good practices when coding a site.
Great tips. Definitely something that all beginners should read when learning how to code.
You missed test in multiple resolutions :(
This was more of a guide on how to code something, rather than what to do before launching your site. :P
These are some good tips, that I always try to follow when doing coding.
When adding comments, I would do it with PHP, like this:
<?php // My comment here ?>Just because if I have a lot of comments, it won’t add to the size of what’s actually sent to the user, possibly speeding up the page just a tiny bit. The difference is probably negligible, but I like to think that it helps a bit.
It is important to write valid code from the beginning. It can save a lot of time doing the validation stuff right away, instead of waiting to clean up the mess later :P