FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Basics

Intermediate

HTML Attributes

Learn how attributes configure elements: links, images, classes, ids, forms, metadata, accessibility and custom data.

HTML attributes

Attributes tell elements how they should behave.

Attributes are the settings inside an opening tag. They can give an element a destination, identity, language, source file, validation rule, accessible name, loading strategy or security boundary. The element says what the content is. The attributes configure the details.

Learn attributes by purpose instead of memorizing a flat list. Start with global attributes such as id, class, lang and hidden, then move into links, media, metadata, forms, validation, accessibility and security.

Beginner rule: every attribute should have a job. If you cannot explain what it changes for the browser, the user, assistive technology, SEO or JavaScript, it probably does not belong there yet.
<img src="photo.jpg" alt="Auto">
Element img

The element says what this is: an image embedded in the document.

Attribute src

The source attribute tells the browser which image file to load.

Value "photo.jpg"

The value belongs to src. It points to the image file.

Attribute alt

The alt attribute gives the image a text alternative for accessibility and fallback.

Value "Auto"

The value belongs to alt. It should describe the image meaning in context.

Complete tag <img src="photo.jpg" alt="Auto">

The img element is a void element, so it does not get a closing </img> tag.

Configure behavior

href, src, method, type and defer change how elements work.

Describe meaning

lang, alt, aria-label and scope help users and tools understand the page.

Support production

rel, sandbox, integrity, validation rules and data hooks reduce surprises later.

Global

id, class, title, hidden, tabindex, lang, dir, style

Attributes that can be used on many HTML elements.

 Class and ID

class, id

Reusable CSS hooks, unique anchors and label targets.

 Language

lang, dir, translate

Language and writing direction for browsers, translation tools and assistive technology.

 Data

data-*

Custom data stored in HTML for JavaScript and small interface state.

 Links

href, target, rel, download, hreflang

Attributes that decide where links go and how safely they open.

 Media

src, alt, srcset, sizes, loading, width, height

Attributes for images, video, audio and responsive media loading.

 Metadata

charset, name, content, http-equiv, rel

Attributes inside the document head for browsers, SEO and sharing previews.

 Forms

action, method, enctype, target, autocomplete, novalidate

Attributes that control where forms submit and how browsers help users.

 Inputs

type, name, value, placeholder, min, max, step

Attributes that shape input fields, keyboard behavior and submitted data.

 Validation

required, minlength, maxlength, pattern, min, max, step

Browser validation attributes that catch simple mistakes before submit.

 Boolean

disabled, checked, selected, readonly, multiple, autofocus

Attributes where presence means true and absence means false.

 Accessibility

aria-*, role, aria-label, aria-labelledby, aria-describedby

Attributes that help assistive technology understand interface intent.

 Tables

scope, colspan, rowspan, headers

Attributes for data relationships inside real tables.

 Scripts

src, type, defer, async, nomodule, integrity, crossorigin

Attributes that control JavaScript loading, modules and security checks.

 Iframes

src, title, sandbox, allow, loading, referrerpolicy

Attributes for embedded pages, permissions and isolation.

 Security

rel, sandbox, integrity, crossorigin, referrerpolicy

Attributes that reduce risk when loading or linking external resources.

 Events

onclick, onchange, onsubmit, oninput

Inline event attributes and why production code usually prefers JavaScript listeners.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change the id value and update the link href so they still match.
  • Change the image alt text to describe a different image.
  • Add data-level="beginner" to the main card and run the preview.

Practice assignment

Do this before moving to the next lesson.

  1. Change the id and make sure the internal link still points to the same value.
  2. Rewrite the alt text so it describes the image in this lesson context.
  3. Add one data-* attribute and explain what JavaScript or analytics could use it for.

Try it yourself

Give elements useful attributes

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain the difference between an element, an attribute and an attribute value?
  2. Can you name one attribute that affects accessibility and one that affects behavior?
  3. Can you explain why quoted attribute values are easier to maintain?
  4. Can you decide whether an attribute belongs in HTML, CSS or JavaScript?
  5. Can you remove one unnecessary attribute from an example and explain why it was noise?