Practical field notes

Pro Tips for builderswho ship.

Focused lessons for the stacks developers use every day. Each category now has its own crawlable page, so users and search engines can land directly on the right topic.

HTML field note

Featured

Use real buttons for actions

If it changes state, use button. If it navigates, use a link.

CodeCopy

<button type="button" aria-expanded={open} onClick={toggleMenu}>
  Toggle filters
</button>

<a href="/pricing">
  View pricing
</a>

Technology switchboard

Pick a stack, then open a focused field note.

Start with HTML

HTML field notes

Choose the ideayou can use today.

Semantic structure, forms, buttons, and accessible defaults. Each note includes production context, copy-ready examples, and platform-specific advice.

Use real buttons for actions

If it changes state, use button. If it navigates, use a link.

Beginner

Label every form field

Visible or screen-reader labels make forms better for users and automated tests.

Beginner

Keep heading order meaningful

Headings should describe document structure, not only match a visual size.

Intermediate

Prefer native disclosure

details and summary are excellent for simple FAQ and help interfaces.

Intermediate

Use landmark elements

Use header, nav, main, aside, and footer so users and assistive tech can jump around quickly.

Beginner

Write alt text by purpose

Describe useful images and leave decorative images empty so screen readers get the right signal.

Beginner

Connect errors to fields

Use aria-describedby so validation messages are announced with the input they explain.

Intermediate

Use native input types

Use email, url, number, date, and search inputs to get better keyboards and validation for free.

Beginner

Learn

Read one focused tip and understand why it works.

Apply

Use the idea immediately in your stack or workflow.

Improve

Measure the result and keep the pattern for later.