Detailed answer
Choose elements for meaning before deciding how they look.
A button performs an action, a link navigates, and a heading introduces a section. CSS can change presentation while preserving those roles. Native semantics give browsers and assistive technology information generic containers do not supply by themselves.
Example
<main><h1>HTML guide</h1><article><h2>Getting started</h2><p>Build a small document.</p></article></main>
Understanding the behavior
Meaningful elements communicate the purpose of content as well as providing hooks for styling. Choose a heading because it introduces a section, and a button because it performs an action. Default browser appearance can be changed with CSS.
Practical implementation notes
Review the page without relying on color or positioning. Landmarks, headings and control names should still explain its structure. Using semantic elements helps, but does not automatically make every interaction accessible.
How to check it
Inspect landmarks and headings in the accessibility tree after choosing native elements.
Expected result
Main content is identifiable and the lesson has a real heading.
Watch out: A div styled as a button does not gain native button behavior.
Read the reference ↗