Embed HTML5 CSS and JavaScript – Meta Viewport tag

This small overview gives a quick access to the most important HTML5 tags to include resources (CSS and JavaScript) and to set the viewport handling correctly for responsive projects.

Set Viewport

Markup

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>

Although viewport is not yet standardized in any way as a value for the name attribute, it is supported by all relevant browsers (on mobile devices).

The tag causes browsers to display the page in the size of the device pixels and not to try to scale down a large page. Peter Paul Koch explains the connections excellently.

In some projects it is necessary to use the other specifications like user-scalable, minimum-scale and maximum-scale.

Include CSS

Markup

<head>
  <link href="styles.css" rel="stylesheet">
  ...
</head>

The specification of the type attribute (type=”text/css”) is not necessary, since it is only a hint for the browser which MIME type to expect for the external resource.

It is ultimately the resource itself that determines which content type it returns. The browser then decides whether it is compatible with the link type stylesheet and is taken into account in rendering.

Include JavaScript

Markup

  ...
  <script src="scripts.js"></script>
</body>

The type attribute on the script tag behaves similar to CSS. It is an indication of the MIME type of the linked script file for the user agent. If omitted, the browser assumes type=”text/javascript” by default.

The end tag must not be omitted for script.