What's in your <head>? Part 4—<script>

My selfie

James Turner,

Tags: HTML

For once, the sun is shining here in the UK, the sky is blue, and people everywhere are smiling and walking hand-in-hand through the parks and avenues. All in all, it᾿s a good day to look at the <script> tags in The Great Discontent᾿s <head> section.

Skip to navigation

The <script> tags in the <head> section

So, the <script> element, like <title> but unlike <meta> and <link>, has an opening tag and a closing tag, and stuff either in the middle or in its attributes. Here are TGD᾿s <script> tags:

<script type="text/javascript" src="//use.typekit.net/kld3xsa.js"></script>

The first one points to Typekit᾿s Javascript file for loading custom fonts to the TGD website. Note that there᾿s nothing between the two tags, but an external JS file is referenced in the src attribute. I think when you use Typekit, they give you the link to the JS file on their server.

<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

The second one, I guess, is some kind of error-handling script for Typekit. I guess Typekit.load() is a JS function in the kld3xsa.js file referenced above.

<script src="/assets/js/modernizr.js"></script>

The final script tag loads the modernizr.js file, which you can find at the Modernizr website. According to the website, Modernizr is...

…a JavaScript library that detects HTML5 and CSS3 features in the user᾿s browser.

So, presumably, this enables TGD to appear ‘normal’ on older and crankier browsers.

Skip to navigation

<script> tags in the <body>

The <head> section isn᾿t the only place where <script> tags appear. There are several peppered throughout the HTML, some of them embedded and some of them external. The reason for this might be that external scripts in the <head> section need to load before the whole page will render on screen. If you add too many <script> tags in the head, the page could take a long time to load and turn off users with a short attention span (i.e. everyone).

So, that᾿s it for the <head>. The four most important tags, <meta>, <title>, <link> and <script> fulfil a number of functions: declaring the character set, dealing with different browsers and viewports, giving information to users and search engines, and linking to style sheets and script files. The <head> isn᾿t exactly the sexiest aspect of a HTML document, but like filing paperwork or raking leaves off the lawn, it᾿s an important fact of life that we all have to learn to love.

Next up: TGD᾿s responsive images. Whoop whoop!

Skip to navigation