×

html · level 3 · unit 2 · lesson 2

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

fetches a file before the browser finds it.

A website's files live on a server, a computer that sends them to any browser that asks. Each ask is a . The browser reads your HTML from the top and sends a request for each file it finds.

Some files are found late. A , the file of design rules you will meet in CSS, might ask for a big background picture. The browser only learns about it after the stylesheet has arrived.

Preload jumps the queue: <link rel="preload"> in the head names the file, and as says what kind it is, like as="image". Preload only what the first screen needs, or everything else slows down.

<!doctype html>
<html lang="en">
  <head>
    <title>Pip's Plants</title>
    <link rel="preload" href="tree.svg" as="image">
  </head>
  <body>
    <h1>Pip's Plants</h1>
    <p>The tree behind this heading comes from our stylesheet.</p>
  </body>
</html>

Press show my page to see it here.

<link> is an empty element that lives in the head. Its rel says how the file relates to your page.