How to Include jQuery in HTML Using a CDN

Including jQuery in an HTML document via a Content Delivery Network (CDN) allows you to quickly load the popular JavaScript library without downloading or hosting the files locally. This guide outlines how to reference jQuery using standard CDN providers—including the official jQuery CDN and Google Hosted Libraries—explains the recommended placement of the script tag, and shows how to verify that the library is working properly.

Step 1: Choose a CDN Provider

To add jQuery, you use a standard HTML <script> tag with the src attribute pointing to a hosted jQuery file. Common, reliable providers include:

Official jQuery CDN:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Google Hosted Libraries:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

cdnjs (Cloudflare):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Step 2: Add the Script Tag to Your HTML Document

Paste your chosen <script> tag into your HTML file. For the best page loading performance and to ensure the DOM is ready before any custom scripts execute, place the CDN link directly before the closing </body> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery CDN Example</title>
</head>
<body>

    <h1>Hello, World!</h1>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- Your Custom Scripts Go Below the jQuery CDN -->
    <script>
        // Custom jQuery code
    </script>
</body>
</html>

If your project requires jQuery to load before rendering page elements, you can place the tag inside the <head> section instead, though this may slightly increase initial page load times.

Step 3: Verify the Installation

To confirm jQuery has loaded successfully, add an inline script below the CDN link to check the version:

<script>
    if (window.jQuery) {
        console.log("jQuery loaded successfully! Version:", jQuery.fn.jquery);
    } else {
        console.log("jQuery failed to load.");
    }
</script>

Open your HTML file in a web browser, open the developer console (F12 or right-click and select "Inspect" > "Console"), and ensure the success message and version number are displayed.