1. Strict Doctype
Doesn’t matter which, HTML or XHTML, but use a strict doctype. There’s no need for Transitional DOCTYPES anymore as explained in Choosing the Best Doctype for your Website.
Transitional
Transitional was intended as a stepping stone to help web designers begin to improve their code. The starting point: horrible, invalid code. The end point: horrible, valid code. You can’t expect designers to completely change their coding methods overnight; nor can you expect browser CSS support to go from nearly non-existent to perfect. One step at a time.
Nowadays, browser support for CSS is much better. The only reason for using Transitional is that you’re stuck in old habits and don’t yet have time to learn better ways of coding. If you’re learning web design from scratch, use Strict. Please, oh please use Strict.
<!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">
The short answer is: you should use Strict.
Strict is harder for beginners to get right, because you have to write better code. For example, you must remove presentational elements such as
tags, and use CSS instead to style the site. If you’re happy doing this, then you can skip the rest of this section: you’ve already made the right decision. If you’re still uncertain, read on.To understand the differences, we need to go back to the Bad Old Days, in the 1990’s, when web designers were writing horrible, bloated code, hardly anyone had heard about validation, and fewer cared. Browser support for CSS was rubbish, and the web standards movement was in its infancy.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ..... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. Indent your markup
Indentation will not render your pages faster or make sure your site is #1 in Google, but it will help you with one thing: readability. When you have 2000 lines of HTML code, it’s very easy to get lost when it’s not indented properly or lose track of an un-closed div.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</meta></head>
<body>
<div id="branding">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
Indenting should be an automaton when coding; when you change line, hit tab and off you go.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</meta></head>
<body>
<div id="branding">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
3. Comments are always important
It’s easy and it saves you a lot of time when looking for a specific area in your code. No need to comment the little things but the big areas like header, navigation, content, posts, etc… the ones you’ll most likely be going back to quite often. Here’s how I like to do mine.
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</meta></head>
<body>
<!-- branding -->
<div id="branding">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
<!-- END OF branding -->
<!-- navigation -->
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<!-- END OF navigation -->
4. User the proper element for the job
When coming to grips with CSS, it’s easy to forget that numerous HTML elements exist with a pre-defined set of default CSS styles. The most common of these are the headings (i.e.
–
). Many new designers learning the ways of CSS often forget about these and start creating their own headings.
heading3 {
color: #c44d58;
font-size: 18px;
font-weight: bold;
margin: 5px 0 8px 0;
padding: 2px 0 4px 0;
}
<div class="heading3">Latest additions to the portfolio</div>
heading3 {
color: #c44d58;
font-size: 18px;
font-weight: bold;
margin: 5px 0 8px 0;
padding: 2px 0 4px 0;
}
<div class="heading3">Latest additions to the portfolio</div>
They exist, they are already bold and big and yes, they are GREAT for SEO purposes (search engine optimization).
h3 {
color: #c44d58;
font-size: 18px;
}
<h3>Latest additions to the portfolio</h3>
5. Tables aren’t bad
When used to display data that is. Do not confused the “Don’t use tables for your layout” to “Don’t use the table element at all” as many people seem to be doing.
From the W3C – 11 Tables
The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.
…
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
6. Nesting tags
Beside the obvious nesting show here:
<strong><em>Latest additions to the portfolio</em></strong>
We must also be careful of not nesting block elements inside inline elements. Tho most browsers will handle it fine, it’s semantically incorrect.
<a href="/portfolio/"><div>Latest additions to the portfolio</div></a>
Anchors are inline elements while div’s are block elements.
<div><a href="/portfolio/">Latest additions to the portfolio</a></div>
7. Validation
Validation should always be on your list of “things to do before launching” a website. Validating your site doesn’t mean that it will make it work automagically in all browser. Instead, think of the validating services as spell checkers and nothing more.
<h3>Portfolio <p>Check out my portfolio and if you like what you see, do not hesitate to <a href="/contact/">contact me.<p>
3 simple errors that, in a page of 500 lines of code can be easily missed! Let the HTML and CSS validators help you… that’s what they’re there for! For more on this, check out How important is HTML and CSS validation?
8. Keeping things separated
Make sure that your CSS and JS are separated from your mark-up. Just like PHP (or ASP) includes are great to separate sections that are common throughout your site, so is CSS and Javascript. Keeping them separate means that if you need to change the color of your text, you can do it in one place, your external stylesheet, instead of all your HTML files … a task that could be daunting if you have more than 50+ files.
<script type="text/javascript" src="/js/some-javascript-file.js"'></script> <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
If you have a JPEG image and want to know if it’s PSed. Go to Photoshopped Image Detector, put in the URL to the image, and hit submit. The system will analyze the image for you. If the image has been edited, detailed info will be shown.