Script Tag Inside of Head Element
I ran into an interesting problem today. Actually, it was more annoying that interesting. I have been working with JQuery and needed to link to the JQuery validation js file. Easy enough right?
So my page declaration looked like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Drake Equation Calculator</title>
<link href="styles/Drake.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript" />
</head>
When I browsed to the page it was completely empty. I thought I had typed something wrong and looked again. Everything appeared okay. So I checked the page, still nothing. I then launched it in debug mode and still nothing.
So now I'm scratching my head. A view source on the page revealed that the content was actually there so why wasn't it rendered?
Can you see the problem?
I closed my script tag as if it were an empty HTML tag. <script> is not an empty tag
According to the W3C spec:
Start tag: required, End tag: required
So, since I used: <script src="jquery.js" type="text/javascript" /> The browser interpreted the entire page as script and nothing got rendered.
The correct declaration is:
<script src="jquery.js" type="text/javascript" ></script>
The full description from the W3C site:
The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI. Note that the charset attribute refers to the character encoding of the script designated by the src attribute; it does not concern the content of the SCRIPT element.
Once I fixed the script tag everything worked as I expected. Not as I wanted, but that is whole different problem...