HTML

In modern web development HTML will often be generated by various templating engines or compiled JavaScript syntax extensions. You should still try your best to build a DOM that is as semantic as possible to be search-engine friendly, accessible, and easily readable.

Semantic HTML

HTML5 introduced a number of new structural tags like section and article that are important to understand in order to use correctly (HTML5 Doctor is a great resource for this), but even fundamentally basic tags like small, ul, and li should be used intelligently. For example, a series of links in a site nav is semantically a "list," and should be either a ul or an ol depending upon whether the order of the links is meaningful.

JSX

Consider this variable declaration:

const element = <h1>Hello, world!</h1>;

The above syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
If a tag is empty, you may close it immediately with />, like XML: const element = <img src={user.avatarUrl} />;

User-Defined Components Must Be Capitalized

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

Props Default to “True”

If you pass no value for a prop, it defaults to true. These two JSX expressions are equivalent:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

In order to stay in line with Airbnb Eslint rules, we recommend the shorthand version of passing true as props i.e. <MyTextBox autocomplete />.

Common Gotchas in JSX vs HTML

JSX requires a parent element to wrap all children elements. The following will not work:
```
<div>Div Alpha</div>
<div>Div number 1</div>
<h1>Hello world</h1>
```
to fix this, apply a wrapping "parent element".
```
<div>
  <div>Div Alpha</div>
  <div>Div number 1</div>
  <h1>Hello world</h1>
</div>
```
If you prefer to not use any wrapping element, React 16 and beyond allow you to use React Fragments:
```
<>
  <div>Div Alpha</div>
  <div>Div number 1</div>
  <h1>Hello world</h1>
</>
```
In JSX any element can be self-closing i.e. <div/>. In HTML only a few elements can be self closing.
Since JSX is closer to JavaScript than to HTML and because class and for are reserved keywords in JavaScript, React DOM uses camelCase property naming convention instead of HTML attribute names. Specifically, class becomes className in JSX, for becomes htmlFor, and tabindex becomes tabIndex.
To comment out something inside JSX, use the syntax {/* */} to wrap around the text that you’d like to comment out.
Inline styles are not preferred, but if you need to you can pass an object into the style attribute:
```
const divStyle = {
     borderColor: 'blue',
}
return <div style={divStyle}>content</div>
```

ARIA and accessibility

TODO: ARIA best practices
TODO: Considerations like tabindex and tag/component order

Vokal Engineering