UI stands for user interface. On a website, it includes the controls, content organization and feedback people use to interact with the page. It is more than a collection of decorative graphical elements.

Inspect an interface state

Expose an action and its resultLink

HTML and CSS

HTML

<button type="button">Show a tip</button>
<p role="status"></p>
<script>
  document.querySelector("button").addEventListener("click", () => { document.querySelector("p").textContent = "Change one value at a time when testing CSS."; });
</script>

CSS

button {
  font: inherit;
  padding: 0.7rem 1rem;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

The label states the action. A native button supplies keyboard activation, and the status text makes the result available in the document. Styling can improve recognition and spacing, but it cannot substitute for the action or its name.

Review the important states

Check the initial, focused, active and resulting states. If the action can fail or take time, the interface needs those states too. Try the control with Tab, Enter and Space, then at a narrow width.

Clear hierarchy and readable contrast help people find what they need. Test those decisions with actual tasks rather than treating “clean” appearance as a complete usability result. Compare UI and UX and the native button lesson.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.