Front‑End Development Guidelines: HTML5 Doctype, Semantic Markup, Accessibility, and JavaScript Best Practices
This article provides comprehensive front‑end development guidelines covering the proper HTML5 DOCTYPE, semantic markup, alt text, table usage, microformats, jQuery UI, consistent JavaScript style, performance optimizations, unique ID generation, feature detection, and readable code conventions.
Define the HTML5 <!DOCTYPE html> to trigger standards mode across browsers.
Write clean, semantic markup: start headings with <h2>, wrap paragraphs in <p>, and maintain proper heading hierarchy for SEO.
Use meaningful alt attributes on <img> tags; leave alt empty only for decorative images.
Reserve <table> for tabular data, using <th> for headers and set cellpadding="0" cellspacing="0" border="0" because styling should be handled by CSS.
Apply microformats such as hCard to expose contact information to machines, e.g.,
<span class="tel"><span class="type">home</span>: <span class="value">+1.415.555.1212</span></span>.
Leverage jQuery and jQuery UI for cross‑browser UI consistency and WCAG‑compliant components.
Adopt consistent JavaScript style: place braces on the same line, always use braces, prefer double quotes for strings, and use === over == except when comparing to null.
Specify the radix when calling parseInt to avoid unexpected octal parsing, e.g., parseInt("08", 10).
Avoid unnecessary global variables; encapsulate settings in a namespace object, e.g., var settings = { settingA: true, settingB: false };.
Use camelCase for variable names and ALL_CAPS for constants, e.g., var xPosition = obj.scrollLeft; and SCENE_GRAVITY = 1;.
Cache array lengths in loops and use break or continue to reduce iteration overhead.
Pass a single options object to functions instead of many parameters, e.g., function greet(user) { alert(user.name); }.
Map this to a local variable ( self or _self) when entering callbacks to preserve context.
Prefix Boolean variables with is, has, or can for readability, e.g., isEditing = true;.
Minimize reflows and repaints by building HTML strings off‑DOM and inserting them once, rather than updating innerHTML inside a loop.
Generate unique IDs without relying on timestamps; use GUID/UUID functions, e.g.,
function S4(){return (((1+Math.random())*0x10000)|0).toString(16).substring(1);} function guid(){return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());}.
Detect features rather than browsers, for example using Modernizr: if (Modernizr.canvas) { … }.
Write readable timeouts using expressions like 30 * 1000 instead of raw millisecond literals.
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.
Architecture Digest
Focusing on Java backend development, covering application architecture from top-tier internet companies (high availability, high performance, high stability), big data, machine learning, Java architecture, and other popular fields.
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.