svelte:head for document head - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a title inside the document head using svelte:head.

Svelte

<svelte:head>
  <title>[1]</title>
</svelte:head>

Drag options to blanks, or click blank then click option'

Abody

Bhead

CMy Page Title

Dscript

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the title text outside the <title> tag

Using head or body as title text

The svelte:head tag lets you add elements like <title> inside the document head. Here, the title text should be inside the <title> tag.

2fill in blank

medium

Complete the code to add a meta description inside the document head using svelte:head.

Svelte

<svelte:head>
  <meta name="description" content="[1]">
</svelte:head>

Drag options to blanks, or click blank then click option'

Acontent

BA cool Svelte app

Cdescription

Dmeta

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the word 'content' instead of the actual description

Confusing the 'name' and 'content' attributes

The content attribute of the <meta> tag holds the description text. Here, you fill in the description string.

3fill in blank

hard

Fix the error in the code to correctly add a favicon link inside the document head using svelte:head.

Svelte

<svelte:head>
  <link rel="icon" href=[1]>
</svelte:head>

Drag options to blanks, or click blank then click option'

A"/favicon.ico"

B/favicon.ico

C'favicon.ico'

Dfavicon.ico

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the URL unquoted

Using single quotes instead of double quotes (both work in HTML but here double quotes are preferred)

The href attribute value must be a quoted string. Without quotes, it causes an error.

4fill in blank

hard

Fill both blanks to add a viewport meta tag inside the document head using svelte:head.

Svelte

<svelte:head>
  <meta name=[1] content=[2]>
</svelte:head>

Drag options to blanks, or click blank then click option'

A"viewport"

B"width=device-width, initial-scale=1"

C"description"

D"A Svelte app"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'description' instead of 'viewport' for the name

Putting description text in the content attribute

The viewport meta tag controls how the page scales on different devices. The name should be "viewport" and content should specify width and scale.

5fill in blank

hard

Fill all three blanks to add charset, author meta tags, and a title inside the document head using svelte:head.

Svelte

<svelte:head>
  <meta charset=[1]>
  <meta name=[2] content=[3]>
  <title>My Svelte App</title>
</svelte:head>

Drag options to blanks, or click blank then click option'

A"UTF-8"

B"author"

C"John Doe"

D"viewport"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect charset value

Confusing author with viewport or description meta tags

The charset meta tag sets the character encoding, usually "UTF-8". The author meta tag uses name="author" and the content is the author's name.