HTML vs JSX
Differences, use cases, and when to use each
HTML is the standard markup language for web pages. JSX is a JavaScript syntax extension for React that looks like HTML but compiles to JavaScript function calls. Converting HTML to JSX requires several syntax changes.
Quick Comparison
| Feature | HTML | JSX |
|---|---|---|
| Class Attribute | class="name" | className="name" |
| For Attribute | for="id" | htmlFor="id" |
| Style Attribute | style="color: red" | style={{ color: 'red' }} |
| Self-closing Tags | Optional (<img>) | Required (<img />) |
| Event Handlers | onclick="fn()" | onClick={fn} |
| Expressions | Template strings | Curly braces {expression} |
When to Use Each
When to Use HTML
Use HTML for static web pages, email templates, server-rendered content, and any context not using React or a JSX-compatible framework.
When to Use JSX
Use JSX when building React (or Preact, SolidJS) components. JSX enables component composition, TypeScript type checking, and dynamic expressions within the template.
Pros & Cons
HTML
Universal browser support
No build step required
Email compatible
No component model
Limited dynamic rendering
JSX
Component composition
TypeScript support
Dynamic expressions
Full JavaScript power
Requires build tooling (Babel/TS)
Different attribute names from HTML
Verdict
HTML for static content and non-React projects. JSX for React applications. The conversion is mechanical — changing class→className, for→htmlFor, and adjusting self-closing tags.