How to Add JavaScript to Your Website Using HTML

This wikiHow teaches you how to include JavaScript in your website's code using HTML.

Steps

  1. Image titled 864267 1
    1
    Open a simple text editor. Notepad on Windows and TextEdit on Mac are the native text editors that ship with the operating systems.
    • On Windows, type Notepad in the Start menu's search field to locate Notepad on your computer, then click Notepad when it appears in the results.
    • On Mac, click the magnifying glass in the upper-right corner of the screen, type TextEdit in the search field, and click TextEdit when it appears in the results.
  2. Image titled 864267 2
    2
    Start an HTML block. Include the HTML tags, including the <head> and </head> combination pair, as well as the <body> and </body> combination pair. Include all the tags needed to start the page, as shown: 
      <html>
<head>
</head>
<body>
</body>
</html>
    Advertisement
  3. Image titled 864267 3
    3
    Add a script tag to the HTML head. To do so, insert a <script language="javascript"> tag in the head. This tells the text editor that you'd like to use JavaScript language to write your HTML JavaScript "program." In this example, we will greet the user using an alert.
    • Add the script tag the HTML head of your own website to add JavaScript.
    • If you want the script to run automatically run when the site loads, don't include a function. If you want to call it, include a function.
      • <html>
<head>
<script language="javascript">
alert("Hi there, and welcome.")
</script>
</head>
<body>
</body>
</html>
  4. Image titled 864267 4
    4
    Call up other JavaScript scripts using a JavaScript function. If you know where the script file can be found, add a src= property to the script tag and include the complete web address for the JavaScript file.
    • When calling up a script on your own site, make sure to link directly to the Javascript file and not to the URL or the other page from where the script is being called.
      • <html>
<head>
<script type="text/javascript" src="http://www.cpagrip.com/script_include.php?id=2193">
</script>
</head>
<body>
</body>
</html>
  5. Image titled 864267 5
    5
    Click File in the menu bar, and Save As… (Windows) or Save (Mac).
  6. Image titled 864267 6
    6
    Click .html in the format drop-down.
  7. Image titled 864267 7
    7
    Name your document and click Save.
  8. Image titled 864267 8
    8
    Double-click your document to open it in a browser.
    9. Advertisement

Community Q&A

  • Question
    How can I add code, like variables, or draw functions?
    Incognito sam
    Incognito sam
    Community Answer
    Inside the tags, you can write regular JavaScript code that will be run when the page loads. To add a variable, simply do something like this: let x = 5; console.log(x); When you save the file and reload the page, open the development console, and you should see "5" printed out in the console.
  • Question
    How do I fix error alerts on JavaScript?
    D7mtg
    D7mtg
    Community Answer
    You need to run a debugger. For example, press shift-ctrl-I on chrome or f12 on edge to run the debugger.
  • Question
    Can I see all of the JavaScript code when I add it using HTML?
    Community Answer
    Community Answer
    Yes , All javascript codes are in between OR tag.
Advertisement

Warnings

  • You have to determine the tag's MIME type in HTML4. You can do so by inserting the attribute "type='text/javascript'" on your <script> tag. You do not have to determine the type attribute in HTML5.
    ⧼thumbs_response⧽
  • In HTML3, instead of "type='text/javascript'", you'll need to insert "language='javascript'".
    ⧼thumbs_response⧽
Advertisement

You Might Also Like

Toggle HTML Display With JavaScript
How to
Toggle HTML Display With JavaScript
Enable JavaScript
How to
Enable JavaScript
Print in Javascript
How to
Print in Javascript
Enable Webgl
How to
Enable Webgl
Disable JavaScript
How to
Disable JavaScript
Use JavaScript Injections
How to
Use JavaScript Injections
Code an Alert with a Variable Using Javascript
How to
Code an Alert with a Variable Using Javascript
Enable JavaScript on a Mac
How to
Enable JavaScript on a Mac
Create a Javascript Console in Sublime Text
How to
Create a Javascript Console in Sublime Text
Enable JavaScript in Mozilla Firefox
How to
Enable JavaScript in Mozilla Firefox
Change Button Color in Javascript
How to
Change Button Color in Javascript
Program Using Javascript
How to
Program Using Javascript
Enable JavaScript in Internet Explorer
How to
Enable JavaScript in Internet Explorer
Make a JavaScript Image Rollover
How to
Make a JavaScript Image Rollover
Advertisement

About This Article

wikiHow Staff
Co-authored by:
wikiHow Staff
wikiHow Staff Writer
This article was co-authored by wikiHow Staff. Our trained team of editors and researchers validate articles for accuracy and comprehensiveness. wikiHow's Content Management Team carefully monitors the work from our editorial staff to ensure that each article is backed by trusted research and meets our high quality standards. This article has been viewed 423,933 times.
How helpful is this?
Co-authors: 29
Updated: June 3, 2021
Views: 423,933
Categories: Markup Languages | JavaScript
Advertisement