React vs HTML – web4learners.com

JSX and HTML look very similar, which is why many beginners initially assume that JSX is simply HTML written inside JavaScript. Although JSX uses an HTML-like syntax, it follows JavaScript and React rules that make it different from traditional HTML.

Understanding the differences between JSX and HTML is important because you will write JSX every time you create a React component. Some differences are small, such as using className instead of class, while others are more fundamental, such as embedding JavaScript expressions directly inside JSX.

For example, traditional HTML can look like this:

<div class="profile">
  <h1>Alex</h1>
  <p>Frontend Developer</p>
</div>

The equivalent JSX is:

<div className="profile">
  <h1>Alex</h1>
  <p>Frontend Developer</p>
</div>

At first glance, the two examples look almost identical. However, JSX provides additional capabilities that allow JavaScript logic and data to be integrated directly into the user interface.

What Is HTML?

HTML, or HyperText Markup Language, is the standard markup language used to structure content on web pages.

HTML defines elements such as:

<h1>Heading</h1>
<p>Paragraph</p>
<button>Click Me</button>
<img src="image.jpg" alt="Example">

These elements describe the structure and meaning of content that browsers display.

A traditional HTML page might contain:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>

  <body>
    <h1>Welcome</h1>
    <p>This is my website.</p>
    <button>Click Me</button>
  </body>
</html>

The browser reads the HTML and constructs the document structure that users see on the screen.

What Is JSX?

JSX is a syntax extension for JavaScript that allows developers to write HTML-like markup inside JavaScript code.

A React component can use JSX like this:

function Welcome() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>Build modern user interfaces.</p>
    </div>
  );
}

The JSX describes the structure of the component’s user interface.

Unlike HTML, JSX can also directly use JavaScript expressions:

function Welcome() {
  const name = "Alex";

  return <h1>Welcome, {name}!</h1>;
}

The {name} expression is evaluated using JavaScript.

This ability to combine UI markup with JavaScript is one of the most important characteristics of JSX.

The Main Difference Between JSX and HTML

The easiest way to understand the relationship is:

HTML
↓
Markup language for structuring web documents

JSX
↓
JavaScript syntax extension for describing React UI

HTML is designed to structure web documents, while JSX is primarily used within React components to describe what the component should render.

JSX looks like HTML because this makes UI structures easier for developers to read and write, but JSX follows JavaScript and React conventions.

JSX vs HTML Syntax Differences

There are several syntax differences that you will encounter frequently.

class vs className

One of the most common differences is the CSS class attribute.

HTML uses:

<div class="container">
  <h1>Hello</h1>
</div>

JSX uses:

<div className="container">
  <h1>Hello</h1>
</div>

The reason is that JSX uses JavaScript syntax, and class has a special meaning in JavaScript. React therefore uses className for CSS classes.

for vs htmlFor

HTML uses the for attribute to associate a <label> with a form control:

<label for="email">Email</label>
<input id="email" type="email">

JSX uses:

<label htmlFor="email">Email</label>
<input id="email" type="email" />

The JSX version uses htmlFor.

Event Attributes

HTML commonly uses lowercase event attributes:

<button onclick="handleClick()">
  Click Me
</button>

In JSX, event names use camelCase:

<button onClick={handleClick}>
  Click Me
</button>

Notice two differences:

HTML → onclick
JSX  → onClick

and:

HTML → "handleClick()"
JSX  → {handleClick}

React event handlers are generally passed as JavaScript functions rather than strings.

onchange vs onChange

HTML:

<input onchange="handleChange()">

JSX:

<input onChange={handleChange} />

The JSX event name uses camelCase.

Common examples include:

HTML	JSX
`onclick`	`onClick`
`onchange`	`onChange`
`onsubmit`	`onSubmit`
`onmouseover`	`onMouseOver`
`onkeydown`	`onKeyDown`
`onfocus`	`onFocus`
`onblur`	`onBlur`

JSX Uses JavaScript Expressions

Traditional HTML does not provide JSX-style curly braces for inserting JavaScript expressions.

In JSX, you can write:

function App() {
  const name = "Arafat";

  return (
    <h1>Hello, {name}!</h1>
  );
}

The browser displays:

Hello, Arafat!

The expression:

{name}

is JavaScript inside JSX.

