How can I properly add CSS and JavaScript to an HTML document?

Question

This very well might be a very stupid question.

I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:

<html>
<head>
  <title>Testing</title>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
  <script src="application.js" />
</head>
<body>
  <h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>

However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.

What am I doing wrong here? Why doesn't this work, and how can I make it work?

Thank you very much,

Eden.

may be application.js doing something... otherwise code seems fine. — Ashwani
– Ashwani, Commented Aug 10, 2013 at 9:30
@EdenLandau your script tag should not close it self, it should be like </script> see my answer below. — Dhaval Bharadva
– Dhaval Bharadva, Commented Aug 10, 2013 at 9:35

Shaun · Accepted Answer · 2013-08-10 09:30:52Z

6

Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>

answered Aug 10, 2013 at 9:30

Shaun

1,22010 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MisterJ Over a year ago

Was thinking the same, it seems it depends on what version of html5 link But given the fact it's html5, I think it should do it.

Erik Funkenbusch Over a year ago

@MisterJ - No, script tags may be unclosed, but they cannot be self-closed under any circumstances.

KarelG · Accepted Answer · 2013-08-10 09:39:09Z

two things. script tags should have an end tag.

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>

Another thing, see if you are navigating to the right file. Assume that your directory tree is the next

directory
  |-yourHTMLpage.html
  |-jquery-2.0.3.js
  |-application.js
  \-theme.css

then the next will work

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">

But in most recent standards, we are using a folder for css and js files, like the next

directory
  |-yourHTMLpage.html
  |-js
     |-jquery-2.0.3.js
     \-application.js
  \-css
     \-theme.css

Then you have to adapt the link,

<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">

Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.

CCH · Accepted Answer · 2013-08-10 09:31:19Z

0

Are the css and js files in the same folder as your html ?

To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.

answered Aug 10, 2013 at 9:31

CCH

1,5771 gold badge13 silver badges24 bronze badges

2 Comments

MisterJ Over a year ago

If it doesn't find css and js, it will still display html.

Lēctia Landau Over a year ago

What @MisterJ said. And yeah, they are.

Lukas Kolletzki · Accepted Answer · 2013-08-10 09:32:37Z

0

Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly? You should embed the javascript files like this:

<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>

answered Aug 10, 2013 at 9:32

Lukas Kolletzki

2,2663 gold badges23 silver badges30 bronze badges

Comments

Dhaval Bharadva · Accepted Answer · 2013-08-10 09:33:54Z

0

Here is the simple method for include css and javascript file to your page.

<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>

answered Aug 10, 2013 at 9:33

Dhaval Bharadva

3,0852 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

How can I properly add CSS and JavaScript to an HTML document?

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related