Articles About Building Websites

Standards-compliant code samples, detailed comparisons of techniques and busting myths.

Most Popular

Visible Vertical Scrollbar (in Firefox)
A copy-and-paste solution for users and authors without side-effects.
Best Markup for text/html
HTML is the best choice for nearly all websites.
Line Lengths and Readability
Is there an optimal line length? Should we place limits on sizing?
Using HTML Heading Numbers
Why do we have <h1> to <h6> instead of just <h>?

Coding Habits

HTML E-mail: Essential Techniques
Use layout tables, graphical-gap.gif, style attributes and no semantic elements. (It’s that bad.)
My CSS Writing Style
One property per line in a consistent order. One stylesheet per medium with sections indicated by comments. Rulesets within each section follow source order.
My HTML Writing Style
Blank lines between sections and minimal indention, like plain text formatting. Fewest possible attributes in a consistent order, especially class and id.

Code Samples for Normal Websites

Block Navigation Lists
Site menus where the whole of each link is clickable.
Horizontal Lists
Making <ol> and <ul> go across the page using CSS.
Breadcrumbs Markup
Links inside list elements or links separated by punctuation?
Hiding <fieldset> Borders
They rarely suit a design but it’s easy to remove them.
Positioning <legend> Text
Properly left-aligned <legend> text across browsers.
Using float for Form Layout
Put <label> alongside <input> using CSS float.

Code Samples for Technical Websites

Code Boxes with <pre> and CSS
Taming <pre> using the CSS2.1 white-space property.
Syntax Highlighting with HTML for Diverse Formats
Present any code sample coherently using simple, lightweight markup.
Compact Definition Lists using CSS
Recreating <dl compact> with CSS float.
Archive Links for Blogs
Detailed analysis of using <a rel> instead of <link rel>.
E-mail Protection from Spambots
Stop new addresses ever getting into spamming databases.
Use Your <head>
Include this at the start of HTML documents.


Web Developer Toolkit
Links to Firefox extensions I find invaluble when developing websites.
Navigation Using rel
Implementations of <a rel> and <link rel> reviewed by me.


Performant Protest using
A blog entry about storing their catalogue in a PHP array(), wrapping HTML around it, then adding CSS and images.
Image Rollovers with alt Text
A transparent <img src alt> with CSS background-image behind it is swapped on a:hover using a preloaded CSS Sprite Sheet.
Mobile Browser Simulation using CSS and Firefox
Use that stylesheet in the CSS > Edit CSS box in tandem with the CSS > Display CSS by Media Type > Handheld feature from the Website Developer Toolbar.
Validating E-mail Addresses
Distribution lists from sign-up forms often contain typos and confused syntax. Here are some trends I have noticed.