HTML rendering with {@html} in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render raw HTML stored in the variable content.

Svelte

<div>[1] content</div>

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

A{@html}

B{content}

C{#html}

D{html}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {content} renders HTML as plain text.

Using {#html} is incorrect syntax.

Using {html} is not recognized by Svelte.

Use {@html} to render raw HTML in Svelte.

2fill in blank

medium

Complete the code to safely render the variable htmlString as HTML inside a section.

Svelte

<section>[1] htmlString</section>

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

A{html}

B{htmlString}

C{@html}

D{#html}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {htmlString} renders the HTML as plain text.

Using {#html} is not valid syntax.

Using {html} does not render HTML.

{@html} tells Svelte to render the string as HTML inside the element.

3fill in blank

hard

Fix the error in rendering the variable rawHtml as HTML inside a div.

Svelte

<div>[1] rawHtml</div>

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

A{html}

B{rawHtml}

C{#html}

D{@html}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {rawHtml} renders HTML as text, not HTML.

Using {#html} is invalid syntax.

Using {html} does not render HTML.

Only {@html} correctly renders raw HTML strings in Svelte.

4fill in blank

hard

Fill both blanks to render htmlContent as HTML inside a section and add an ARIA label for accessibility.

Svelte

<section aria-label=[1]>[2] htmlContent</section>

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

A"Rich content"

B{@html}

C'Rich content'

D{htmlContent}

Attempts:

3 left

💡 Hint

Common Mistakes

Missing quotes around the ARIA label value.

Using {htmlContent} renders HTML as text.

Using {html} or {#html} is invalid.

Use a string with quotes for the ARIA label and {@html} to render HTML.

5fill in blank

hard

Fill all three blanks to render dynamicHtml safely, add an ARIA label, and use a main semantic element.

Svelte

<main aria-label=[1]>[2] dynamicHtml <footer>[3]</footer></main>

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

A"Main content"

B{@html}

C© 2024 My Site

D{dynamicHtml}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {dynamicHtml} renders HTML as text.

Missing quotes around ARIA label.

Putting HTML rendering syntax in footer.

Use quotes for ARIA label, {@html} to render HTML, and plain text for footer content.