When we render JSX, element tags are referencing React components. Since it would be tedious to have to create components for HTML elements, React comes with HTML components. We can render any HTML tag in our JSX, and the output will be just as we'd expect. If you're not sure, you can always run the following code to see which HTML element tags React has:

// Prints a list of the global HTML tags 
// that React knows about. 
console.log( 
  'available tags', 
  Object.keys(React.DOM).sort() 
); 

You can see that React.DOM has all the built-in HTML elements that we need, implemented as React components. Now let's try rendering some of these:

import React from 'react'; 
import { render } from 'react-dom'; 
 
// React internal defines all the standard HTML tags 
// that we use on a daily basis. Think of them being 
// the same as any other react component. 
render(( 
  <div> 
    <button /> 
    <code /> 
    <input /> 
    <label /> 
    <p /> 
    <pre /> 
    <select /> 
    <table /> 
    <ul /> 
  </div> 
  ), 
  document.getElementById('app') 
); 

Don't worry about the rendered output for this example; it doesn't make sense. All we're doing here is making sure that we can render arbitrary HTML tags, and they render as expected.

When we render HTML tags in JSX markup, the expectation is that we'll use lowercase for the tag name. In fact, capitalizing the name of an HTML tag will straight up fail. Tag names are case sensitive and non-HTML elements are capitalized. This way, it's easy to scan the markup and spot the built-in HTML elements versus everything else.

We can also pass HTML elements any of their standard properties. When we pass them something unexpected, a warning about the unknown property is logged. Here's an example that illustrates these ideas.

import React from 'react'; 
import { render } from 'react-dom'; 
 
// This renders as expected, except for the "foo" 
// property, since this is not a recognized button 
// property. This will log a warning in the console. 
render(( 
  <button foo="bar"> 
    My Button 
  </button> 
  ), 
  document.getElementById('app') 
); 
 
// This fails with a "ReferenceError", because 
// tag names are case-sensitive. This goes against 
// the convention of using lower-case for HTML tag names. 
render( 
  <Button />, 
  document.getElementById('app') 
);