jQuery Basic HTML Structure

Start a jQuery page by writing normal HTML, loading the jQuery library, and then placing your jQuery code after the library has loaded. The templates below are ready to copy and adapt.

jQuery Starter Template Top ↑

This template loads the minified jQuery 4.0.0 production file from the official jQuery CDN and uses the short DOM-ready form.

Why the script order matters

The jQuery library must load before code that calls $(). If your own script runs first, the browser does not yet know what $ refers to.

jQuery UI Starter Template Top ↑

jQuery UI builds on jQuery, so load jQuery first, then the jQuery UI JavaScript. The UI stylesheet belongs in the document head.

CDN or Local Copy? Top ↑

A CDN is convenient for learning and quick examples. A local copy gives you direct control over the file version and availability. In either case, keep the version explicit so an unexpected upgrade does not change your page without review.

DOM Ready Syntax Top ↑

These two forms are equivalent. The shorter version is convenient for most examples:

$(function () {
    // jQuery code
});

$(document).ready(function () {
    // jQuery code
});

← jQuery tutorial home · Next: functions used with jQuery →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: