Front-End Best Practices: HTML5 Doctype, Semantic Markup & JS Performance
This guide covers essential front‑end techniques—from using the HTML5 DOCTYPE and semantic markup to proper heading hierarchy, table usage, image alt text, microformats, jQuery UI, JavaScript style rules, loop optimizations, GUID generation, and feature detection with Modernizr—helping developers write cleaner, faster, and more accessible web code.
HTML5 DOCTYPE
Never omit a DOCTYPE; modern browsers treat the simple <!DOCTYPE html> as HTML5, triggering standards mode even in older browsers like IE6/7.
<!DOCTYPE html>
Write Valid, Semantic Markup
Start headings at <h2>, wrap paragraphs in <p>, and use <table> only for tabular data with proper <th> headers. Set cellpadding, cellspacing, and border to 0 and control styling via CSS.
<table cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>Cell Header</th> </tr> </thead> <tbody> <tr> <td>Cell Item</td> </tr> </tbody> </table>
Images Must Have Alt Text
Provide meaningful alt attributes for <img> tags; use an empty string for decorative icons.
<img src="dog.gif" alt="Fido and I at the park!" /> <img src="bullet.gif" alt="" />
Microformats for Contact Information
Use the hCard microformat to make contact data machine‑readable.
<span class="tel"> <span class="type">home</span>: <span class="value">+1.415.555.1212</span> </span>
jQuery and jQuery UI Widgets
Both libraries aim for consistent cross‑browser appearance and follow WCAG 2.0 and ARIA guidelines.
JavaScript Style Guidelines
Keep existing formatting unless reformatting the whole file. Prefer spaces around operators and braces on the same line.
// Bad if(blah==="foo"){ foo("bar"); } // Good if (blah === "foo") { foo("bar"); }
Always use === (strict equality) except when comparing to null, where == also matches undefined.
var zeroAsAString = "0"; if (zeroAsAString == 0) { /* true */ } if (zeroAsAString === 0) { /* false */ }
Specify the radix when using parseInt to avoid unexpected octal/hex parsing.
alert(parseInt("08")); // 2 alert(parseInt("08", 10)); // 8
Use descriptive Boolean variable names prefixed with is, can, or has.
Avoid Global Namespace Pollution
Encapsulate settings in a single object or use a namespaced variable.
// Bad – many globals var settingA = true; var settingB = false; // Good – single namespace var settings = { settingA: true, settingB: false }; // Access settings.settingA;
CamelCase Variable Naming
Use lower‑camelCase for variables; constants may be upper‑snake‑case.
var xPosition = obj.scrollLeft; // better var X_POSITION = 1; // constant
Loop Performance
Cache array length outside the loop and minimize DOM reflows by building HTML strings first.
for (var i = 0, len = arr.length; i < len; i++) { // loop body } var html = ""; for (var i = 0, len = arr.length; i < len; i++) { html += "<li>" + arr[i].title + "</li>"; } myList.innerHTML = html; // single reflow
Use break and continue to exit or skip iterations when appropriate.
Function Parameters
Pass a single object instead of many individual arguments.
function greet(user) { alert(user.name); } greet({ name: "Bob", gender: "male" });
Mapping this to self
Store the outer this in a variable (e.g., _self) before entering a callback.
var _self = this; $(_self.friends).each(function(i, item) { if (item.name === toFind) return item; });
Generating Unique IDs
Avoid using timestamps; prefer GUID/UUID functions.
function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } function guid() { return S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4(); } var myID = "static" + guid();
Feature Detection Instead of Browser Sniffing
Use Modernizr to test for HTML5 features like canvas rather than checking the user‑agent.
if (Modernizr.canvas) { /* canvas supported */ }
Readable Millisecond Values
Express timeouts as calculations for clarity, e.g., 30 * 1000 instead of 30000.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.