Self-Closing Tags

Another JSX ‘gotcha’ involves self-closing tags.

What’s a self-closing tag?

Most HTML elements use two tags: an opening tag (<div>), and a closing tag (</div>). However, some HTML elements such as <img> and <input> use only one tag. The tag that belongs to a single-tag element isn’t an opening tag nor a closing tag; it’s a self-closing tag.

When you write a self-closing tag in HTML, it is optional to include a forward-slash immediately before the final angle-bracket:

Fine in HTML with a slash:

<br />

Also fine, without the slash:

<br>

But!

In JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error:

Fine in JSX:

<br />

NOT FINE AT ALL in JSX:

<br>

Instructions

1.In app.js, fix the broken JSX by adding slashes to all of the self-closing tags.

app.js

const profile = (

<div>

<h1>I AM JENKINS</h1>

I LIKE TO SIT

<br>

JENKINS IS MY NAME

<br>

THANKS HA LOT

</article>

</div>

);

Page updated

Report abuse