Category: HTML

ALL HTML related notes

Script control attributes

As part of the HTML5 spec, there are two attributes that allow control over when and how JS scripts are executed:

Default script control

<script src="plugins.js"></script>

When no script control presents – The script is downloaded and executed immediately, before the browser continues parsing the page.

Defer script control

<script src="plugins.js" defer></script>

Adding the defer attribute tells the browser to wait with executing the script until it finishes processing the document. commonly used when the script to be loaded is reliant on the DOM structure.

Async script control

<script src="social-plugins.js" async></script>

Adding the async attribute tells the browser that the script can be safely executed asynchronously. that’s good in cases where the script can act as a stand-alone script which does not rely on the DOM being ready first.

A visual example

script-controls visualization

SRCSET – Serving high quality images for high pixel density screens

srcset is an attribute, very similar to src which is being set on the <img> tag.

srcset allows you to define a “set” of sources of images that will be served according to certain rules.

A simple & very useful example, would be this:

<img src="pic.jpg" srcset="pic.jpg 1x, pic-2x.jpg 2x">

Note the 1x & 2x – this basically allows us to set a different image according to the relevant pixel density.

  • 1x – “normal” pixel density
  • 2x – double than “normal” pixel density, retina displays for example.
  • and so on…

The nice thing about srcset, is that it both degrades gracefully to use src if the browser lacks support & the browser is smart enough to only load the relevant image.