This page contains a list of recommended web development "best
practices". This list may expand over time, and suggestions for items to be
added are welcome.
-
Pay attention to detail.
Remember that "Carelessness
Costs!". This can be a life-and-death thing in certain situations, as
we all know. In a web development context (or any programming context),
no one should have to remind you not to be careless with your code, so
we won't ...
-
Try to make your web sites safe from hackers.
The two main
things you should do in this regard are:
-
Make sure all directory and file permissions are properly set.
-
Make sure all user (data) submissions are properly checked.
-
Always test your web pages using more than one browser.
Different browsers may be inconsistent in the way they handle the things we put on our web pages, so doing this is just common sense if we want to have some degree of confidence that our web pages will look more or less the same, or respond in more or less the same way, when viewed by all clients (or at least most of them). Unless there is a very good reason to do otherwise, use up-to-date versions of modern browsers, such as Chrome, Firefox, Edge, Opera and Safari.
-
Make sure to validate your web pages.
This should include validation of both the HTML markup and the CSS style sheet(s). This implies as well that you should always include a DOCTYPE declaration at the beginning of your HTML document and, within its head element, a meta element specifying the encoding scheme being used by your HTML document.
-
Make your web pages readable "behind the scenes" too.
Make the source code of your web pages as easy to read as your
displayed web page. We have all had (have we not?) the experience of
encountering virtually indecipherable HTML or other markup code when
using the "view source" feature in our browser. Try not to be the
source of such frustration. In particular, wherever possible, ensure
that the lines in your file are strictly less than 80 characters
long.
-
Prefer relative paths to absolute paths in your web pages when
referring to pages on your own site.
In the extreme (and perhaps
idealistic) case where all paths on all pages on your web site that
refer to other pages on your web site are relative paths, you could
move your entire site to another location and have it continue to
function as before.
-
Separate structure, style and behavior.
Separate, as
much as you can, the markup of document structure (HTML) from the
coding for presentation style (CSS) and the scripts that provide user
interaction and other forms of behavior (JavaScript or other scripting
language code) in your web pages.
-
Think carefully about whether you should use a relative unit
or an absolute unit of measurement whenever you have the choice.
Relative units will "scale" better when a user resizes the browser
window, but sometimes you may want a particular item to retain its size
even when surrounding items are varying in size.
-
Do not use the browser to re-size your images.
It is
much better to use an external program to make sure any image you use
is the right size in the first place, and then simply tell the browser
what this size is, using the img tag attributes width
and height.
-
It is probably a good idea to begin styling your web site with
a basic, "generic" style sheet.
Such a sheet would set (or reset)
a number of values to "baseline values" (margins and padding to zero,
for example) so you know where you're starting from, and you can then
modify these styles according to "the cascade" to style things the way
you want. Google "CSS-Reset" to see what some people think such a basic
style sheet should consist of, and then make your own choices.
-
DOCTYPE placement
Always place your
DOCTYPE declaration as the very first line in your HTML file (except perhaps for a comment line containing the name of the file), to be sure that your file will display properly in all browsers.