Semantic [HTML](/courses/html) means using elements according to their actual purpose instead of using generic elements for everything. In [React](/courses/reactjs), this matters because screen readers, keyboards, browsers, and other assistive technologies already understand the behavior of native [HTML](/courses/html) elements. ### Example: Button vs div Avoid: ```jsx

Save

``` A `div` is not naturally interactive. It does not automatically provide: ```text Keyboard activation Button semantics Focus behavior Accessible role Expected browser behavior ``` Prefer: ```jsx ``` The browser already knows that this is an interactive button. ### Semantic Elements Provide Meaning Instead of building a page entirely with: ```html

...

``` use appropriate elements: ```jsx

...

``` These elements communicate document structure. ### Common Semantic Elements ```text button → action a → navigation to another location nav → navigation section main → primary page content article → independent piece of content section → meaningful grouped section form → user input form label → form control label ul / ol / li → lists h1-h6 → heading hierarchy ``` ### Links and Buttons Are Not Interchangeable Use a link when the user is navigating: ```jsx Learn React ``` Use a button when the user is performing an action: ```jsx ``` A useful rule is: ```text Changes location? → link Performs an action? → button ``` ### Heading Structure Matters Headings should communicate page hierarchy rather than being chosen only for visual size. For example: ```jsx

React Course

React Hooks

useState

useEffect

React Routing

``` Assistive technologies can use this structure to help users navigate the document. ### Semantic HTML Reduces ARIA Work If you write: ```jsx ``` it already has button semantics. If you use: ```jsx

Submit

``` you may also need to recreate keyboard behavior, focusability, disabled behavior, and other details manually. Native HTML should therefore be the first choice whenever it can [express](/courses/expressjs) the required behavior. ### React Does Not Change HTML Accessibility Rules [JSX](/courses/reactjs) looks different from HTML syntax, but the browser still receives HTML elements. For example: ```jsx ``` still produces a real accessible button in the DOM. ### Interview-Ready Answer Semantic HTML improves React accessibility because native elements already provide meaning and built-in keyboard and assistive-technology behavior. Developers should prefer real buttons, links, labels, headings, landmarks, and lists instead of recreating their behavior with generic `div` elements. Native semantics usually provide better accessibility with less code.