Understanding JSX Syntax and HTML Differences0%

Understanding JSX Syntax and HTML Differences

Beginner12 min read•Updated: Jul 11, 2026

Understanding JSX Syntax and HTML Differences

1. What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside your JavaScript files. While it visually resembles HTML, JSX possesses the full expressive power of JavaScript.

Browsers cannot natively execute JSX. Before reaching the browser, build tools (such as Vite's Babel or esbuild transforms) compile JSX markup into standard JavaScript function calls (React.createElement or the modern JSX runtime jsx() / jsxs() functions).

JSX Code:

JSX

1const element = <h1 className="title">Welcome to MSK</h1>;

Transpiled JavaScript Output:

JavaScript

1import { jsx as _jsx } from 'react/jsx-runtime';
2 
3const element = _jsx('h1', {
4  className: 'title',
5  children: 'Welcome to MSK'
6});

2. Key Differences Between JSX and HTML

Because JSX is transpiled into JavaScript objects and interacts with the DOM's JavaScript properties rather than HTML attributes, several critical syntax differences must be respected:

HTML Attribute	JSX Equivalent	Reason / Rationale
`class`	`className`	`class` is a reserved keyword in JavaScript for defining classes.
`for`	`htmlFor`	`for` is a reserved keyword in JavaScript for `for` loops.
`tabindex`	`tabIndex`	JSX attributes follow standard camelCase naming conventions.
`onclick`	`onClick`	React uses camelCase synthetic event handlers.
`style="color: red;"`	`style={{ color: 'red' }}`	Styles must be passed as JavaScript objects, not raw strings.
`<input>` (unclosed)	`<input />`	All elements must be explicitly closed in JSX.

3. Strict Syntax Rules of JSX

Rule 1: Return a Single Root Element

A component cannot return multiple top-level sibling elements without wrapping them in a single parent container (such as a <div> or a <React.Fragment> / <>):

JSX

1// ❌ Syntax Error: Adjacent JSX elements must be wrapped in an enclosing tag
2export default function Card() {
3  return (
4    <h2>Title</h2>
5    <p>Description</p>
6  );
7}
8 
9// ✅ Valid: Wrapped in a single parent tag
10export default function Card() {
11  return (
12    <div>
13      <h2>Title</h2>
14      <p>Description</p>
15    </div>
16  );
17}

Rule 2: Close All Tags

In HTML, void tags like <img>, <input>, <hr>, and <br> can be left unclosed. In JSX, every tag must be explicitly closed:

JSX

1// ❌ Syntax Error in JSX
2<img src="/avatar.png">
3<input type="text">
4 
5// ✅ Valid JSX: Self-closing tags
6<img src="/avatar.png" alt="User Avatar" />
7<input type="text" placeholder="Enter your name" />

Rule 3: CamelCase Most Properties

Almost all attributes and event handlers in JSX are written in camelCase (aria-* and data-* attributes remain hyphenated as in standard HTML):

JSX

1<button
2  type="button"
3  tabIndex={0}
4  aria-label="Close dialog"
5  data-testid="modal-close-btn"
6  onClick={() => console.log('Clicked!')}
7>
8  Close
9</button>

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What is JSX in the context of React?

Question 2

Why does JSX use className instead of the traditional HTML class attribute?

Question 3

How must self-closing HTML void tags (such as <img> and <input>) be formatted in JSX?

Question 4

Which attribute replaces the standard HTML for attribute on <label> elements in JSX?

Question 5

How are HTML custom data attributes (data-*) written in JSX?

Next Lesson

Embedding JavaScript Expressions in JSX

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Virtual DOM and React Render Cycle Explained	Embedding JavaScript Expressions in JSX

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext