[ The freeCodeCamp Forum ](/)

#  [ The type="module" in html file, what's for? ](/t/the-type-module-in-html-
file-whats-for/488865)

[ JavaScript  ](/c/javascript/421)

[ zak  ](https://forum.freecodecamp.org/u/zak) December 15, 2021, 10:10pm  1

i’d like to know how the type=“module” in html’s script tag is needed? How to
benefit from it? In case i encounter it.  
Use an example or provide a link if you can ?  
Thank you.  
[ https://www.freecodecamp.org/learn/javascript-algorithms-and-data-
structures/es6/create-a-module-script
](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-
structures/es6/create-a-module-script)

[ bbsmooth  ](https://forum.freecodecamp.org/u/bbsmooth) December 15, 2021,
10:32pm  2

You have to use ` <script type="module"> ` to include a JS module in your
page. Modules are treated differently than regular JS script files by the
browser and thus you need to tell the browser that the file you are including
is a module and not a regular JS script file. I’m not sure if this answers
your question. You’ll need to be more specific if it doesn’t.

1 Like

[ anon22924398  ](https://forum.freecodecamp.org/u/anon22924398) December 15,
2021, 11:04pm  3

Say someone (could be us) writes 2 scripts:

  * areas.js, with functions like ` const square = side=>side*side `
  * and ` perimeters.js ` (similar stuff)   
We now want to use those to calculate this weird number:

    
    
    const theSum=areas.square(size)+perimeters.square(size)
    

So first, we could do this **index.js** :

    
    
    const areas = require('./areas.js'); // Or "import areas from './areas.js'";
    const perimeters = require('./perimeters.js');  or "import areas from './areas.js'";
    

We can’t send that to the browser and expect to work. **require** ) won’t be
does not exist in the browser (only in NodeJS); **import** complicates the
scope of variables (I believe).

But we can import modules _from_ the browser, in the script tags. And in this
way you would not need to bundle/merge those files, I believe you do it this
way:

    
    
    <script type='module'>
    import areas from './areas.js';
    import perimeters from './perimeters.js';
    const theSum=areas.square(size)+perimeters.square(size)
    console.log(theSum)
    </script>
    

I believe more than how you achieve this, remember to write modularised code,
where each script does one type of thing (like calc of areas), and either
bundle/browserify the files or import them in the browser.

[ lasjorg  ](https://forum.freecodecamp.org/u/lasjorg) December 16, 2021,
4:33am  4

I would also suggest you check out the MDN docs on modules.

![](https://developer.mozilla.org/favicon-48x48.97046865.png) [
developer.mozilla.org ](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Modules)

![](https://developer.mozilla.org/mdn-social-share.0ca9dbda.png)

###  [ JavaScript modules - JavaScript | MDN ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

This guide gives you all you need to get started with JavaScript module
syntax.

1 Like

[ zak  ](https://forum.freecodecamp.org/u/zak) December 16, 2021, 8:04am  5

In the example given in the curriculum challenge they provided a src=
“filename.js” with the script tag like this :

    
    
    <script type="module" src="filename.js">
    

Is that src attribute i.e filename.js in this example represent the module we
gonna use in our script? Or import from? If not then why do we write it?  
Thank you.

[ anon22924398  ](https://forum.freecodecamp.org/u/anon22924398) December 16,
2021, 11:22am  6

That script tag imports everything that was exported in **filename.js** . Any
variable that was not exported in **filename.js** won’t be available.

[ zak  ](https://forum.freecodecamp.org/u/zak) December 16, 2021, 4:10pm  7

as you can see in the image below, i found a website that says the file that
should go in the src of the script tag is not the file we exporting from but
the file we are im