{"id":17382,"date":"2024-04-12T13:55:47","date_gmt":"2024-04-12T13:55:47","guid":{"rendered":"https:\/\/www.oflox.com\/blog\/?p=17382"},"modified":"2024-04-12T13:55:47","modified_gmt":"2024-04-12T13:55:47","slug":"how-to-add-javascript-in-html","status":"publish","type":"post","link":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/","title":{"rendered":"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!"},"content":{"rendered":"\n<p>\u200dIn this article, I am going to tell you <strong>How to Add JavaScript in HTML<\/strong>. So if you want to know about it, then keep reading this article. Because I am going to give you complete information about it, so let\u2019s start.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg\" alt=\"How to Add JavaScript in HTML\" class=\"wp-image-17388\" srcset=\"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg 1280w, https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML-768x432.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Today\u2019s article focuses on the same, i.e., \u201cHow to Add JavaScript in HTML\u201d The articles entail each bit of information necessary for you to know.<\/p>\n\n\n\n<p>Let\u2019s get started!\u2728<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a053a8e78f1d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a053a8e78f1d\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#What_is_HTML\" >What is HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#What_is_JavaScript\" >What is JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#How_to_Add_JavaScript_in_HTML\" >How to Add JavaScript in HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#1_Inline_JavaScript\" >1. Inline JavaScript:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#2_External_JavaScript_file\" >2. External JavaScript file:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_HTML\"><\/span>What is HTML?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>HTML stands for &#8220;HyperText Markup Language.&#8221; It is the standard markup language used to create and structure the content of websites and web applications. HTML provides a set of elements and tags that define the structure and layout of a web page, such as headings, paragraphs, images, links, tables, forms, and more. <\/p>\n\n\n\n<p>When you visit a website, your web browser interprets the HTML code sent by the server and renders it into the visual web page you see. HTML is the backbone of web pages, providing the basic structure and content, while other technologies like CSS (Cascading Style Sheets) and JavaScript are used to add style and interactivity, respectively.<\/p>\n\n\n\n<p><strong>Key features of HTML include:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Elements and Tags<\/strong>: HTML documents consist of a series of elements enclosed within tags. Elements are the building blocks of a web page, and they represent different types of content. For example, the <code><strong>&lt;h1&gt;<\/strong><\/code> tag represents the main heading, the <code><strong>&lt;p&gt;<\/strong><\/code> tag represents a paragraph, the <code><strong>&lt;img&gt;<\/strong><\/code> tag embeds an image, and so on.<\/li>\n\n\n\n<li><strong>Nesting<\/strong>: HTML elements can be nested inside each other to create hierarchical structures. This nesting defines the relationships between various elements on the page.<\/li>\n\n\n\n<li><strong>Attributes<\/strong>: HTML elements can have attributes, which provide additional information about the element or modify its behavior. Attributes are placed within the opening tag and may have values assigned to them. For instance, the <code><strong>&lt;a&gt;<\/strong><\/code> (anchor) element uses the <strong><code>href<\/code> <\/strong>attribute to define the URL of the link.<\/li>\n\n\n\n<li><strong>Semantics<\/strong>: HTML also includes semantic elements that carry meaning about the content they enclose. For instance, <code><strong>&lt;header&gt;<\/strong><\/code>, <code><strong>&lt;nav&gt;<\/strong><\/code>, <code><strong>&lt;main&gt;<\/strong><\/code>, <code><strong>&lt;article&gt;<\/strong><\/code>, <code><strong>&lt;footer&gt;<\/strong><\/code>, and more are semantic elements that help search engines and other tools better understand the structure and purpose of a web page.<\/li>\n\n\n\n<li><strong>Forms<\/strong>: HTML supports form elements like <code><strong>&lt;form&gt;<\/strong><\/code>, <code><strong>&lt;input&gt;<\/strong><\/code>, <code><strong>&lt;select&gt;<\/strong><\/code>, and <code><strong>&lt;textarea&gt;<\/strong><\/code>, allowing users to interact with the web page by submitting data.<\/li>\n\n\n\n<li><strong>Compatibility<\/strong>: HTML is supported by all modern web browsers, making it a universal language for building web pages that work across different platforms and devices.<\/li>\n<\/ul>\n\n\n\n<p>As HTML provides the content structure, CSS is used to control the presentation (layout, colors, fonts, etc.), and JavaScript handles the interactivity (user interactions, dynamic content, etc.). Together, these three technologies form the foundation of modern web development, enabling developers to create visually appealing, responsive, and interactive websites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_JavaScript\"><\/span>What is JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript is a high-level, interpreted programming language primarily used for creating dynamic and interactive web content. It is one of the core technologies of the World Wide Web and is widely used in web development alongside HTML and CSS.<\/p>\n\n\n\n<p>Originally developed by Brendan Eich at Netscape in 1995, JavaScript was initially named &#8220;LiveScript,&#8221; but it was later renamed to &#8220;JavaScript&#8221; to capitalize on the popularity of Java at the time. Despite its name, JavaScript is a separate language from Java, and they have different syntax and use cases.<\/p>\n\n\n\n<p><strong>Key features of JavaScript include:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Client-side scripting<\/strong>: JavaScript runs on the client side, meaning it is executed directly within a user&#8217;s web browser. This allows developers to create dynamic web pages that can respond to user actions without the need to communicate with the server for every interaction.<\/li>\n\n\n\n<li><strong>Event-driven programming<\/strong>: JavaScript is event-driven, allowing developers to attach code (event handlers) to specific events, such as mouse clicks, keyboard input, or page loading. When an event occurs, the associated code is executed, enabling interactivity and responsiveness in web applications.<\/li>\n\n\n\n<li><strong>Cross-platform compatibility<\/strong>: JavaScript can run on various operating systems and web browsers, making it a versatile choice for web development.<\/li>\n\n\n\n<li>Lightweight: JavaScript files are relatively small and can be embedded directly within web pages, which helps reduce loading times and minimizes the need for separate resource files.<\/li>\n\n\n\n<li><strong>Object-oriented programming (OOP)<\/strong>: JavaScript supports OOP concepts like objects, classes, and inheritance, allowing developers to create reusable and organized code structures.<\/li>\n\n\n\n<li><strong>Libraries and frameworks<\/strong>: JavaScript has an extensive ecosystem of libraries and frameworks that simplify common tasks and enhance its capabilities. Some popular libraries and frameworks include React, Angular, Vue.js, jQuery, and more.<\/li>\n<\/ul>\n\n\n\n<p>Today, JavaScript is not limited to web development alone; it is also used in server-side development (Node.js), mobile app development (using frameworks like React Native and Ionic), desktop application development (using Electron), and even in Internet of Things (IoT) projects. Its versatility and wide adoption have solidified JavaScript as one of the essential languages for modern software development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_JavaScript_in_HTML\"><\/span>How to Add JavaScript in HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To add JavaScript code to an HTML document, you have several options. The most common methods are:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Inline_JavaScript\"><\/span>1. <strong>Inline JavaScript:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can include JavaScript directly within an HTML file using the <code><strong>&lt;script&gt;<\/strong><\/code> tag. Place the <strong><code>&lt;script&gt;<\/code> <\/strong>tag either inside the <strong><code>&lt;head&gt;<\/code> <\/strong>section or at the end of the <strong><code>&lt;body&gt;<\/code> <\/strong>section to ensure that the HTML content is fully loaded before the JavaScript is executed.<\/p>\n\n\n\n<p>Example of inline JavaScript in the <code><strong>&lt;head&gt;<\/strong><\/code> section:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;My Web Page&lt;\/title&gt;\n    &lt;script&gt;\n        \/\/ Your JavaScript code goes here\n        alert('Hello, this is inline JavaScript!');\n    &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;!-- Your HTML content goes here --&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n\n\n\n<p>Example of inline JavaScript at the end of the <code><strong>&lt;body&gt;<\/strong><\/code> section (recommended for better performance):<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;My Web Page&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;!-- Your HTML content goes here --&gt;\n\n    &lt;script&gt;\n        \/\/ Your JavaScript code goes here\n        alert('Hello, this is inline JavaScript!');\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_External_JavaScript_file\"><\/span>2. <strong>External JavaScript file:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Another common approach is to create a separate <code>.<strong>js<\/strong><\/code> file containing your JavaScript code and include it in your HTML file using the <code><strong>&lt;script&gt;<\/strong><\/code> tag&#8217;s <code><strong>src<\/strong><\/code> attribute. This method keeps your HTML file clean and allows you to reuse the same JavaScript code across multiple pages.<\/p>\n\n\n\n<p>Assuming you have a file named <code><strong>script.js<\/strong><\/code> containing your JavaScript code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ script.js\nalert('Hello, this is external JavaScript!');\n<\/pre>\n\n\n\n<p>Your HTML file would look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;My Web Page&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;!-- Your HTML content goes here --&gt;\n\n    &lt;script src=\"path\/to\/your\/script.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Remember to replace <code>\"<strong>path\/to\/your\/script.js<\/strong>\"<\/code> with the actual path to your JavaScript file.<\/p>\n\n\n\n<p>Using external JavaScript files is generally preferred for larger projects, as it helps maintain a cleaner and more organized codebase.<\/p>\n\n\n\n<p>Whichever method you choose, make sure your JavaScript code is syntactically correct and follows best practices to ensure a smooth and error-free execution.<\/p>\n\n\n\n<p><strong>Read also:)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.oflox.com\/blog\/what-is-div-in-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is Div in HTML: A-to-Z Guide for Beginners!<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.oflox.com\/blog\/how-to-use-cdn-in-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use CDN in HTML: A-to-Z Guide for Beginners!<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.oflox.com\/blog\/html-hyperlink-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\">(No 1) Online HTML Hyperlink Generator In Bulk For Free!<\/a><\/li>\n<\/ul>\n\n\n\n<p><em>So hope you liked this article on <strong>How to Add JavaScript in HTML<\/strong>. And if you still have any questions or suggestions related to this, then you can tell us in the comment box below. Thank you so much for reading this article.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u200dIn this article, I am going to tell you How to Add JavaScript in HTML. So if you want to &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!\" class=\"read-more button\" href=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#more-17382\" aria-label=\"More on How to Add JavaScript in HTML: A-to-Z Guide for Beginners!\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":17388,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2345],"tags":[30443,30445,30458,30460,30449,30447,30448,30453,40,30455,30452,30444,30450,30459,30456,30457,30454,26901,30446,30451],"class_list":["post-17382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","tag-add-javascript","tag-add-javascript-in-html","tag-css","tag-css-javascript-code-example","tag-external-javascript-in-html","tag-how-to-add-javascript-in-html","tag-how-to-link-external-js-file-in-html","tag-how-to-link-javascript-to-html-and-css","tag-html","tag-html-javatpoint","tag-html-script-tag","tag-javascript-in-html","tag-javascript-in-html-example","tag-javascript-pdf","tag-javascript-to-html-converter","tag-javascript-w3schools","tag-link-javascript-to-html","tag-what-is-html","tag-what-is-javascript","tag-where-to-put-script-tag-in-html","resize-featured-image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add JavaScript in HTML: A-to-Z Guide for Beginners!<\/title>\n<meta name=\"description\" content=\"\u200dIn this article, I am going to tell you How to Add JavaScript in HTML. So if you want to know about it, then keep reading this article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!\" \/>\n<meta property=\"og:description\" content=\"\u200dIn this article, I am going to tell you How to Add JavaScript in HTML. So if you want to know about it, then keep reading this article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Oflox\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ofloxindia\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/ofloxindia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-12T13:55:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Editorial Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@oflox3\" \/>\n<meta name=\"twitter:site\" content=\"@oflox3\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Editorial Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/\"},\"author\":{\"name\":\"Editorial Team\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/person\\\/967235da2149ca663a607d1c0acd4f81\"},\"headline\":\"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!\",\"datePublished\":\"2024-04-12T13:55:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/\"},\"wordCount\":1067,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/How-to-Add-JavaScript-in-HTML.jpg\",\"keywords\":[\"Add JavaScript\",\"Add JavaScript in HTML\",\"css\",\"css javascript code example\",\"external javascript in html\",\"How to Add JavaScript in HTML\",\"how to link external js file in html\",\"how to link javascript to html and css\",\"html\",\"html javatpoint\",\"html script tag\",\"JavaScript in HTML\",\"javascript in html example\",\"javascript pdf\",\"javascript to html converter\",\"javascript w3schools\",\"link javascript to html\",\"What is HTML\",\"What is JavaScript\",\"where to put script tag in html\"],\"articleSection\":[\"Internet\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/\",\"name\":\"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/How-to-Add-JavaScript-in-HTML.jpg\",\"datePublished\":\"2024-04-12T13:55:47+00:00\",\"description\":\"\u200dIn this article, I am going to tell you How to Add JavaScript in HTML. So if you want to know about it, then keep reading this article.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/How-to-Add-JavaScript-in-HTML.jpg\",\"contentUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/How-to-Add-JavaScript-in-HTML.jpg\",\"width\":1280,\"height\":720,\"caption\":\"How to Add JavaScript in HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/how-to-add-javascript-in-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/\",\"name\":\"Oflox\",\"description\":\"India&rsquo;s #1 Trusted Digital Marketing Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#organization\",\"name\":\"Oflox\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg\",\"contentUrl\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg\",\"width\":355,\"height\":355,\"caption\":\"Oflox\"},\"image\":{\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ofloxindia\",\"https:\\\/\\\/x.com\\\/oflox3\",\"https:\\\/\\\/www.instagram.com\\\/ofloxindia\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.oflox.com\\\/blog\\\/#\\\/schema\\\/person\\\/967235da2149ca663a607d1c0acd4f81\",\"name\":\"Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g\",\"caption\":\"Editorial Team\"},\"sameAs\":[\"https:\\\/\\\/www.oflox.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/ofloxindia\\\/\",\"https:\\\/\\\/www.instagram.com\\\/ofloxindia\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ofloxindia\\\/\",\"https:\\\/\\\/x.com\\\/oflox3\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!","description":"\u200dIn this article, I am going to tell you How to Add JavaScript in HTML. So if you want to know about it, then keep reading this article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!","og_description":"\u200dIn this article, I am going to tell you How to Add JavaScript in HTML. So if you want to know about it, then keep reading this article.","og_url":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/","og_site_name":"Oflox","article_publisher":"https:\/\/www.facebook.com\/ofloxindia","article_author":"https:\/\/www.facebook.com\/ofloxindia\/","article_published_time":"2024-04-12T13:55:47+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg","type":"image\/jpeg"}],"author":"Editorial Team","twitter_card":"summary_large_image","twitter_creator":"@oflox3","twitter_site":"@oflox3","twitter_misc":{"Written by":"Editorial Team","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#article","isPartOf":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/"},"author":{"name":"Editorial Team","@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/person\/967235da2149ca663a607d1c0acd4f81"},"headline":"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!","datePublished":"2024-04-12T13:55:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/"},"wordCount":1067,"commentCount":0,"publisher":{"@id":"https:\/\/www.oflox.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg","keywords":["Add JavaScript","Add JavaScript in HTML","css","css javascript code example","external javascript in html","How to Add JavaScript in HTML","how to link external js file in html","how to link javascript to html and css","html","html javatpoint","html script tag","JavaScript in HTML","javascript in html example","javascript pdf","javascript to html converter","javascript w3schools","link javascript to html","What is HTML","What is JavaScript","where to put script tag in html"],"articleSection":["Internet"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/","url":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/","name":"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!","isPartOf":{"@id":"https:\/\/www.oflox.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#primaryimage"},"image":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg","datePublished":"2024-04-12T13:55:47+00:00","description":"\u200dIn this article, I am going to tell you How to Add JavaScript in HTML. So if you want to know about it, then keep reading this article.","breadcrumb":{"@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#primaryimage","url":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg","contentUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2023\/07\/How-to-Add-JavaScript-in-HTML.jpg","width":1280,"height":720,"caption":"How to Add JavaScript in HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.oflox.com\/blog\/how-to-add-javascript-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.oflox.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add JavaScript in HTML: A-to-Z Guide for Beginners!"}]},{"@type":"WebSite","@id":"https:\/\/www.oflox.com\/blog\/#website","url":"https:\/\/www.oflox.com\/blog\/","name":"Oflox","description":"India&rsquo;s #1 Trusted Digital Marketing Company","publisher":{"@id":"https:\/\/www.oflox.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.oflox.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/www.oflox.com\/blog\/#organization","name":"Oflox","url":"https:\/\/www.oflox.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2020\/05\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg","contentUrl":"https:\/\/www.oflox.com\/blog\/wp-content\/uploads\/2020\/05\/Ab2vH5fv3tj5gKpW_G3bKT_Ozlxpt4IkokKOWQoC7X_fvRHLGT_gR-qhQzXVxHhnl9u3yGY1rfxR7jvSz6DA6gw355-h355.jpg","width":355,"height":355,"caption":"Oflox"},"image":{"@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ofloxindia","https:\/\/x.com\/oflox3","https:\/\/www.instagram.com\/ofloxindia"]},{"@type":"Person","@id":"https:\/\/www.oflox.com\/blog\/#\/schema\/person\/967235da2149ca663a607d1c0acd4f81","name":"Editorial Team","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/secure.gravatar.com\/avatar\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff86524713a69d2c211ad6cbec38fb15eb59030ba5e59ddad406dfb7eb4e5b0c?s=96&d=mm&r=g","caption":"Editorial Team"},"sameAs":["https:\/\/www.oflox.com\/","https:\/\/www.facebook.com\/ofloxindia\/","https:\/\/www.instagram.com\/ofloxindia\/","https:\/\/www.linkedin.com\/company\/ofloxindia\/","https:\/\/x.com\/oflox3"]}]}},"_links":{"self":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/posts\/17382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/comments?post=17382"}],"version-history":[{"count":0,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/posts\/17382\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/media\/17388"}],"wp:attachment":[{"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/media?parent=17382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/categories?post=17382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oflox.com\/blog\/wp-json\/wp\/v2\/tags?post=17382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}