Lesson 68 +5 XP

HTML Attribute Reference

Attributes are extra settings you put inside a start tag. Here are the ones you'll use most, plus every global attribute.

Attribute	What it does
`id`	A unique name for one element.
`class`	A shared name for styling groups.
`style`	Inline CSS for this element.
`title`	Extra info shown on hover.
`lang`	The language of the content.
`dir`	Text direction: `ltr` or `rtl`.
`hidden`	Hides the element.
`tabindex`	Keyboard focus order (0 = tabbable).
`contenteditable`	Makes text editable.
`spellcheck`	Enables spell checking.
`draggable`	Makes an element draggable.
`data-*`	Stores your own custom data.
`autofocus`	Focus this element on page load.
`accesskey`	A keyboard shortcut to the element.
`slot`	Assigns an element to a slot.
`translate`	`no` stops translation tools.
`inert`	Makes an area unclickable/unfocusable.
`popover`	Makes an element a pop-up panel.
`nonce`	A one-time security token.
`part` / `exportparts`	Style web component internals.
`is`	Customized built-in elements.

Attribute	What it does
`href`	Where the link goes (URL or `#id`).
`target`	Where to open: `_blank` = new tab.
`rel`	Relationship (`noopener`, `noreferrer`, `external`).
`download`	Makes the link download a file.
`hreflang`	The language of the linked page.
`type`	The MIME type of the linked content.

Attribute	What it does
`src`	The image file path.
`alt`	Text shown if the image fails (accessibility!).
`width` / `height`	Size in pixels.
`loading="lazy"`	Load only when scrolled near.
`srcset`	Multiple sizes for responsive images.
`sizes`	Which size to pick at which width.
`usemap`	Links to an image `<map>`.
`ismap`	Server-side image map.

Attribute	What it does
`src`	The media file path.
`controls`	Shows play/pause buttons.
`autoplay`	Starts playing by itself.
`loop`	Plays over and over.
`muted`	Starts silent.
`poster`	Cover image for a video.
`preload`	How much to load upfront.
`playsinline`	Play without fullscreen (phones).

Attribute	What it does
`type`	Text, email, password, number, and more.
`name`	The field's name (sent with the form).
`value`	The current value.
`placeholder`	A hint shown before typing.
`required`	The field must be filled in.
`readonly`	Can read but not edit.
`disabled`	Turned off and not submitted.
`checked`	Pre-selects a checkbox/radio.
`min` / `max`	Smallest/biggest allowed value.
`step`	How much each click changes the value.
`pattern`	A regex the value must match.
`multiple`	Allow several values.
`maxlength` / `minlength`	Length limits.
`autocomplete`	Turns autofill on/off.
`list`	Links to a `<datalist>` of suggestions.
`accept`	Which file types a file input accepts.
`form`	Join a form from outside it.

Attribute	What it does
`action`	Where the form's data goes.
`method`	`get` (visible in URL) or `post` (hidden).
`enctype`	How data is encoded (needed for files).
`target`	Where to show the response.
`novalidate`	Skip validation.
`autocomplete`	Autofill on/off for the form.

Attribute	What it does
`colspan="2"`	A cell stretches across 2 columns.
`rowspan="2"`	A cell stretches across 2 rows.
`scope`	Which cells a header describes (a11y).
`headers`	Links a cell to its header(s).
`span`	On `<col>`: how many columns.

Attribute	What it does
`src`	The page to embed.
`title`	Description for screen readers (important!).
`sandbox`	Limits what the embedded page can do.
`allow`	Allows features (camera, fullscreen).
`allowfullscreen`	Lets the page go fullscreen.
`loading="lazy"`	Load when scrolled near.
`srcdoc`	Inline HTML to show instead of a URL.

Attribute	What it does
`aria-label`	A name for things with no text.
`aria-labelledby`	Points to the element that names this one.
`aria-hidden="true"`	Hides from screen readers.
`role`	What an element's job is (button, alert...).