You can also perform calculations:

function App() {
  const price = 500;
  const quantity = 3;

  return (
    <p>Total: ₹{price * quantity}</p>
  );
}

The result is:

Total: ₹1500

This makes JSX highly useful for creating dynamic interfaces.

JSX Uses JavaScript for Attribute Values

HTML commonly represents attribute values as strings:

<img src="profile.jpg" alt="Profile">

In JSX, you can use a JavaScript variable:

function Profile() {
  const image = "/profile.jpg";

  return (
    <img src={image} alt="Profile" />
  );
}

The curly braces tell JSX that image is a JavaScript expression.

You can also use expressions:

<img
  src={isDarkMode ? darkLogo : lightLogo}
  alt="Website logo"
/>

This allows the interface to change according to application data.

JSX Requires Properly Closed Elements

HTML has rules that allow certain elements to be written without explicit closing tags.

For example:

<img src="logo.png" alt="Logo">
<input type="text">

JSX requires elements such as these to be self-closed:

<img src="logo.png" alt="Logo" />
<input type="text" />

The / before > is important.

HTML

<img src="logo.png">

JSX

<img src="logo.png" />

HTML

<input type="text">

JSX

<input type="text" />

This is one of the most common syntax errors beginners encounter when they start writing JSX.

JSX Requires a Single Root Element

A React component cannot normally return multiple sibling elements directly without wrapping or grouping them.

This is incorrect:

function App() {
  return (
    <h1>Hello React</h1>
    <p>Welcome to my application.</p>
  );
}

The component has two top-level elements.

You can wrap them inside a parent element:

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>Welcome to my application.</p>
    </div>
  );
}

Or use a React Fragment:

function App() {
  return (
    <>
      <h1>Hello React</h1>
      <p>Welcome to my application.</p>
    </>
  );
}

Fragments allow you to group elements without adding an extra DOM element.

JSX Supports React Components

HTML provides standard elements such as:

<header>
<section>
<button>
<p>

JSX can use those same HTML-like elements, but it can also render custom React components.

For example:

<Header />
<ProductCard />
<LoginForm />
<Footer />

These are not standard HTML elements. They are React components created by the developer.

For example:

function Header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

You can then use it:

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

This component composition is a fundamental part of React development.

JSX Uses PascalCase for Components

HTML elements are normally written in lowercase:

<div></div>
<header></header>
<button></button>

React components conventionally begin with an uppercase letter:

<Header />
<ProductCard />
<UserProfile />
<Navigation />

For example:

function UserProfile() {
  return <h2>User Profile</h2>;
}

Then:

<UserProfile />

React interprets the uppercase name as a component rather than a standard HTML element.

JSX Allows Conditional Rendering

One of the biggest advantages of JSX is that JavaScript expressions can be used to control what appears in the interface.

For example:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome Back!</h1>
      ) : (
        <h1>Please Log In</h1>
      )}
    </div>
  );
}

The displayed content depends on the value of isLoggedIn.

You can also use the logical AND operator:

function App() {
  const isAdmin = true;

  return (
    <div>
      {isAdmin && <button>Admin Dashboard</button>}
    </div>
  );
}

This type of dynamic rendering is central to React application development.

JSX Can Render Lists

JSX works naturally with JavaScript array methods.

For example:

function App() {
  const technologies = [
    "HTML",
    "CSS",
    "JavaScript",
    "React"
  ];

  return (
    <ul>
      {technologies.map((technology) => (
        <li key={technology}>
          {technology}
        </li>
      ))}
    </ul>
  );
}

Here, JavaScript’s map() method generates JSX elements for each item in the array.

Traditional HTML does not provide this JavaScript-driven rendering mechanism because HTML itself is a markup language rather than a programming language.

JSX Can Use JavaScript Functions

You can call JavaScript functions inside JSX expressions.

function getGreeting() {
  return "Welcome to React!";
}

function App() {
  return (
    <h1>{getGreeting()}</h1>
  );
}

The function is evaluated and its returned value is displayed.

This allows components to combine presentation with application logic in a controlled way.

JSX and HTML Comments Are Different

HTML comments use:

<!-- This is an HTML comment -->

JSX comments need to be written inside JavaScript comment syntax and wrapped in curly braces:

