Attributes and classes: extra information on an element
A tag name says what an element is. Attributes say everything else: how it's styled, where a link goes, which picture to show, and what that picture means.
The big idea
An attribute is a name="value" pair inside an opening tag that configures the element.
See it in code
class is the attribute you'll write most. Its value is a space-separated list of classes, and here every one of them is a styling utility:
<div class="p-8">
<a class="rounded-full bg-violet-600 px-4 py-2 text-sm font-semibold">Explore</a>
</div>The attribute sits inside the opening tag, with its value in quotes. Order within the class list doesn't matter; spelling does.
An id gives one element a unique name. An href that starts with # links to the element with that id, so a click jumps straight to it:
<nav class="flex gap-6 bg-slate-900 px-6 py-4 text-sm font-medium text-slate-300">
<a href="#about" class="hover:text-white">About</a>
<a href="#missions" class="hover:text-white">Missions</a>
</nav>
<section id="about" class="px-6 py-16">
<h2 class="text-2xl font-bold">What is COSMOS?</h2>
</section>
<section id="missions" class="px-6 py-16">
<h2 class="text-2xl font-bold">Missions</h2>
</section>href="#missions" and id="missions" have to match exactly. An id must be unique on the page; a class can be reused as often as you like.
An image needs two attributes. src says which file to load. alt describes the picture in words, for anyone who can't see it:
<figure class="mx-auto mt-6 max-w-sm overflow-hidden rounded-2xl border border-white/10 bg-white/5">
<img src="/library/cosmos/planet.jpg" alt="A golden ringed planet against a field of stars" class="h-48 w-full object-cover">
<figcaption class="p-4 text-sm text-slate-300">A ringed planet, seen from one of its moons.</figcaption>
</figure>Most visitors never see the alt text. Screen readers speak it, search engines index it, and it appears if the image fails to load, so it's essential to some.
Named options on a thing are a universal idea. Keyword arguments on a function call, settings in a config file, and columns in a table row all configure something by name.
Try it yourself
Break the link on purpose: change href="#missions" to href="#mission" and click it. Then write an alt for the nebula image at /library/cosmos/nebula.jpg that would help someone who can't see it.
The common mistake
Leaving alt off a meaningful image, or filling it with "image" or the file name. Describe what the picture shows and why it's there, in one sentence.
What it unlocks
Attributes turn plain HTML elements into links, images, and inputs. An id is also how a script finds an element in the DOM, and for pairs with id in forms.