Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
Stores
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

Just like you can use curly braces to control text, you can use them to control element attributes.

Our image is missing a src — let’s add one:

App
<img src={src} />

That’s better. But if you hover over the <img> in the editor, Svelte is giving us a warning:

`<img>` element should have an alt attribute

When building web apps, it’s important to make sure that they’re accessible to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn’t always easy to get right, but Svelte will help by warning you if you write inaccessible markup.

In this case, we’re missing the alt attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can’t download the image. Let’s add one:

App
<img src={src} alt="A man dances." />

We can use curly braces inside attributes. Try changing it to "{name} dances." — remember to declare a name variable in the <script> block.

Shorthand attributes

It’s not uncommon to have an attribute where the name and value are the same, like src={src}. Svelte gives us a convenient shorthand for these cases:

App
<img {src} alt="{name} dances." />

Edit this page on GitHub

1
2
3
4
5
6
<script>
	let src = '/tutorial/image.gif';
</script>
 
<img />