Attributes

Attributes sit in the opening tag as name="value" and change what an element does. Some are boolean: present means on. class can hold several names; id names exactly one element.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Almost everything interesting about an element is in its attributes: where a link goes, what an input is, which styles apply, whether a box is checked.

How to think about it

Read the tag name first, then each attribute as a setting. Quote every value; separate several class names with spaces.

Worked example

<input type="checkbox" checked>

A boolean attribute: checked is present, so the box starts ticked. There is no checked="false".

<a href="/x" class="btn primary">Go</a>

class holds two names, btn and primary, separated by a space. Either selects it in CSS.

<div id="hero" data-step="2">Welcome</div>

id names this one element; data- attributes carry your own values for scripts to read.

Your turn

Give the section two class names.

<section ="card wide">

The trap

checked="false" or disabled="no". For a boolean attribute, any presence means on. Remove the attribute to turn it off.

Practise attributes on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.