{/* This is a JSX comment */}

For example:

function App() {
  return (
    <div>
      {/* Main heading */}
      <h1>Welcome to React</h1>
    </div>
  );
}

Using an HTML comment directly inside JSX will cause a syntax error.

JSX Attribute Names Often Use camelCase

Many JSX attributes use camelCase rather than the naming style commonly seen in HTML.

For example:

<button tabIndex={0}>
  Click Me
</button>

Other examples include:

readOnly
maxLength
autoFocus
autoComplete
spellCheck

This follows JavaScript naming conventions.

Common Attribute Differences

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`tabindex`	`tabIndex`
`readonly`	`readOnly`
`maxlength`	`maxLength`
`autofocus`	`autoFocus`
`autocomplete`	`autoComplete`
`spellcheck`	`spellCheck`

JSX Supports Boolean Attributes Differently

HTML allows boolean attributes to be written without a value:

<button disabled>
  Submit
</button>

JSX can also use the shorthand:

<button disabled>
  Submit
</button>

You can also explicitly provide a JavaScript boolean:

<button disabled={true}>
  Submit
</button>

Or use a variable:

function App() {
  const isDisabled = true;

  return (
    <button disabled={isDisabled}>
      Submit
    </button>
  );
}

This makes it possible to control element properties dynamically.

JSX Can Contain Strings and Numbers

JSX can display JavaScript values directly.

function App() {
  const name = "Alex";
  const age = 25;

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

The values are inserted into the rendered interface.

You can also perform expressions:

<p>{10 + 20}</p>

The result displayed is:

JSX Is Transformed Before Reaching the Browser

Another important difference is that browsers do not directly understand JSX syntax.

For example:

const element = <h1>Hello React!</h1>;

must be transformed into JavaScript that React and the browser can work with.

Modern React development tools handle this transformation automatically.

The general process looks like:

JSX Source Code
      ↓
JSX Transformation
      ↓
JavaScript
      ↓
React
      ↓
Browser
      ↓
User Interface

This transformation happens as part of the development and build process.

As a React developer, you generally write JSX rather than manually converting it into JavaScript.

JSX vs HTML: Complete Comparison

The following table summarizes the most important differences.

Feature	HTML	JSX
Purpose	Structures web documents	Describes React component UI
Environment	Web documents	JavaScript and React applications
CSS class	`class`	`className`
Label attribute	`for`	`htmlFor`
Events	`onclick`	`onClick`
JavaScript expressions	Not directly embedded	`{expression}`
Components	Not supported	`<Component />`
Comments	`<!-- -->`	`{/* */}`
Self-closing elements	Often optional	Required for elements such as `<img />`
Multiple root elements	Allowed in a document	Group with parent or Fragment
Dynamic rendering	Requires JavaScript separately	JavaScript can be used directly in JSX
Array rendering	Not part of HTML	Commonly uses `.map()`
Attribute naming	HTML conventions	Often camelCase
Transformation	Browser parses HTML	JSX is transformed into JavaScript

HTML Example vs JSX Example

Consider a simple profile card.

HTML Version

<div class="profile-card">
  <img src="profile.jpg" alt="Alex">
  <h2>Alex Johnson</h2>
  <p>Frontend Developer</p>
  <button>View Profile</button>
</div>

JSX Version

function ProfileCard() {
  const name = "Alex Johnson";
  const role = "Frontend Developer";

  return (
    <div className="profile-card">
      <img src="/profile.jpg" alt={name} />
      <h2>{name}</h2>
      <p>{role}</p>
      <button>View Profile</button>
    </div>
  );
}

The JSX version is more dynamic because the content comes from JavaScript variables.

For example, changing:

const name = "Alex Johnson";

to:

const name = "Sarah Williams";

automatically changes the displayed name wherever {name} is used.

When Should You Use HTML?

HTML is appropriate when you are creating the basic structure of a traditional web document.

For example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>

  <body>
    <h1>Welcome</h1>
    <p>This is a traditional HTML page.</p>
  </body>
</html>

HTML is the foundation of the web and remains important even when using React.

React applications ultimately interact with the browser’s DOM, which is built from standard web platform elements.

When Should You Use JSX?

JSX is useful when building React components and describing their user interfaces.

For example:

function Dashboard() {
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Welcome to your dashboard.</p>
    </main>
  );
}

