30 HTML Best Practices for Beginners
The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won’t benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you’re being neglected. This site is for you, so speak up! With that said, today’s tutorial is specifically for those who are just diving into web development. If you’ve one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!
Without further ado, let’s review thirty best practices to observe when creating your markup.
1: Always Close Your Tags
Back in the day, it wasn’t uncommon to see things like this:
<li>Some text here. <li>Some new text here. <li>You get the idea.
Notice how the wrapping UL/OL tag was omitted. Additionally, many chose to leave off the closing LI tags as well. By today’s standards, this is simply bad practice and should be 100% avoided. Always, always close your tags. Otherwise, you’ll encounter validation and glitch issues at every turn.
Better
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
2: Declare the Correct DocType
When I was younger, I participated quite a bit in CSS forums. Whenever a user had an issue, before we would look at their situation, they HAD to perform two things first:
- Validate the CSS file. Fix any necessary errors.
- Add a doctype.
“The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup.”
Most of us choose between four different doctypes when creating new websites.
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
There’s a big debate currently going on about the correct choice here. At one point, it was considered to be best practice to use the XHTML Strict version. However, after some research, it was realized that most browsers revert back to regular HTML when interpretting it. For that reason, many have chosen to use HTML 4.01 Strict instead. The bottom line is that any of these will keep you in check. Do some research and make up your own mind.
3: Never Use Inline Styles
When you’re hard at work on your markup, sometimes it can be tempting to take the easy route and sneak in a bit of styling.
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
Sure — it looks harmless enough. However, this points to an error in your coding practices.
-
When creating your markup, don’t even think about the styling yet. You only begin adding styles once the page has been completely coded.
It’s like crossing the streams in Ghostbusters. It’s just not a good idea.
-Chris Coyier (in reference to something completely unrelated.)
Instead, finish your markup, and then reference that P tag from your external stylesheet.
Better
#someElement > p {
color: red;
}
4: Place all External CSS Files Within the Head Tag
Technically, you can place stylesheets anywhere you like. However, the HTML specification recommends that they be placed within the document HEAD tag. The primary benefit is that your pages will seemingly load faster.
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
- ySlow Team
<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
5: Consider Placing Javascript Files at the Bottom
Remember — the primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can’t continue on until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.
If you have JS files whose only purpose is to add functionality — for example, after a button is clicked — go ahead and place those files at the bottom, just before the closing body tag. This is absolutely a best practice.
Better
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
6: Never Use Inline Javascript. It’s not 1996!
Another common practice years ago was to place JS commands directly within tags. This was very common with simple image galleries. Essentially, a “onclick” attribute was appended to the tag. The value would then be equal to some JS procedure. Needless to say, you should never, ever do this. Instead, transfer this code to an external JS file and use “addEventListener/attachEvent” to “listen” for your desired event. Or, if using a framework like jQuery, just use the “click” method.
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});
7: Validate Continuously
I recently blogged about how the idea of validation has been completely misconstrued by those who don’t completely understand its purpose. As I mention in the article, “validation should work for you, not against.”
However, especially when first getting started, I highly recommend that you download the Web Developer Toolbar and use the “Validate HTML” and “Validate CSS” options continuously. While CSS is a somewhat easy to language to learn, it can also make you tear your hair out. As you’ll find, many times, it’s your shabby markup that’s causing that strange whitespace issue on the page. Validate, validate, validate.
8: Download Firebug
I can’t recommend this one enough. Firebug is, without doubt, the best plugin you’ll ever use when creating websites. Not only does it provide incredible Javascript debugging, but you’ll also learn how to pinpoint which elements are inheriting that extra padding that you were unaware of. Download it!
9: Use Firebug!
From my experiences, many users only take advantage of about 20% of Firebug’s capabilities. You’re truly doing yourself a disservice. Take a couple hours and scour the web for every worthy tutorial you can find on the subject.
Resources
10: Keep Your Tag Names Lowercase
Technically, you can get away with capitalizing your tag names.
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
Having said that, please don’t. It serves no purpose and hurts my eyes — not to mention the fact that it reminds me of Microsoft Word’s html function!
Better
<div> <p>Here's an interesting fact about corn. </p> </div>
11: Use H1 – H6 Tags
Admittedly, this is something I tend to slack on. It’s best practice to use all six of these tags. If I’m honest, I usually only implement the top four; but I’m working on it! :) For semantic and SEO reasons, force yourself to replace that P tag with an H6 when appropriate.
<h1>This is a really important corn fact! </h1> <h6>Small, but still significant corn fact goes here. </h6>
12: If Building a Blog, Save the H1 for the Article Title
Just this morning, on Twitter, I asked our followers whether they felt it was smartest to place the H1 tag as the logo, or to instead use it as the article’s title. Around 80% of the returned tweets were in favor of the latter method.
As with anything, determine what’s best for your own website. However, if building a blog, I’d recommend that you save your H1 tags for your article title. For SEO purposes, this is a better practice – in my opinion.
13: Download ySlow
Especially in the last few years, the Yahoo team has been doing some really great work in our field. Not too long ago, they released an extension for Firebug called ySlow. When activated, it will analyze the given website and return a “report card” of sorts which details the areas where your site needs improvement. It can be a bit harsh, but it’s all for the greater good. I highly recommend it.
14: Wrap Navigation with an Unordered List
Each and every website has a navigation section of some sort. While you can definitely get away with formatting it like so:
<div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>
I’d encourage you not to use this method, for semantic reasons. Your job is to write the best possible code that you’re capable of.
Why would we style a list of navigation links with anything other than an unordered LIST?
The UL tag is meant to contain a list of items.
Better
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
15: Learn How to Target IE
You’ll undoubtedly find yourself screaming at IE during some point or another. It’s actually become a bonding experience for the community. When I read on Twitter how one of my buddies is battling the forces of IE, I just smile and think, “I know how you feel, pal.”
The first step, once you’ve completed your primary CSS file, is to create a unique “ie.css” file. You can then reference it only for IE by using the following code.
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->
This code says, “If the user’s browser is Internet Explorer 6 or lower, import this stylesheet. Otherwise, do nothing.” If you need to compensate for IE7 as well, simply replace “lt” with “lte” (less than or equal to).
16: Choose a Great Code Editor
Whether you’re on Windows or a Mac, there are plenty of fantastic code editors that will work wonderfully for you. Personally, I have a Mac and PC side-by-side that I use throughout my day. As a result, I’ve developed a pretty good knowledge of what’s available. Here are my top choices/recommendations in order:
Mac Lovers
PC Lovers
17: Once the Website is Complete, Compress!
By zipping your CSS and Javascript files, you can reduce the size of each file by a substantial 25% or so. Please don’t bother doing this while still in development. However, once the site is, more-or-less, complete, utilize a few online compression programs to save yourself some bandwidth.
Javascript Compression Services
CSS Compression Services
18: Cut, Cut, Cut
Looking back on my first website, I must have had a SEVERE case of divitis. Your natural instinct is to safely wrap each paragraph with a div, and then wrap it with one more div for good measure. As you’ll quickly learn, this is highly inefficient.
Once you’ve completed your markup, go over it two more times and find ways to reduce the number of elements on the page. Does that UL really need its own wrapping div? I think not.
Just as the key to writing is to “cut, cut, cut,” the same holds true for your markup.
19: All Images Require “Alt” Attributes
It’s easy to ignore the necessity for alt attributes within image tags. Nevertheless, it’s very important, for accessibility and validation reasons, that you take an extra moment to fill these sections in.
Bad
<IMG SRC="cornImage.jpg" />
Better
<img src="cornImage.jpg" alt="A corn field I visited." />
20: Stay up Late
I highly doubt that I’m the only one who, at one point while learning, looked up and realized that I was in a pitch-dark room well into the early, early morning. If you’ve found yourself in a similar situation, rest assured that you’ve chosen the right field.
The amazing “AHHA” moments, at least for me, always occur late at night. This was the case when I first began to understand exactly what Javascript closures were. It’s a great feeling that you need to experience, if you haven’t already.
21: View Source
What better way to learn HTML than to copy your heroes? Initially, we’re all copiers! Then slowly, you begin to develop your own styles/methods. So visit the websites of those you respect. How did they code this and that section? Learn and copy from them. We all did it, and you should too. (Don’t steal the design; just learn from the coding style.)
Notice any cool Javascript effects that you’d like to learn? It’s likely that he’s using a plugin to accomplish the effect. View the source and search the HEAD tag for the name of the script. Then Google it and implement it into your own site! Yay.
22: Style ALL Elements
This best practice is especially true when designing for clients. Just because you haven’t use a blockquote doesn’t mean that the client won’t. Never use ordered lists? That doesn’t mean he won’t! Do yourself a service and create a special page specifically to show off the styling of every element: ul, ol, p, h1-h6, blockquotes, etc.
23: Use Twitter
Lately, I can’t turn on the TV without hearing a reference to Twitter; it’s really become rather obnoxious. I don’t have a desire to listen to Larry King advertise his Twitter account – which we all know he doesn’t manually update. Yay for assistants! Also, how many moms signed up for accounts after Oprah’s approval? We can only long for the day when it was just a few of us who were aware of the service and its “water cooler” potential.
Initially, the idea behind Twitter was to post “what you were doing.” Though this still holds true to a small extent, it’s become much more of a networking tool in our industry. If a web dev writer that I admire posts a link to an article he found interesting, you better believe that I’m going to check it out as well – and you should too! This is the reason why sites like Digg are quickly becoming more and more nervous.
If you just signed up, don’t forget to follow us: NETTUTS.
24: Learn Photoshop
A recent commenter on Nettuts+ attacked us for posting a few recommendations from Psdtuts+. He argued that Photoshop tutorials have no business on a web development blog. I’m not sure about him, but Photoshop is open pretty much 24/7 on my computer.
In fact, Photoshop may very well become the more important tool you have. Once you’ve learned HTML and CSS, I would personally recommend that you then learn as many Photoshop techniques as possible.
- Visit the Videos section at Psdtuts+
- Fork over $25 to sign up for a one-month membership to Lynda.com. Watch every video you can find.
- Enjoy the “You Suck at Photoshop” series.
- Take a few hours to memorize as many PS keyboard shortcuts as you can.
25: Learn Each HTML Tag
There are literally dozens of HTML tags that you won’t come across every day. Nevertheless, that doesn’t mean you shouldn’t learn them! Are you familiar with the “abbr” tag? What about “cite”? These two alone deserve a spot in your tool-chest. Learn all of them!
By the way, in case you’re unfamiliar with the two listed above:
- abbr does pretty much what you’d expect. It refers to an abbreviation. “Blvd” could be wrapped in a <abbr> tag because it’s an abbreviation for “boulevard”.
- cite is used to reference the title of some work. For example, if you reference this article on your own blog, you could put “30 HTML Best Practices for Beginners” within a <cite> tag. Note that it shouldn’t be used to reference the author of a quote. This is a common misconception.
26: Participate in the Community
Just as sites like ours contributes greatly to further a web developer’s knowledge, you should too! Finally figured out how to float your elements correctly? Make a blog posting to teach others how. There will always be those with less experience than you. Not only will you be contributing to the community, but you’ll also teach yourself. Ever notice how you don’t truly understand something until you’re forced to teach it?
27: Use a CSS Reset
This is another area that’s been debated to death. CSS resets: to use or not to use; that is the question. If I were to offer my own personal advice, I’d 100% recommend that you create your own reset file. Begin by downloading a popular one, like Eric Meyer’s, and then slowly, as you learn more, begin to modify it into your own. If you don’t do this, you won’t truly understand why your list items are receiving that extra bit of padding when you didn’t specify it anywhere in your CSS file. Save yourself the anger and reset everything! This one should get you started.
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
28: Line ‘em Up!
Generally speaking, you should strive to line up your elements as best as possible. Take a look at you favorite designs. Did you notice how each heading, icon, paragraph, and logo lines up with something else on the page? Not doing this is one of the biggest signs of a beginner. Think of it this way: If I ask why you placed an element in that spot, you should be able to give me an exact reason.
29: Slice a PSD
Okay, so you’ve gained a solid grasp of HTML, CSS, and Photoshop. The next step is to convert your first PSD into a working website. Don’t worry; it’s not as tough as you might think. I can’t think of a better way to put your skills to the test. If you need assistance, review these in depth video tutorials that show you exactly how to get the job done.
30: Don’t Use a Framework…Yet
Frameworks, whether they be for Javascript or CSS are fantastic; but please don’t use them when first getting started. Though it could be argued that jQuery and Javascript can be learned simultaneously, the same can’t be made for CSS. I’ve personally promoted the 960 CSS Framework, and use it often. Having said that, if you’re still in the process of learning CSS — meaning the first year — you’ll only make yourself more confused if you use one.
CSS frameworks are for experienced developers who want to save themselves a bit of time. They’re not for beginners.
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
awsome! Good tutorial :)
The article is fantastic! If only every web designer and developer read this before making a single site, the web would be one hell of a better place. Retweeted!
Great Article. I disagree with photoshop though.. Its great for photo/image manipulation but fireworks is by far better for site mock ups.
nice tips. but you guys really need to using pagination for comments :)
Excellent article Jeff!
I’ve been designing and developing sites for 12-years and using standards for the past 6-years and it’s very reassuring to read an article that reaffirms the same best practices.
I too use Fireworks for graphic editing and creating mockups, which more seamlessly integrates with Dreamweaver and Flash. Also, I don’t agree with never using inline styles. There are rare instances where creating one id or class to control a single element isn’t practical and an inline style is more appropriate.
One point I’d like to share is to use a “Strict” DOCTYPE, which helps a designer to avoid using deprecated code.
Very useful list of best practices, I use firebug a lot, especially useful when you are just starting out and want to know how something was coded.
I flip between Photoshop and Fireworks for designing, I find it a little easier to slice a design up in Fireworks, but that’s probably more of a reflection on my photoshop skills!
this was absolutely the greatest,,, it has helped me understand a couple of things that I was still confused about,,,you said beginners shouldn’t use Frameworks yet,,, does that include 960 Grid,,,fluid,, and some of those other names Im not familiar with yet.
Thank you for teaching us.
Yes it does include them. :)
very usuful tips. I also reccommend to use free HTML/CSS Editor – Codelobster PHP Edition.
Why would you recommend Jquery as an alternative to inline scripts. Do you know that Search engines are starting to understand JS and that Jquery is bloated as balls?
That’s a ridiculous statement.
Just to clarify: The article isn’t suggesting using jQuery instead of inline javascript. Those were 2 different points.
First, it is better to put javascript in external files so it can be reused easily on many pages, separates it from the content and allows it to be cached (for improved speed). This is your javascript code that you may have previously put inline in your html document. I myself would argue that there are times when inline javascript is approriate, but you have to undeerstand the rules before you can break them.
Secondly, Jeffrey was suggesting that beginners avoid using frameworks for javascript (like jQuery) and CSS until they are more familiar with both languages. To bring some value to our ignorant commenter’s point: frameworks always add unnecessary code (to some degree) and it is important to know when to use them rather than throwing them into every project you do.
Well,,,,I looked and looked and looked for a way to contact Jeffery Way,,, but no email,, or way to contact him,,,, maybe he will get this… I was watching his video on Psd to HTML and he mentioned he needed a way to measure in Firefox,,,,so here is the link to the Firefox add on,,,,called measure It,,, it stays in the bottom task bar,,, really KOOL…. https://addons.mozilla.org/en-US/firefox/search?q=measureit&cat=all&advancedsearch=1&as=1&appid=1&lver=3.6&atype=0&pp=20&pid=5&sort=&lup=
Thank You Jeffery for your screencasts,, I am learning and will make you proud some day,,, please take your time though ,,, its not boring,,, its how we learn.
Thanks, dixie!! :)
thank you
Nice useful tips, a great read!! Thank you for this :-)
Great tips and I have to admit especially that AHHA moment in the middel of the night made me laugh, it’s so true! One question, I downloaded dreamweaver cs4 trial and is it me or is it just so incredibly much to go trough?! Icouldn’t make nothing out of it, isn’t there an easier straight forward program for a simple website?
Cheers
Really knowledgeable post …
nic
What the hell does tweeter has to do with anything?!?
But but but… About the slicing of the psd for the website, is it a good idea? I read somewhere that having words as maybe the content of the web page is better for SEO instead of a sliced up image?
thanx for the info.. i am that guy you were talking bout.. i have 2 month experience under my belt but 4 year of PS skills.. yer article deff. cleared up alot of things for me.. and made me excited to learn the right way.. PS yer PSD+tuts was my hang out place once.. now this site will be my stomping grounds for a while
good very useful for web designers
Really cool article, remind me that it’s not the time for me to use the 960 grid system yet :D
Thanks for all those nice tips, they are really helpful. Keep doing that really nice job guys.
Great tips. Regarding #3, yes avoid inline CSS as much as you can. But unfortunately if you’re coding for email you can’t. Hopefully this will change one day, but until it does inline CSS is the only way to add styles to HTML email.
Simply some of the best guidelines I’ve seen. I started web development 13 years ago even though I try to stay with the changing technologies it’s hard to maintain knowledge of best practices. Great article, thanks very much.
Nice really:)
And the Linux Lovers for point 16??
nice1:)
A GREAT TUTORIAL 4 beginner like me
nice and really informative!
Its Superb!… Thanks mate.
thanks for the collection. always good to bring these things back to mind :-)
r.
Great Article ! tkz.
I don’t know how to express my grattitude to you all guys, what awesome articles..
I just want to say thank you!
Thank you!
Thanks a lot, great article and lots of helpful info.
Great tips except for the stay up late part. Unless you’re sleeping in too, depriving your brain of proper rest time makes you slower and takes years off your life. There are times when it’s needed in this business to stay up late to hit a deadline but there are also times when it will actually help you to just go to bed.
If you want an easier-on-the-body way to all of a sudden grok things, try starting something challenging that will take you an hour or more to complete, 20-30 minutes before the end of your workday. It will be hard to stop but do it. Go eat, hang with your family or friends and then go to bed. The next morning you’ll wake up, skip Twitter, email, Facebook, whatever and jump straight to it because your brain will have been working overtime on the problem/thing you were trying to understand.
It may not work for you but I’ve had many breakthroughs in code-understanding this way and am much better rested for it :)
really its very good one
Very good article and it’s very useful to web developers.
Really nice article.Just in some days,I’ll start learning HTML,CSS,PHP and Flash seriously….
This post is really handy..
Excellent tutorial, really useful especially for me since I am just starting out in the world of design & coding.
Bravo!!!! Very good!
Great list. Those point will help alot of people out. Thanks for sharing!
ahh love this!
Fantastic round up of all the best tutorials over the web, I’ve heard of most of these before and thus try to use them all the time; and I’d agree with all points raised, especially for smaller, more basic trained web designers/ coders.
Thanks Jeffrey. I really appreciate what you’ve done. Its really helping me.
Its very useful for designers.
Thank you very much. Very helpful
“Always, always close your tags”
=> Always, always read the specs… and (for example) MUST NOT be closed in HTML.
Thanks so much for this post. I really enjoyed it. Even though I’m not quite a beginner at web design, it really did point out a couple mistakes I was making. Especially the lining up bit. I started going back into some old psd’s an lining up things and it really shaped them up. Thanks again.
One word: “wrong”
Could anyone please point the Author towards the W3C specifications? Then, give him experience and we’ll talk again. Geez… haven’t read so much “false information” wrapped up like this for a long time.
@net.tutsplus.com:
1) FYI: this “comment box” kills comments that are 4,47 KB (4.581 Bytes) in size. So much for being able to correct the whole “best practices” issue I’m reading here.
2) If you’re interested in a correct tutorial, feel free to contact me. 20+ years of experience makes me turn into a zombie reading newb-tips like these.
Mike – One quick look at e-sushi.net reveals really poor looking source code. We’ll pass.
@e-sushi
lol what an ass (__|__) trying to promote yourself on this wonderful site, go home and practice !
really good……..
Very good article and nice explain
I want to post this article on my web site http://www.almekhlafi.com with write this site source if you no have any problem
Thankyou