1:
Always Close Your Tags
Back
in the day, it wasn't uncommon to see things like this:
Bad:
1
2
3
|
<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:
1
2
3
4
5
|
<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.
-
-
-
-
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 inter pretting 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.
Bad:
1
|
<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.
Better
1
2
3
|
#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.
1
2
3
4
5
|
<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:
1
2
3
4
5
|
<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.
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:
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!
8:
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
9:
Keep Your Tag Names Lowercase
Technically,
you can get away with capitalizing your tag names.
1
2
3
|
<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
1
2
3
|
<div>
<p>Here's
an interesting fact about corn. </p>
</div>
|
10.
Keep image file sizes small:
You have only a few seconds to grab the recipients attention
– don’t waste it with large images that take too long to load.
