react.dev icon indicating copy to clipboard operation
react.dev copied to clipboard

Update `your-first-component.md`: Show example rendered output as `<img>` instead of `<img />`

Open chipit24 opened this issue 7 months ago • 2 comments
trafficstars

In HTML, img elements are void elements that don't have an end tag and are not self-closing. This is what you would see if you opened the DOM in any modern browser; this PR updates the Using a component → What the browser sees section of the docs to more accurately reflect this.

Also, in other parts of the docs, e.g. at Writing Markup with JSX → Converting HTML to JSX, the img tag is correctly written:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>

And an explanation is even given later on, though it's inaccurate since HTML technically does not have close-closing tags (I'll get another PR up to update that we well):

JSX requires tags to be explicitly closed: self-closing tags like <img> must become <img /> [...]


Aside (interesting read 😁): The case against self-closing tags in HTML by Jake Archibald (06 July 2023)

chipit24 avatar Apr 21 '25 20:04 chipit24