We Keep Coding

What is the best way to declare script tag in HTML5?

I have seen many different ways in declaring script tag. Some of them are:
Variation 1:
<script type="text/javascript">
//some javascript here
</script>
Variation 2:
<script type="text/javascript">
//<![CDATA[
// some javascript here
//]]>
</script>
Variation 3:
<script language="javascript">
//some javascript here
</script>
Variation 4:
<script>
//some javascript here
</script>
There are also other variations as well. When we work in HTML5 + js then which way is more appropriate in declaring Script tag?

In HTML5 you don't need an additional attribute like "type". Just declare JavaScript code with <script></script>.

The default language for script tags is Javascript, so there is no need to declare it explicitly.
<script>
//some javascript here
</script>
Is the least verbose and most appropriate way to declare a Javascript block. The others are valid, but just redundant.
From MDN:
type: If this attribute is absent, the script is treated as JavaScript
language: Like the type attribute, this attribute identifies the
scripting language in use. Unlike the type attribute, however, this
attribute’s possible values were never standardized. The type
attribute should be used instead.
Variation 3 should not be used as the language attribute was never standardized and is marked on MDN as deprecated.
As Jack points out, the use of <![CDATA[]]> is also redundant as it is only used to make sure a document can be parsed as XML.

JavaScript is the default scripting language for HTML5, so you can just use script tag without any type attribute.
However, with HTML5, you get some additional features like, async.

Version 2 : format
It skip looking into javascript implementation for W3C validator.
Also it allow to identified by the browser that the JavaScript or text written inside the tag
See this link for More detail:
Javascript and XHTML

Why does script-type have "text/" prepended to it?

Why does script-type have "text/" prepended to it?
For example:
<script type="text/javascript" />
<link type="text/css"/>
<script id="entry-template" type="text/x-handlebars-template">
Probably the standard javascript/vbscript/css are defined as
<MIME-media-type>/<MIME-sub-type>
What about Handlebars - why does it follow the same format? (and same with few other libs)
And if I wish to add a custom type for my open-source-lib (e.g: nirman)... should it be written as:
<script type="nirman" />
/// OR
<script type="text/nirman" />
?
Thanks

Why does script-type have "text/" prepended to it?
It doesn't … text/javascript was obsoleted in favour of application/javascript.
What about Handlebars - why does it follow the same format?
… but your question seems to be more about why MIME types come in two parts. That is defined by the MIME specification to divide the MIME type into a general category (from a small selection on infrequently updated choices) and a specific type.
And if I wish to add a custom type for my open-source-lib (e.g: nirman)... should it be written as
Neither.
Firstly, if you are writing a scripting language, then you should use application, not text:
text -- textual information … subtypes are to be used for enriched text in forms where application software may enhance the appearance of the text, but such software must not be required in order to get the general idea of the content
application -- some other kind of data, … information to be processed by an application.
Secondly, since you are making this up and don't have a public standard for it, the subtype should be prefixed with X
A media type value beginning with the characters "X-" is a private
value, to be used by consenting systems by mutual agreement. Any
format without a rigorous and public definition must be named with an
"X-" prefix,
So you should use: application/x-nirman

Media type (MIME type) names generally consist of a major media type and a subtype, separated by a slash “/”. This is specified in RFC 2406.
The major type chosen for JavaScript is text, because JavaScript code is text. It can be directly read by human beings – who need to understand JavaScript of course, that’s why it is not plain text (text/plain). Later, various other media types have been proposed for JavaScript, for rather theoretical reasons, but text/javascript is what all browsers recognize.
Handlebars seems to use text/x-handlebars-template.
If you want to use, within a script element, code that is not JavaScript code but will be processed by JavaScript code that interprets it as data of some kind (possibly as program code in some language), then the safest bet is to use text/plain. Not because of logic, but because of a statement in HTML5 CR about scripting languages. It lists a few media type names that “must not be interpreted as scripting language”, and among the alternatives, text/plain is probably the least illogical.
The point here is to prevent browsers from executing the script element content as JavaScript (or as VBScript), so you need to specify a type attribute, with a value that will make the browser refrain from doing what browsers normally do with script elements. The browser will then just store the content in the DOM, for your JavaScript code to deal with.
Yes, this is illogical if your code is, in some sense, program code, and you are doing your best to tell browsers that it isn’t. But it’s not program code natively interpreted by the browser.
Using text/x-nirman or application/x-nirman would most probably work too. Or anything that does not look suspiciously like referring to JavaScript or VBScript.

