Template and noscript
Set up progressive enhancement with <template> and <noscript>.
Template and progressive enhancement
In this lesson you'll set up progressive enhancement with <template> and <noscript>. The page must work without JavaScript; extra features arrive when JS is on.
<template> holds inert content: the browser parses it but doesn't render it. When JavaScript is on, it's cloned into the page. In web components a <slot> works with templates to receive outside content. In this project you'll prepare a template for breaking news.
Fallback content with noscript
<noscript> holds fallback content shown when JavaScript is off in the browser. It's the standard way to tell the visitor that a feature needs JavaScript.
In this project breaking news lives inside a <template>. When JS is on it's cloned and shown; when JS is off the <noscript> warning is shown. Either way the visitor is informed; the page stays meaningful without JavaScript.
Exercise Add template and noscript inside main
Take the main with the article from the previous lesson. After <article>, add a <template>; mark it with id="breaking-template". Inside the template put an <article>, inside the article an h2 (e.g. Breaking headline) and a p (e.g. Details loading...). After the template, add a <noscript>; inside it put a <p> (e.g. Enable JavaScript to see breaking news.).
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fast News - Home</title>
<link rel="preconnect" href="https://cdn.fastnews.com">
<link rel="dns-prefetch" href="https://cdn.fastnews.com">
<link rel="preload" as="image" href="https://cdn.fastnews.com/cover/main-story-960.webp">
</head>
<body>
<header>
<h1>Fast News</h1>
<p>Your fast news source</p>
</header>
<main>
<article>
<h2>Markets hit a new high</h2>
<img src="https://cdn.fastnews.com/cover/main-story-960.webp"
srcset="https://cdn.fastnews.com/cover/main-story-480.webp 480w,
https://cdn.fastnews.com/cover/main-story-960.webp 960w,
https://cdn.fastnews.com/cover/main-story-1440.webp 1440w"
sizes="(max-width: 600px) 100vw, 50vw"
width="960" height="540"
alt="Rising chart on a market screen"
loading="lazy" decoding="async">
</article>
<template id="breaking-template">
<article>
<h2>Breaking headline</h2>
<p>Details loading...</p>
</article>
</template>
<noscript>
<p>Enable JavaScript to see breaking news.</p>
</noscript>
</main>
</body>
</html>Test yourself
-
When is the content of <noscript> shown?
- Always, while the page loads
- Only on mobile devices
- When CSS is off
- When the browser doesn't support or has disabled JavaScript
Show answer
When the browser doesn't support or has disabled JavaScript — Correct. noscript content is shown only when JavaScript is off or unsupported.
-
Complete the noscript content
<noscript> ____ </noscript>Show answer
<noscript> <p>JavaScript required</p> </noscript> -
Match each tag to its role
- template
- Holds inert content
- noscript
- Fallback without JavaScript
- slot
- Content slot in a template
- script
- Carries JavaScript code