Processed in your browser. Your data never leaves your device.

HTML vs JSX — Every Difference Explained

JSX looks like HTML but has key differences that trip up developers. This guide covers every difference between HTML and JSX with side-by-side examples so you can convert confidently.

HTML to JSX Converter

Convert HTML to valid JSX — transforms attributes, inline styles, comments, void elements, event handlers, and SVG attributes.

Examples

Wrap in component

HTML Input

JSX Output

<div className="container">
  <h1 className="title">Hello World</h1>
  <p className="text-gray-500">Welcome to my app.</p>
</div>

Changes Made

class→className×3

HTML → JSX Quick Reference

HTML	JSX	Why
class="..."	className="..."	"class" is a reserved word in JavaScript
for="..."	htmlFor="..."	"for" is a reserved word in JavaScript
style="color: red"	style={{ color: 'red' }}	JSX styles are objects, not strings
<!-- comment -->	{/* comment */}	JSX uses JS comment syntax
<br>	<br />	JSX requires self-closing void tags
<img ...>	<img ... />	All void elements must self-close
tabindex="0"	tabIndex="0"	JSX uses camelCase attributes
onclick="..."	onClick={() => {}}	Event handlers are camelCase functions
colspan="2"	colSpan="2"	Multi-word attributes are camelCase
stroke-width="2"	strokeWidth="2"	SVG attributes use camelCase in JSX

Reserved words: class and for

The biggest gotcha: HTML's class attribute becomes className in JSX because 'class' is a reserved keyword in JavaScript. Similarly, the for attribute on <label> elements becomes htmlFor because 'for' is used for loops in JavaScript. These are the two most common conversion mistakes.

Inline styles are objects, not strings

In HTML you write style="color: red; font-size: 16px". In JSX, the style attribute takes a JavaScript object: style={{ color: 'red', fontSize: '16px' }}. CSS property names use camelCase (background-color becomes backgroundColor) and values are strings or numbers.

All tags must close

HTML allows void elements like <br>, <img>, <input>, and <hr> without closing. JSX requires every element to either have a closing tag or self-close: <br />, <img />, <input />, <hr />. Forgetting to self-close void elements is the most common JSX syntax error.

Comments use JavaScript syntax

HTML comments  don't work in JSX. Instead, use JavaScript comments wrapped in curly braces: {/* like this */}. Multi-line comments work the same way. Comments outside of JSX expressions use standard // or /* */ JavaScript syntax.

Frequently Asked Questions

Why does JSX use className instead of class?

'class' is a reserved keyword in JavaScript (used for class declarations). Since JSX compiles to JavaScript function calls, using 'class' would conflict with the language syntax. React chose 'className' to match the DOM API's element.className property.

Can I use HTML directly in React without converting to JSX?

No — JSX is required in React components. While it looks like HTML, JSX compiles to React.createElement() calls. You must convert HTML attributes to their JSX equivalents (className, htmlFor, style objects, etc.) for the code to compile.

What happens if I use class instead of className in JSX?

React will show a console warning: 'Invalid DOM property class. Did you mean className?' The attribute will still work in most browsers, but it's incorrect JSX and can cause issues with some React features.

Related Convert Tools

cURL

cURL to Code

Convert cURL commands to JavaScript, Python, Go, PHP, Ruby, and Java code instantly

J→C

JSON to CSV Converter

Convert JSON arrays to CSV with nested object flattening, column selection, and .csv download

TML

TOML ↔ JSON/YAML

Convert between TOML, JSON, and YAML — perfect for Cargo.toml and pyproject.toml

E/D

Encode / Decode Multi-Tool

Base64, Base32, Hex, Binary, URL, and HTML encoding & decoding all in one tool