When developing React applications, JSX is generally the preferred way to describe component UI because it keeps the structure of the interface close to the JavaScript logic and data that control it.

Common JSX and HTML Conversion Mistakes

Writing class Instead of className

Incorrect:

<div class="container">

Correct:

<div className="container">

Writing for Instead of htmlFor

Incorrect:

<label for="username">

Correct:

<label htmlFor="username">

Using Lowercase Event Names

Incorrect:

<button onclick={handleClick}>

Correct:

<button onClick={handleClick}>

Forgetting to Self-Close Elements

Incorrect:

<img src="/logo.png">

Correct:

<img src="/logo.png" />

Using HTML Comments

Incorrect:

<!-- Header -->

Correct:

{/* Header */}

Putting JavaScript Expressions Inside Quotes

Incorrect:

<h1>"{name}"</h1>

Correct:

<h1>{name}</h1>

Returning Multiple Elements Without a Parent

Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome</p>
);

Correct:

return (
  <>
    <h1>Hello</h1>
    <p>Welcome</p>
  </>
);

Image Placement: JSX vs HTML

Place this infographic after the main comparison section.

Create a clean 16:9 two-column visual.

Left Side

HTML

class
onclick
for
<!-- comment -->

<img>

Right Side

JSX

className
onClick
htmlFor
{/* comment */}

<img />

Connect the related HTML and JSX syntax with subtle arrows.

Caption:
JSX looks similar to HTML but uses JavaScript-friendly syntax and React-specific conventions.

Alt text:
Comparison of HTML and JSX syntax showing className onClick htmlFor and self closing elements

Image Placement: JavaScript Inside JSX

Place this image after the section about JavaScript expressions.

Show:

const name = "Alex";
const age = 25;

return (
  <div>
    <h1>{name}</h1>
    <p>Age: {age}</p>
  </div>
);

Visually highlight {name} and {age} as JavaScript expressions.

Caption:
JSX allows JavaScript expressions to be embedded directly inside user interface markup.

Alt text:
JavaScript variables embedded inside JSX using curly braces

Image Placement: JSX Components

Place this image after the section explaining React components.

Show:

<App />
   │
   ├── <Header />
   ├── <Navbar />
   ├── <Main />
   └── <Footer />

Use component cards to visually distinguish React components from standard HTML elements.

Caption:
Unlike HTML, JSX can directly compose custom React components into a user interface.

Alt text:
React JSX component tree containing App Header Navbar Main and Footer

Quick JSX vs HTML Cheat Sheet

Keep this reference available while writing React components.

If You Write in HTML	Use This in JSX
`class`	`className`
`for`	`htmlFor`
`onclick`	`onClick`
`onchange`	`onChange`
`onmouseover`	`onMouseOver`
`tabindex`	`tabIndex`
`readonly`	`readOnly`
`<!-- comment -->`	`{/* comment */}`
`<img>`	`<img />`
`<input>`	`<input />`
JavaScript value	`{value}`
React component	`<Component />`

Key Takeaways

JSX looks like HTML because it was designed to provide a familiar and readable way to describe user interfaces. However, JSX follows JavaScript and React rules that make it considerably more powerful for building dynamic applications.

The most important differences to remember are:

HTML is a markup language, while JSX is a JavaScript syntax extension used heavily with React.
JSX uses className instead of class.
JSX uses htmlFor instead of for.
JSX event handlers use camelCase such as onClick and onChange.
JavaScript expressions can be embedded inside JSX using {}.
JSX elements such as <img> and <input> must be properly self-closed.
Multiple JSX elements need a parent element or Fragment.
JSX supports custom React components such as <Header /> and <ProductCard />.
JSX comments use {/* comment */}.
JSX can dynamically render data, lists, and conditional content.
JSX is transformed into JavaScript before it is executed by the browser.

A simple way to remember the difference is:

HTML
↓
Structures web documents

JSX
↓
Describes React component UI

JavaScript
↓
Provides the data and logic

React
↓
Builds the interactive application

Once you are comfortable with these differences, converting traditional HTML into React JSX becomes much easier. The next step is to learn how JavaScript expressions work inside JSX, because that is where React interfaces begin to become truly dynamic.