How To Add jQuery To HTML?
HTML, CSS, and JavaScript are the three fundamental languages for designing any website. We structure our websites with HTML code, style them with CSS, and add various functionalities with the help of JavaScript.
jQuery is a widely used JavaScript library. With the help of an easy-to-use API that works across a multitude of browsers, jQuery makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler and easier. It simplifies client-side scripting of HTML.
Where To Put jQuery In HTML?
jQuery lets you perform actions in less code as compared to JavaScript. It is quite popular among the developers because of its simplicity, compatibility, flexibility, amazing effects, and ease in adding code to the HTML file. jQuery is embedded into the <script> tag of HTML file between the <head> tag and the <title> tag.
How To Include jQuery In HTML?
Including jQuery to HTML is one of the easiest tasks. It is very simple to include jQuery into the HTML page within just a few lines of code and hence it is widely used by web developers.
There are two methods to include jQuery to your HTML.
- You can download and include the jQuery file
- You can include the jQuery by CDN.
- Download and include jQuery file
In this method, you have to download the jQuery js file and include it using a simple <script > tag within your HTML code. It is very easy for any user to add jQuery to Html within just a few steps. If you want to include the jQuery to your HTML page by downloading the jQuery file, simply follow the steps given below.Â
Step
1: You have to download the jquery js file from the official site of jQuery.
Step 2:Â After downloading the file you have to open the Html file in which you want to add your jQuery. In your HTML code have to use the <script> tag, which specifies the src attribute for adding the jQuery file between the head tag just and the title tag as shown below:
<script type="text/javascript" src="jquery-3.5.1.min.js"> </script>
Step 3:Â And finally save your HTML file and you can see that the jQuery file is successfully added into our Html page.
Let's understand with an example:
<!Doctype Html>
<Html>
<Head>
<script type="text/javascript" src="jquery-3.5.1.min.js">
</script>
<Title>
Add the jQuery file into Html
</Title>
</Head>
<Body>
<h1>
Adding the jQuery file into your HTML Page by Downloading and Including
file <br>
</h1>
</Body>
</Html>Here's what the output will be:
2. Including the jQuery by CDN.
Another method to include your jQuery to Html is including the jQuery by CDN(Content Delivery Network). It is very easy to implement by using CDN using the following steps.
Step 1: Open the HTML file in which you want to add your jQuery with the help of CDN.
Step 2: Add <script> tag between the head tag and the title tag which will specify the src attribute for adding your jQuery.
<script type="text/javascript" src=> </script>
Step 3: After that, you have to add the following path in the src attribute of the script tag.
http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
Step 4: Save your HTML file and your jQuery is successfully added.
Let's see how this is done:
<!Doctype Html>
<Html>
<Head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<Title>
Including the jQuery by CDN
</Title>
</Head>
<Body>
<h1>
Adding the jQuery File into HTML by Including CDN
</h1>
</Body>
</Html> 
Conclusion
In this tutorial, we learned how to add jQuery to HTML. We saw two different ways of doing it. The first one is by adding a jQuery file and the second is by CDN. Javascript and HTML are two integral parts of modern web development. Since jQuery is just a Javascript library it becomes important for any web developer to learn how to add jQuery to HTML.
To keep learning such interesting topics, subscribe to our blog!
To know more about what is jQuery used for, visit our previous article!