Various script type attributes and vanilla js, what makes difference in user agents

I usually write script tag without type attribute. However I saw around several different types of script. So I have tested with different types and all looked the same to me except I put wrong type intentionally.
<script>alert(1)</script>
<script type="text/javascript">alert(2);</script>
<script type="text/ecmascript">alert(3);</script>
<script type="application/ecmascript">alert(4);</script>
<script type="application/javascript">alert(5);</script>
<script type="foo/javascript">alert(6);</script>
<script type="text/html">alert(7);</script>
<script type="application/x-javascript">alert(8);</script>
Questions:
If script given without type attribute, as I assume, does it uses browser default type?
It looks like text/* is used for browsers and application/* is used for mobile applications. Am I right about it?
In script type attribute, what makes difference between javascript and ecmascript?
I asked question about between vanilla js and pure js, but the question has been removed. So my guess is they are the same(too obvious maybe). Are the really same?, then why use different names(Javascript, Vanilla Javascript)? By using vanilla script as an external resource, can we do browser independent javascripting?

1. If script given without type attribute, as I assume, does it uses browser default type?
Yes. All browsers always assumed it to be the case and it has now been normalized in HTML5. According to the w3.org the type attribute defaults to "text/javascript".
Relevant extract from the spec :
The type attribute gives the language of the script or format of the
data. If the attribute is present, its value must be a valid MIME
type. The charset parameter must not be specified. The default, which
is used if the attribute is absent, is "text/javascript".
So the best way to put your script, for all browsers, is this :
<script>alert(1);</script>
2. It looks like text/* is used for browsers and application/* is used for mobile applications. Am I right about it?
If the script element is included in an HTML document then the value of the type attribute should be omitted or "text/javascript", even in a mobile application. There were various cases in the past where other types were suggested but now the standard is "text/javascript".
3.In script type attribute, what makes difference between javascript and ecmascript?
There is no difference. As you might know ECMAScript is the name of the normalized standard upon which is based JavaScript. Not only is "text/javascript" the standard way of referring to javascript in the script element but your browser has only one JS engine. It can't choose to try and select another one depending of a flavor you might specify in the type attribute.
4. I asked question about between vanilla js and pure js, but the question has been removed. So my guess is they are the same(too obvious maybe). Are the really same?, then why use different names(Javascript, Vanilla Javascript)? By using vanilla script as an external resource, can we do browser independent javascripting?
"Vanilla something", in English, refers to the basic flavor of something. In computing it commonly refers to a language without additions or plugins. Here it means JavaScript without additional libraries (for example jQuery). This expression is often meant as a way to reassert many things are possible without libraries even while people often think the library is needed. The vanilla-js site humorously supports this argument and that's one more reason you may have often read the "vanilla js" expression. So, of course, "vanilla js" is just JavaScript, that is "pure js".
Note that "vanilla js" isn't especially "browser independent" as many js libraries have as primary goal to provide an uniform layer hiding differences between browsers (most often features available in all browsers except IE).

<script type="text/javascript">

Is there any difference between
<script type="text/javascript">
and
<script>
tags ?

The type attribute is no longer a required attribute in most browsers.
From MDC:
type
This attribute identifies the
scripting language of code embedded
within a script element or referenced
via the element’s src attribute. This
is specified as a MIME type; examples
of supported MIME types include
text/javascript, text/ecmascript,
application/javascript, and
application/ecmascript. If this
attribute is absent, the script is
treated as JavaScript.

There is no difference between those two tags. Prior to HTML5 you need to explicitly add 'text/javascript'. On HTML5 you can skip that part.

Most browsers will default type to text/javascript, but other values are allowed, see
http://www.w3schools.com/tags/tag_script.asp
Also, as for W3C specifications
As HTML does not rely on a specific scripting language, document authors must explicitly tell user agents the language of each script. This may be done either through a default declaration or a local declaration.

As per W3C standard its essential. As HTML does not rely on a specific scripting language, document authors must explicitly tell user agents the language of each script. This may be done either through a default declaration or a local declaration.

According to CSS-Tricks:
<script type="text/javascript">
//some javascript here
</script>
The type attribute is the standard and correct way to identify and
tell the browser what kind of script the tag contains. Sometimes
you'll see code that uses both the language and type attribute. As far
as I know that's never necessary.
Really specific explanation from the spec, language is an "obsolete
but conforming" feature.
but
<script>
//some javascript here
</script>
No attributes at all. This is the HTML5 way of handling script tags
that contain JavaScript. It's just assumed that the type is
text/javascript. If it's not (I've never even seen a different type of
script) you'll need to change it with the type attribute. I recommend
this is you are using HTML5.

Syntax to declare JS scripts

I'm not sure about what's the difference between opening a JS script with
<SCRIPT language='JavaScript'>
or with:
<SCRIPT type="text/JavaScript">
Should JavaScript always be quoted (either with " " or with ' ') or that's not really important?
Thank you for any clarification on this topic!

The language attribute was used in HTML 3.2. HTML 4.0 introduced type (which is consistent with other elements that refer to external media, such as <style>) and made it required. It also deprecated language.
Use type. Do not use language.
In HTML (and XHTML), there is no difference between attribute values delimited using single or double quotes (except that you can't use the character used to delimit the value inside the value without representing it with an entity).

Refer to supreme deity Douglas Crockford's Javascript Code Conventions for all things Javascript:
JavaScript Files
JavaScript programs should be stored
in and delivered as .js files.
JavaScript code should not be embedded
in HTML files unless the code is
specific to a single session. Code in
HTML adds significantly to pageweight
with no opportunity for mitigation by
caching and compression.
<script src=filename.js> tags should
be placed as late in the body as
possible. This reduces the effects of
delays imposed by script loading on
other page components. There is no
need to use the language or type
attributes. It is the server, not the
script tag, that determines the MIME
type.

Older browsers only support language - now the type method using a mimetype of text/javascript is the correct way.
<script language="javascript" type="text/javascript">
is used to support older browsers as well as using the correct way.
<style type="text/css">
is another example of including something (stylesheet) using the correct standard.

You don't need the type and language attribute when using to an external JavaScript file:
<script src="script.js" />
Your browser will automatically figure out what to do, based on the extension of the file. You need type="text/javascript" when doing script-blocks, though.
Edit:
Some might say that this is awful, but these are in fact the words of a Yahoo! JavaScript evangelist (I think it was Douglas Crockford) in the context of website load-performance.
Perhaps I should have elaborated a bit.
Google was a great example of breaking standards without breaking the rendering of their website. (They are now complying to W3C standards, using JavaScript to render their pages). Because of the heavy load on their websites, they decided to strip down their markup to the bare minimum, and use depreciated tags like the dreaded font and i tags.
It doesn't hurt to be pragmatic. Within reason, of course :)

According to the W3 HTML 4.01 reference, only type attribute is required. The langage attribute is not part of the reference, but I think it comes from earlier days, when Microsoft fought against Netscape.
Also, simple quotes are not valid in XHTML 1.0 (the parsing is more restrictive).
This may not be a problem but you should now that's always better to validate your html (either HTML 4.01 or XHTML 1.0).

Use both:
<script language="javascript" type="text/javascript">

You should always enclose attribute values in quotation marks ("). Don't use apostraphes (').
Edit: Made opinion sound like fact here, my bad. Single quotes are technically legal, but in my experience they tend to lead to more issues than double quotes (they tend to crop up in attribute values more often amongst other things) so I always recommend sticking to the latter. Your mileage may vary though!